AMP

Cookie classification on AMP

Web Standards

Posted by Katharina Familia Almonte, Global Product Lead at Google on the AMP Project

Last year, Chrome announced its plans to introduce a cookie classification scheme as part of its ongoing effort to improve privacy and security across the web, which is expected to take effect with Chrome 80 in February 2020. Mozilla has affirmed their support of the new cookie classification model with their intent to implement the SameSite=None; Secure requirements for cross-site cookies in Firefox. Microsoft has announced plans to begin implementing the model starting as an experiment as soon as Microsoft Edge 80.

The AMP team is committed to protecting user privacy and this blogpost will explain how you can support greater transparency and user choice with the upcoming browser changes, while also maintaining a good user experience with AMP. With Chrome 80 expected to launch in February, this blogpost will focus on Chrome’s changes specifically.

Chrome’s new cookie settings explained

Chrome’s new secure-by-default model assumes that all cookies should be protected from external access unless otherwise specified. Developers must use a new cookie setting, SameSite=None, to designate cookies for cross-site access, and an additional Secure attribute so cross-site cookies can only be accessed over HTTPS connections. Chrome will treat cookies that have no declared SameSite value as SameSite=Lax cookies. Only cookies with the SameSite=None; Secure setting will be available for external access, provided they are being accessed from secure connections. For more detail on the new model, read this developer blog post.

Who’s affected

If your site needs to access your own first party cookies on AMP pages rendered in the AMP Cache, we recommend assessing carefully whether the upcoming browser changes will impact your user experience. This could be the case, for instance, when users transition from the AMP cache to the origin domain and a paywall, login state, measurement or shopping cart functionality relies on first party cookie access. There are two different solutions you could employ, but which one is best for your site will depend on your specific use cases and can change over time.  

Designating cookies for cross-site access

One solution for AMP publishers affected by Chrome’s cookie classification changes, is to set your first party cookies on AMP pages to SameSite=None; Secure. This will designate the first party cookies  for cross-site access and avoid disruptions in user experience:

Set-Cookie: widget_session=abc123; SameSite=None; Secure

The benefit of this approach is that it is the easier one to implement, but if browsers proceed to offer users fine-grained controls to manage cookies accessed by a single site separately from cookies accessed across multiple sites, there is a higher risk that users will clear your first party cookies on cached AMP pages since they will be marked for cross-site access.

Signed Exchange offers help

Alternatively, publishers can use Signed Exchange to achieve a state where first party cookies are treated as such on AMP pages rendered in the AMP Cache. Signed Exchange is an emerging technology that can be used to attribute the page’s URL to the original publisher domain, even when the page is delivered via the AMP cache with all of the loading speed benefits it provides (see blog post and guide). The benefit of Signed Exchange here is that when browsers start preventing cookies from external access unless they are specified otherwise, Signed Exchange will ensure that your first party cookies don’t require designation on pages rendered in the AMP Cache. But Signed Exchange does not currently address all use cases as it is not supported in the Top stories carousel at the time of writing.

Summary

In summary, Chrome is planning to introduce its new SameSite=None; Secure cookie settings in February. To ensure an optimal user experience on pages in the AMP cache that need to access first party cookies, we recommend publishers designate cookies for cross-site access via these new settings or implement Signed Exchange. We hope this blog post helps you maintain a good user experience while also supporting the path to greater privacy controls for users, as browsers start adopting the new cookie classification model. For more details on how to use and test Chrome’s SameSite cookies check out the guide on web.dev and the tips in the Chromium SameSite Updates.

CCPA support in AMP

Web Standards

Posted by Jeffrey Jose, Product Manager at Google on the AMP Project

The California Consumer Privacy Act (CCPA) is a new data privacy law that establishes various rights for California state residents. The law applies to companies that do business in California and meet one of several criteria related to revenue, data processing, and other factors. 

Updates to the AMP consent framework

Based on the feedback we heard from publishers, we’ve updated the AMP consent framework to obtain the consent publishers might deem necessary for CCPA compliance. With these new updates, publishers can include multiple consent prompts and trigger the right prompt based on the location of the user.

Consent across multiple surfaces

Publishers who wish to keep user consent in sync between multiple surfaces can store the user’s consent on the server-side and expose the information to <amp-consent> via the checkConsentHref attribute. You can configure AMP to check your endpoint first and the response determines whether a user-consent prompt is displayed or not. Additionally, the previously obtained user consent can be passed from the server to the ads and analytics vendors configured on the page.

Support in AMP Stories

For AMP Stories, publishers can create links to their CCPA opt-out page within a story to collect user consent. 

We’ve also updated our reference docs and amp.dev with sample codes to illustrate sample scenarios.

Looking ahead

To make development easier, we plan to extend <amp-geo> in the future by providing US state level detections of users. As always, we invite you to submit new ideas by filing an issue. If you’re a vendor who wants to customize how your AMP extensions behave based on user controls, please get started by following our contribution guidelines.

AMP 2019 Decoded: Thank You for an Incredible Year

Websites

2019 was a big hit for AMP. We continued to grow our community and create excellent experiences across websites, email, stories and ads. So let’s flashback to the beginning of this year and recap all the milestones we accomplished together.  Watch the video and read below:

Next.js for AMP 

Building AMP pages through React server-side rendering has gained enough momentum for us to realize we needed to add to our capabilities to support this use-case. That’s why we integrated with Next.js, one of the most popular frameworks for React. Fun fact: nextjs.org is built entirely with AMP!

amp-script

The game-changer <amp-script> finally hit your screens this year. This highly anticipated component enables you to add custom JavaScript to your AMP pages, share code across AMP and non-AMP pages, and build things that were not possible before.

OpenJS foundation welcomes AMP 

We revealed what’s next for our open governance model by announcing our decision to join the OpenJS Foundation. Its mission aligns with ours, and it’ll magnify diverse voices in tech and support our efforts to create a fairer web. 

AMP in your inbox 

Gmail launched support for AMP for email, bringing our user-first experience to an inbox near you. Email senders can now create frictionless experiences and interactive content to boost engagement. The AMP for email spec also has engagement from other major email providers like Outlook and Yahoo Mail, and we are looking forward to reshaping the email ecosystem together. 

The new component is also available on Mail.ru, and early adopters are already celebrating great results. OYO, India’s largest hospitality company, saw a 60% uplift in conversions when testing AMP for email. 

Arigato for making AMP Conf a success  

Our team met nearly 500 of you in Tokyo at our third annual #AMPConf. In addition to product announcements, we also launched a completely redesigned amp.dev, one website for all of our code samples, templates, and documentation. AMPConf2020 is already in the making, so stay tuned to hear where we will be taking the event next.

AMP Contributors Summit in the Big Apple 

In early October we caught up with around a hundred contributors in New York at the annual #AMPCS2019 to discuss new features for AMP. It wasn’t just talk, we hosted breakout sessions where we worked together to improve our projects, and knocked some AMP socks off in the process. 

A strong community

Nearly 1,000 people have contributed code to AMP and are helping us design a faster, better web for all. This year alone, 341 contributors made over 18,300 contributions across all AMP project repositories. 

The People Behind the Code

The community plays a massive role in making AMP great; it’s where we share what we know and learn what we don’t. So we launched the ‘People Behind the Code‘ series to understand how community members use AMP in real life to make a difference. 

19 new Roadshows under our belt 

AMP hit the road 19 times this year, taking our Roadshows around the globe. From Johannesburg to Seoul, 1,600 of you came out to see what AMP is all about. 

The Roadshows are designed to help developers build full-fledged AMP websites with confidence. So we deep-dive into the key four pillars: design, interactivity, DevOps and monetization, to make sure you have everything you need to excel. 

If you want to see where we will be going in 2020, head over to our AMP Roadshow page to find out. Can’t see your city on the list? Let us know, we’re always looking for new places to visit, or host your own event. We’ll provide you with all the material – all you need to do is to show up!

2020 vision 

It’s been a remarkable year. Thank you for your creativity and commitment to creating a faster, user-first web for all. We’re excited to see what’s next for AMP, and look forward to continuing our work together in the new year. To stay in the loop about all of AMP’s projects and see our 2020 vision, sign up for our newsletter. 

Posted by Alex Durán, AMP Project Marketing at Google

Our 2019 Contributions to Web Platform Interoperability

Websites

Editor’s Note: the following post was written by Frédéric Wang, Partner at Igalia

For the third year in a row, the AMP Project has worked with Igalia to address bug reports and enhancement requests from the Web community. Typical tasks include bug triaging, debugging and analysis, writing tests, landing patches, and discussions with the different actors of the Web platform. This has not only been instrumental to significantly speed up the goals of the AMP project, but has also been generally beneficial to all the developers and users of the Web platform.

This blog post describes our activities for this year, focusing on WebKit/iOS bugs and features. However, our Web platform interoperability effort occasionally extends to other browser communities and standardization groups as well.

Resize Observer

Intersection Observer shipped in iOS 12.2 thanks to Google Engineer Ali Juma. This is a new JavaScript API to asynchronously watch changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Resize Observer is a similar API  which we implemented earlier this year under a preference flag. This JavaScript API allows Web developers to asynchronously observe when an element is resized, regardless of why. It is available in iOS 13 beta and the corresponding preference flag has been turned on by default in trunk, so we expect this feature to be available in the iOS 13 release. (Update 01/28/2020: ResizeObserver is now part of Safari Technology Preview)

Scrolling

Apple took over the task we started last year to make <iframe> elements scrollable and this behavior is now enabled by default in the latest iOS 13 version. Other bug fixes involving scrollable elements landed for scroll-snap-align, scrollability after resize find-in-page indicator after scroll as well as for various iOS 13 regressions related to scroll flickering and jittering.

Enhancements have been implemented for the ScrollIntoViewOptions parameter of scroll APIs. Support for logical scroll alignment is shipped in iOS 13. We also continued our efforts to support the scroll-behavior IDL parameter and CSS property and we expect to complete this in the next semester. While working on this, we also detected and fixed Chrome bugs related to the scrollIntoView() method, including cases when a scrollbar is present or when the scroller uses a non-default writing mode.

An old browser interoperability issue for users relates to inconsistent values of scrollLeft, scrollTop and similar APIs and one of our important achievements has been to ensure more reliable and standard behavior happens when setting or getting scroll coordinates. We introduced an option to make Chrome use standard values in non-default writing modes and plan to ship it, after ensuring that it won’t cause serious breakage. Similarly, Apple decided to enable our 2018 changes for the viewport scroller on all WebKit ports.

Besides usual bug fixes, we began implementing other interesting scrolling features, including overscroll customization and overscroll-behavior which are powerful APIs for web developers to control what happens when a scroller reaches its boundaries. We expect more progress on this next year.

Resource Loading

Another exciting goal is to give more power to Web authors to control loading behavior. In particular, this allows the ability to control privacy and optimize page layout.

The referrerpolicy attribute has been implemented to specify how much referrer information should be included within the requests associated to an HTML element loading resources. This is only implemented for the <iframe> and <script> elements and is available in iOS 13 under an experimental feature flag. We will continue to talk to Apple to see when this can be enabled by default or implemented for other elements.

The imagesrcset and imagesizes attributes on <link rel=preload> have also been implemented and are available in iOS 13 under an experimental feature flag. These attributes give the possibility to preload a responsive image represented by an <img> element with relevant sizes and srcset attributes and optimize the selection of the appropriate size for the user device.

We also started to submit patches to support the lazyload attribute on the <img> and <iframe> elements. These attributes enable Web authors to indicate whether it is a good idea to lazily load the element content (e.g. if they are not visible in the viewport until the user scrolls to them) or if their content should instead be loaded right away. These hints are very helpful for browsers to optimize loading of resources.

Finally, we made an experimental support for the intrinsic size attribute in WebKit. This proposal is intended to help browsers to determine aspect ratio or size of an image before its content is actually loaded, in order to avoid extra post-load reflow. This proposal has been superseded by a pure CSS-based approach addressing the same use case. Our experiment was useful for discussions among browser vendors and within the CSS WG and we plan to rewrite our patch to instead implement the CSS-based approach in WebKit.

Conclusion

Collaboration between the AMP project and Igalia to advance the state of the Web Platform has been very successful. There are several pending tasks and new ideas to work on so we look forward to continuing with this effort next year!

From Static to Interactive: Adobe Campaign Brings Email to Life with AMP for Email

Email

Adobe drives innovation as one of the firsts to deliver this modern app functionality from Google.

Editor’s Note: the following guest post was written by Sunil Menon and was originally featured on the Adobe Blog

Email continues to play a major role both in our professional and personal lives. In fact, according to Adobe’s annual Consumer Email Survey, Americans spend more than five hours a day checking their emails. With consumers spending so much time in their inbox, email has become an essential channel for brands to engage with their customers. Our survey also revealed that 60% of consumers prefer to receive brand offers via email, yet consumers only find a quarter of the emails they receive interesting enough to open.  

If email content is static, it can become out-of-date almost as soon as it’s sent. Plus, email often requires the consumer to take action forcing them to exit the email or opening a browser window, making the experience feel more fragmented or transactional. How can brands take better advantage of the time consumers spend in their inboxes to deliver more personalized experiences and drive higher engagement? The answer lies in creating emails that are both interactive, authentic and informative.  

To help brands stand out among the more than 290 billion emails that are sent every day and to further demonstrate its commitment to innovation, Adobe Campaign, part of Adobe Experience Cloud, is announcing compatibility with AMP for Email, supported by Gmail and other mail clients. Available to Adobe Campaign customers now, this innovative modern app functionality for email allows senders to include AMP components inside rich, engaging emails sent from Adobe Campaign Classic. Adobe Campaign is among the first group of email marketing solutions to be compatible with AMP for Email.

By leveraging AMP for Email within Adobe Campaign, marketers are able to deliver innovative email marketing campaigns by: 

  • Interacting with customers directly within email: Marketers will no longer have to rely solely on embedded hyperlinks. With AMP, customers will be able to interact with polls, make reservations, manage subscription preferences and more all directly within their email itself. Information captured in form fills syncs directly into Adobe Campaign, so marketers can build engaging email campaigns and gain actionable insights on their marketing efforts all from within the same application.   
  • Updating email content in real time: Content in static emails can quickly become out-of-date or irrelevant. Now information that is updated on a brand’s website can also be updated in real-time inside an email, even after it has already been sent. Thus, giving consumers the latest and most pertinent information and saving marketers the hassle of having to send out an additional message with updated information. For example, a retailer may have sent out a personalized email to a customer suggesting a new coat for the customer to purchase based on past behavior. At the time the email is sent, the coat may not be discounted, but by the time the customer opens the email, the coat is discounted 15%. The new price will be automatically updated within the email, providing the most accurate pricing to inform their purchase decision.  
  • Building dynamic customer experiences quickly and at scale: By leveraging AMP modules within Adobe Campaign, marketers can quickly and easily build interactive, personalized email experiences for customers regardless of the email client. AMP for email is currently supported by Gmail, Outlook and others.  

For more information on Adobe Campaign, click here.

How The United Nations Development Programme Engages Audiences With AMP Stories And MakeStories

Stories

Editor’s Note: The following guest post was written by Pratik Ghela, Product Manager – MakeStories.

Visual storytelling helps businesses and organizations engage their audiences in immersive content experiences. And putting together compelling online and mobile stories doesn’t have to be difficult. That’s why we created MakeStories, an online drag/drop building tool for AMP Stories. We provide users with a library of royalty-free stock images, illustrations, and other graphics to bring their storytelling to life. With no coding knowledge required, our goal is to give even non-technical people the tools to quickly and easily build AMP Stories around their brand content.

To give some insight into the process of creating an AMP Story, we are sharing a conversation we recently had with one of our users, the United Nations Development Programme. We came to learn about their work with AMP Stories through Twitter, where our team would help them answer product questions they had. With some support from our team, they were able to create a powerful Story about the Sahel region in Africa to share with the world. 

The UNDP’s Story combines dramatic photography and video of the region’s people and places, with captions and graphics describing the humanitarian, economic, and environmental challenges and opportunities in the area. Its click-through format is easy to view on both mobile and desktop devices, combining photos, videos, narrative, and graphics to create an immersive storytelling experience.

Here’s what UNDP’s Digital team had to say about how they created their Story: 

How did you hear about AMP Stories? Why did you think Stories would be a good fit for the UNDP?
We noticed a great story published by the Washington Post on the Hong Kong protests. We were impressed by the immersive experience and started researching the technology stack used for its production. We discovered that it was an open format called AMP Stories and decided to give it a try. 

Tell us about the Story you made… 

We wanted to highlight UNDP’s work in the Sahel region in a powerful visual format. The Story shows the potential of investing in the region’s youth and natural resources, which could help address the triple threat of poverty, exclusion, and climate change.

UNDP’s Story on the Sahel

How did you choose your subject matter and what made it a good fit for Stories?

The timing was good because the Intergovernmental Panel on Climate Change (IPCC) had launched its new report on Africa. Also, the G7 Development Ministers’ meeting was focusing on the Sahel and made announcements about UNDP projects in the region, such as a youth entrepreneurship initiative. We had impactful photos and raw video footage from the Sahel region, so we thought that AMP Stories could be a good opportunity to explore a new storytelling format. 

How did you decide to use MakeStories?
Our own development resources were tied to other projects, and we wanted to see if such a Story could be produced by someone without a programming background. We had already experimented with other multimedia story platforms, but the AMP Stories format seemed like it wasn’t too complicated to produce, which made MakeStories a quick winner.

Can you tell about the process of making a Story?

The process was pleasant and smooth. MakeStories allowed our graphic designer and editors to build a Story from scratch without developer intervention. The challenges we faced at the beginning were understanding the tool and being able to generate templates to have a coherent look—and that took about 8 to 10 days to build. We worked with the MakeStories team throughout the journey, including when we had questions, which made the process even simpler. 

UNDP used MakeStories editing templates to build their Sahel Story.

What was your experience like hosting the Story once it was created?
It was absolutely seamless. MakeStories offered a landscape view mode feature available on request that helped us to get an idea of the landscape version before uploading. Landscape mode required minimal customization thanks to the way the HTML/CSS is coded. We downloaded the exported package, added some customizations and after that, we just put it into the Github repository and published via Github pages.

MakeStories give you several options to publish your Story

How was your Story received by viewers?

We have received a lot of positive feedback from colleagues and partners who praised the creativity and engaging experience with this Story. The Story was posted prominently on our site in the top image slot and on social media. Additionally, the Story surfaced in Google Discover, which drove a significant amount of traffic.

How were people interacting with your Story? Did you see different behaviors on desktop and mobile?

We did not track the number of clicks. We saw that 75% of views of the English version were from mobile, but the average time on the page was longer for views from the desktop. This shows that while the format looks like mobile-first, it works on desktop as well.

Can you tell us the range and types of stories, campaigns, or initiatives you might use AMP Stories and MakeStories for in the future? 

We might use AMP and MakeStories in the future to promote our multimedia pieces where we showcase our headline stories, with fresh visual and editorial content from around the world. MakeStories is a good fit for our storytelling efforts because it allows us to quickly create a Story from scratch without the need of a developer, where the designer can create slide templates and the editors quickly edit into different languages. 

Have you produced additional Stories? If so, what MakeStories features did  you use?

After our first experience with MakeStories, we created a second Story about how climate change will affect the way we eat and all the hidden costs of unsustainable food production. For this Story, we used illustrations (and animations in some slides) to explain, complement, and clarify some of the facts in the text to create a more engaging and appealing Story. 

What would you tell other organizations about Stories and MakeStories? 

Storytelling is essential for advocating for sustainable development. As an organization that constantly produces stories and digital experiences, having a platform that allows us to create appealing and intuitive content with low effort in the production process significantly improves our efficiency and experience we offer to our audience.

Storytelling is who we are. It’s how we connect with each other. Since the first humans carved out scenes on cave walls, people have used visual storytelling to share information and experiences. The tools for future storytelling are evolving, with engaging new ways of conveying information, and users now prefer tappable stories for consuming content on the web. 

What stories could you be telling to inform your audiences and engage them in your mission? As the folks at UNDP describe, MakeStories makes it easy to create visually compelling stories and share them with the people you want to reach—in a mobile-friendly, easy-to-view, click-through format. Check out MakeStories and get started with your first Story today.

Written by Pratik Ghela, Product Manager – MakeStories

Creating Delightful User Experiences Using AMP On Adobe Experience Manager

Websites

Editor’s Note: the following guest post was written by Matthias Rohmer, Development Director at Jung von Matt

TL;DR: Jung von Matt helped BMW drive amazing user experiences using AMP on Adobe Experience Manager.

It’s fairly uncommon that you are free to choose which technology to use to implement for a client’s project. Clients that have chosen an enterprise solution usually seek products and services that complement those choices while allowing for future growth.

When BMW was searching for a company to partner with to rebuild the brand’s website www.bmw.com in 2017, they were looking for that complementary solution. As almost all of BMW’s websites were built using Adobe Experience Manager (AEM), they were looking for a team that was able to both deal with such a high-end system as well as use its capabilities to build an easy-to-maintain, high-performance website.

This was a goal BMW had missed with their already-existing sites. Despite sharing the same backend, they were based on a variety of frontend frameworks and libraries. Fairly early in the process, we decided to bring some fresh air to this stack. Therefore we wanted to introduce AMP as the governing frontend technology. That was where our heads began spinning: what would be the best way to integrate AMP with AEM, especially with a CMS that makes so many assumptions about your frontend development?

Problems to solve when integrating AMP with AEM

After some research it occurred to us that there were three main challenges that we would need to solve in order to render valid AMP pages from AEM: 

  • As AMP requires all of a document’s CSS to be inlined in the <head> we would need to find a way other than AEM’s built-in ClientLib functionalities to render our CSS
  • For all of our pages to be AMP valid we would need a mechanism to only render resource hints (<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>) for AMP components actually used on a page
  • To be able to progressively enhance the website for returning visitors, AEM would need to be able to render AMP and non-AMP pages at the same time

Inline CSS with AMP

AEM has a fairly streamlined approach of handling a page’s styles: the ClientLib mechanism will take care of combining all the CSS needed for a page based on so-called categories. Based on those categories you can then let AEM create <link> tags in your templates. These will point to built stylesheets containing all your styles.

With AEM’s built-in rewriter pipeline we can use those <link> elements to combine those stylesheets into a common <style amp-custom> tag. The following (highly compressed) code-snippet should give you an idea of how such a transformer might look:

StringBuilder styles = new StringBuilder();
boolean writeStyles = false;

public void startElement(String uri, String localName, String qName, Attributes atts) throws SAXException {
	if (localName.equalsIgnoreCase("link")) {
		// If the element currently in queue is a link tag inspect it
		String href = atts.getValue("href");
		String rel = atts.getValue("rel");

		if (rel.equalsIgnoreCase("stylesheet")) {
			String css = "";
			// TODO: Load the stylesheet from the JCR, store it with others loaded
			// so far and append to styles
		}

		return;
	}

	if (localName.equalsIgnoreCase("style")) {
		if (atts.getIndex("amp-custom")) {
			writeStyles = true;
			// TODO: Use this flag to emit all styles gathered in styles
			// in the transformer's characters method
		}

		return;
	}

	contentHandler.startElement(uri, localName, qName, atts);
}

Only add needed resource hints

Another challenge we needed to solve in order to ensure AMP validity was to only add those <script> elements to the page that are actually needed. We did so by introducing a custom node type to our project:

<ampJS
	jcr:primaryType="bmw:ampJSResource"
	bmw:ampCustomElementTag="[amp-video]"/>

Each of our AEM components has a child of that type holding information about what AMP component it relies on (amp-video in the example above). The advantage of using a custom node type here is that we can safely and quickly query those nodes when a page gets rendered to determine the required AMP components. In code this looks similar to the following:

final PageManager pageManager = resource.getResourceResolver().adaptTo(PageManager.class);
final String currentPage = pageManager.getContainingPage(resource).getPath() + "/jcr:content";

final String query = String.format("SELECT * FROM [bmw:ampResourceHint] AS s WHERE ISDESCENDANTNODE(s,'%s')", currentPage);

final Iterator<Resource> result = resource.getResourceResolver().findResources(query, Query.JCR_SQL2);

while (result.hasNext()) {
	Resource queryResource = result.next();
	final String type = queryResource.getParent().getResourceType();
	ValueMap properties = queryResource.adaptTo(ValueMap.class);

	String[] usedComponents = properties.get("bmw:usedAmpComponents", String[].class);
	if (usedComponents != null && usedComponents.length != 0) {
		// TODO: Store all used components somewhere for later rendering
	}
}

This piece of logic can then be easily called in an HTML template by using a data-sly-use attribute in combination with data-sly-repeat to print all required resource hints to the head of the page.

Serve AMP alongside a PWA

For www.bmw.com we wanted to make sure that the site lands on the user’s screen as fast as possible. To achieve this every first-time visitor will receive the AMP version of our page. At the same time, we wanted to implement features that AMP alone could not offer but a PWA (which is still based on AMP!) could.

This means that our application would need to be able to serve two versions of the same document. Luckily for us this functionality is already available with AEM by using Sling selectors.

To establish a selector all you need to do is implement two templates alongside each other. The one the Sling engine should resolve to by default is simply called html.html. The other one is named after your selector. In our case it’s pwa.html which makes all of our articles either accessible in their pure AMP version via brooklyn-beckham-car-photography.html or brooklyn-beckham-car-photography.pwa.html with our PWA features.

Using this method, we had found a way to independently serve our valid AMP pages alongside our PWA. But how would a user ever end up on our Progressive Web App? That was where amp-install-service-worker had its shining debut. By using this AMP component, the www.bmw.com is installing a Service Worker as soon as the user visits one of its pages in any of the AMP caches. From that point on we were then able to rewrite all requests going to brooklyn-beckham-car-photography.html to brooklyn-beckham-car-photography.pwa.html instead in order to silently enhance the user’s experience.

For us, those three were the main challenges when we were building BMW’s new international marketing website. In the end, all of them were solvable without reinventing the wheel, by using functionalities that are already built into AEM and AMP in creative ways.

AMP and Adobe have teamed up with Bounteous to make it even easier to build AMP sites on Adobe Experience Manager. Learn more and get started here.

Written by Matthias Rohmer, Development Director at Jung von Matt

People Behind The Code: NDTV’s Rise To Global Heavyweight

Websites

New Delhi Television Limited (NDTV) is one the most-watched news networks in India. They were also pioneers in bringing their content online with an accessible, user-friendly design.  

As smartphones became more affordable and accessible, mobile usage exploded across India in 2015. However, mobile data speeds also varied wildly from region to region. NDTVs development team quickly honed in on fast loading times as a way to gain a competitive edge, so they became early adopters of AMP. 

Vikas Kumar, NDTV

We caught up with Vikas Kumar, the head of NDTVs technology team, to talk about the impact AMP had on their mobile-first approach. 

Could you give us a bit of background on your company, and what made you decide to use AMP? 

NDTV launched in 1988 as a production house for Doordashan, a state-run news channel. We eventually launched our own independent channel, with dedicated content across news, sports, entertainment, finance, tech, to name just a few. 

We launched NDTV.com in 1999, and in the last two decades have grown into one of the top 20 news websites in the world. Through a commitment to quality content, UX, and localisation (our content is available in English, Hindi, Tamil, and Bengali), we now average close to 200 million monthly active users. 

We always saw page loading time as key to growing our online audience. One of our team members read an article about AMP, which got the developers talking. Our Google Account Manager sent us an email about it the day after, so it seemed like fate was calling!

Overall, we felt that AMP’s faster load times, and optimizations like pre-caching on SERP, could help us deliver a superior user experience.

Did integrating AMP present any challenges?

No, not really. Our SEO had been moving away from desktop towards mobile for some time, and with mobile index first taking precedence over desktop search, we knew it was the right option. 

We had some initial doubts about integrating third-party widgets, and whether or not we could maintain the existing look and feel of the site, but we found easy workarounds for everything. For example, <amp-iframe> is very useful for rendering widgets or elements that use custom JavaScript.

How did AMP impact your business? 

For ad-supported sites like ours, more impressions means more revenue. The faster loading pages and better user experience helped us establish a regular audience and generate income that we could reinvest into site expansion.

In this industry – even a one second difference has a massive impact in reducing bounce rates and increasing average session duration. After implementing AMP, average First Meaningful Paint (FMP) went from three seconds to one. 

AMP also prevents render blocking JavaScript by making it Asynchronous, and it eliminates third-party JavaScript which drags on loading time. It made us fast and agile. 

Our competitive advantage has decreased over time, as most publishers in India have embraced AMP and also take advantage of the platform. However, AMP really helped establish the channel with our target audience from the get-go. 

What advice would you give to anyone considering AMP? 

Make sure you familiarize yourself with all of the available AMP components; it will help you build a strong initial site framework. 

You should also continuously assess whether or not your AMP pages are valid, and if they’re not, take the time to understand why. The AMP website has resources for everything you could hope for, so we visit all the time.  

Did you find any AMP components difficult to implement? Are there any components you’d like to try out? 

We found <amp-live-list> a bit tricky to begin with! We wanted to run graphics of real-time election results on our site, but the third party JavaScript in it caused a problem.

In the end, we just posted our problems to the community and it was great that we could find a solution with the help of fellow developers, because AMP is open sourced, it’s constantly evolving so it’s great to collaborate and help each other.

We’re really looking forward to testing <amp-web-push>, which just launched recently.

What excites you most about the future of AMP? 

News like AMP being part of the OpenJS foundation gives us confidence that it’s being built with publishers and developers in mind, and is an open platform. New components and experiences like AMP Stories just add to the excitement. AMP+ PWA with one line of code would be awesome to have!

Vikas and his team are excelling with AMP – and you could too. Check out the resources on amp.dev for everything you need to further your career with AMP. Grow your AMP skills.

Have you been using AMP as part of your strategy? Tell us your story! 

To stay up-to-date with the latest news, features, and tips about using AMP, sign up for our newsletter.

Posted by Alex Durán, AMP Project Marketing at Google

Skimlinks’ Pioneering AMP Extension Helps Maximize Commerce Content Revenues

Websites

Editor’s Note: the following article was originally posted on Skimlinks.com by Debbie Gainsford, Senior Product Marketing Manager at Skimlinks.

It’s tough to be a publisher in 2019. With advertising revenues falling, anything that can effectively and consistently monetize your content is a must, so it’s no surprise that uptake of Skimlinks’ innovative AMP extension has exploded since launch late last year.

The solution, which is the first of its kind, extends our core commerce content technology to AMP articles, enabling publishers to seamlessly monetize affiliate links to merchants.

To date, more than 100 publishers have installed the extension on over 500 domains, accounting for 10M+ affiliated clicks. Some of our publishers have seen an uplift of more than 400% in both sales volume and order value, compared to the same article on the desktop or standard mobile version.

Why is AMP so Important?

As readers and consumers become easier to reach on mobile devices, it has become critically important to give them a seamless experience when they are searching for and reading mobile content. For publishers, AMP has been an invaluable development, as it helps mobile pages load faster, providing an improved reading experience for users. Since its launch in 2015, AMP has grown to power billions of pages across the web, from tens of millions of domains.

The priority for publishers on the AMP platform is to ensure that they can make a profit from their mobile content. In a survey of 124 publisher executives by Digiday this May, 51 percent of publishers using AMP said it was “very significant” or “extremely significant” as a driver of revenues, compared to only 28 percent for Facebook and 25 percent for YouTube.

Our CEO, Sebastien Blanc says “ With the rapid growth of mobile for content and for commerce traffic, mobile monetization has been a top priority for almost every publisher we work with. With this solution we’re confident we can give commerce content a place on smartphones, where more and more readers engage with editorial publishers’ content.”

How leading publishers are monetizing their Commerce Content on AMP

Leading Publishers have installed the Skimlinks AMP script to meet several different business challenges and objectives.

New York Media: Extending to new merchants for uplifts of more than 140%

“We did monetize some AMP articles that linked to Amazon, but we were not monetizing our non-Amazon content, so that is why we installed the Skimlinks extension. Since then we’ve seen more revenue and increased search volume. We now publish all of our content on AMP.” Camilla Cho, GM eCommerce

Around 30% of The Strategist’s audience consume articles via AMP, and they’ve seen great success when monetizing these articles. Their top performing AMP article generated 146% more revenue than the desktop version.

VerticalScope: Monetizing more than just display ads on AMP articles

Kendal Clarke, General Manager of Commerce says “Before using Skimlinks we were just monetizing the AMP traffic with basic display ads, and we didn’t have any commerce links. We installed the Skimlinks AMP extension to capitalize on the revenue we were missing. We knew we generated commerce revenue on these pages via other channels and so it seemed like a no brainer to work with a partner who could help us access this incremental revenue.”

Group Nine Media: Creating a brand new revenue stream with Commerce Content

Group Nine Media have only recently begun their commerce content journey to build a new revenue stream for their business. Working with Skimlinks they have been able to monetize their content across all channels, including AMP. And AMP is a key channel; so far this year, 42% of the Thrilist traffic is via AMP and a staggering 61% of their search traffic is via AMP.

Sam Clanon, Director of Commerce Strategy says “We installed the Skimlinks extension to bring affiliate links to AMP articles for the first time at scale. Since installing the extension, we have captured affiliate commerce revenue using links that are already present in our content. If AMP comprises any meaningful portion of your traffic, Skimlinks is one of the quickest and easiest ways to start generating affiliate revenue from that content.”

Immediate Media: Saving time and resources by automating a manual process

“On radiotimes.com, 15-20 percent of all content is via AMP. AMP traffic is hugely important but monetizing it has always been a challenge. Before installing the Skimlinks AMP extension, we were manually creating and adding affiliate links using the Skimlinks link wrapper. It’s really streamlined the process – no more time spent creating manual links.” says Glenn Caldecott, Affiliate Manager

“If you’re looking to monetise mobile traffic through affiliate marketing, the Skimlinks AMP solution is a no-brainer. The integration is lightweight and easy to implement.”

Reach: Measuring the performance of AMP articles

Publishers know how important analytics are in developing the right content, for the right audience, to maximize revenues. You need detailed insights to understand the performance of your commerce content strategy and to continually improve this key revenue stream, which is why Reach chose to install the Skimlinks AMP script.

“Before installing the Skimlinks AMP extension, we had built a server side solution that adds the affiliate links on the backend, so they’re included on AMP pages. However, we weren’t able to track the impressions and clicks data. Since installing the Skimlinks AMP extension, we can now track impressions as well as clicks which means we can measure CTR on AMP pages, something we couldn’t do previously with our server side solution. We’ve seen a 9% increase in order value from AMP for a top article.” Jeremy Mundy, Senior Product Manager, Revenue

Advantages of Mobile for Commerce Content

Publishers sometimes believe that commerce content on mobile is only appropriate for low involvement, low cost items. However, for many consumers, purchasing on mobile has become second nature, and they are increasingly confident to buy higher ticket items, and those that involve more complex purchase decisions.

This is where affiliate links in mobile content offer consumers a valuable service, as they can go straight from advisory articles to purchase the items they are reading about. We’ve seen from our data that consumers are purchasing TVs worth over US$5,000 from commerce content.

Another area where mobile has an advantage for commerce is in personal items; mobile is a much more private medium than desktop, and when customers are researching intimate or sensitive purchases, they are likely to be more comfortable doing so on a smartphone than on a desktop.

A high-profile example of this comes from New York Media, who were winners of the recent 2019 Commerce Award for Publishers (The CAPS) for Best Mobile Article. The winning article, from The Strategist, was their roundup of the best vibrators available on the market. This was part of a series entitled Things We Don’t Talk About, which focused on finding and recommending the best hygiene, sex, and bodily function-related things we all need but might be too embarrassed to ask about.

Ready to monetize your AMP content?

Like the Skimlinks JavaScript, the Skimlinks AMP integration is a couple of lines of code that needs to be applied to AMP pages. You only need to install the code once, and then there is nothing else for you to do; links will automatically be affiliated and you will start generating revenue from your AMP articles. After installation, no maintenance or updates are needed.

“If you have AMP traffic that you are not currently monetizing then this is a simple and effective solution. One quick implementation, and then you don’t have to worry about it. The extension has given us an easy passive revenue stream, as we have been able to monetize all the different advertiser partners that we work with” Kendal Clarke, General Manager of Commerce, VerticalScope

To quote the winner of the best Mobile Article at The CAPS, “I cannot imagine why someone would not use the Skimlinks AMP extension for publishing their content.”

Skimlinks Publishers can access the AMP script in the Publisher Hub.

For Publishers not yet working with Skimlinks, sign up now.

Users Prefer Tappable Stories On The Mobile Web

Stories

Tappable stories have become a major part of the way consumers engage with content — in fact, 60% of weekly mobile content users now consume tappable stories daily on social media. What are tappable stories? They are interactive experiences on mobile devices that allow users to interact with full-screen visuals like images, videos, and text. This popular format, however, has mostly been limited to the closed platforms it typically lives on. Publishers can benefit from tappable stories by providing consumers with innovative content experiences – not only on their social platforms, but on their mobile sites with AMP Stories.

To better understand the potential results AMP Stories can provide for publishers, Google commissioned Forrester Consulting, a leading global research and advisory firm, to evaluate consumer appetite for tappable stories on the mobile web. The study, titled “Publishers: Capture The Mobile Web Opportunity With Tappable Content”, was conducted September 2019. 

https://blog.amp.dev/wp-content/uploads/2019/10/ampstoriesexample_trim.mp4

To conduct the analysis, Forrester carried out an online survey of 2,062 US online consumers ages 18 to 65 who consume publisher content at least weekly from a mobile device, as well as 22 remote unmoderated user tests with the same audiences. Both studies had participants interact with real-world examples of tappable stories on the mobile web as well as scrolling article equivalents. Forrester found that 64% of respondents preferred the tappable mobile web story format over its scrolling article equivalent.

Source: A commissioned study conducted by Forrester Consulting on behalf of Google, June 2019

Some of the key results from the study:

  • 74% of smartphone users read or view social stories at least weekly. The demand for consuming social stories is higher than consumers’ desire to share their own stories. Publishers have the opportunity to fill the supply and demand gap on their own mobile sites, which can yield advertising revenue and richer data insights. 
  • 84% of users felt tappable stories met or exceeded their expectations for ease of navigation. Consumers were also 1.4x more likely to find the method of navigating the tappable story appealing, compared to its scrolling equivalent. 
  • Over 75% of users are at least somewhat interested in reading tappable stories in their most-read content categories. Data from the study also revealed consumers are highly interested in consuming evergreen lifestyle content from the following categories:
    • DIY/How-To
    • Home/Cooking
    • Sports
Source: A commissioned study conducted by Forrester Consulting on behalf of Google, June 2019

As the Forrester Study suggests, there is a unique opportunity for publishers to reach their audiences with a familiar tappable stories format. AMP Stories bring that format to the open web and allow publishers to take control of their content without being confined to a single ecosystem. The technology behind AMP Stories is still relatively new, but developers have a few options to get started. 

You can read the full study here, detailing the opportunity for publishers and content creators to reach existing readers as well as new audiences with a unique, engaging format on the web. The AMP Stories format lives online as a web page, and thus is indexable and a part of the open web, allowing anyone to try it on their own site. AMP Stories advertising options are still nascent, but we are investing heavily in expanding this area. We are excited to see the results publishers achieve with this mobile-focused format for delivering information as a visually rich, tappable story. 

Written by Alex Durán, AMP Project Marketing Lead at Google