AMP

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

The AMP Contributor Summit Hits New York

Events

Last week around one hundred contributors joined us in NYC to catch up face-to-face and discuss exciting new developments in the world of AMP. 

We mixed in a lot of different formats this year; pairing up expert talks with active breakout sessions. We also opened the floor up to more informal conversations, which gave the community more opportunities to share ideas. 

The big news this year? AMP is joining the OpenJS Foundation incubation program! It’s an exciting development, which will open up key support services while allowing AMP to maintain our own identity, technical focus, and product direction. Check out the ripples the Summit made on Twitter here.

The excitement builds!

With contributors arriving from around the world – there was plenty of buzz descending on NYC. It was so awesome to see groups that usually communicate through Slack and Github come together to build stronger friendships.

Bombshell after bombshell

There were some big announcements throughout the event – from new features to the big news about AMP joining the OpenJS Foundation. On top of that, the breakout sessions got everyone working together to build their skills and grab a sweet treat in the form of AMP cupcakes! 

The dust settles

Nothing brings people together more than shared interests. The last few days have been a fantastic opportunity for the AMP community; everyone jumped in with two feet to share their knowledge and build offline friendships.  

The feedback on this year’s Summit has been so positive – and we’re pumped about the direction our wonderful contributors are taking AMP in. For everyone that came along for the ride – we’d like to sincerely thank you for helping to build and improve upon AMP.

We can’t wait to see the exciting times ahead for AMP, but we need your help. If you’re interested in contributing, join one of our working groups and get involved today! Have specific questions on getting involved? Join in the conversation on our Slack channel. Curious about the talks given during the summit? Check out the presentation decks here and stay tuned to our YouTube channel, where we’ll be uploading videos of all the talks in the coming weeks. 

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

How Goibibo Got Started With AMP For Email – And How You Can Too

Email

Editor’s Note: the following article was originally posted on Medium by Varun Kumar, Full Stack Developer, Goibibo

Email is still the preferred method of communication for marketing campaigns, transaction alerts, handling customer grievances, mass communication, etc. According to The Radicati Group Inc., the number of worldwide email users will increase to over 2.9 billion by the end of 2019. Over one-third of the worldwide population will be using email by the end of 2019. But can it be even more powerful? Can we make email more engaging and interactive as if someone is browsing a website? Can we serve real time dynamic data no matter when an email is opened? Can we collect information from within the email itself without leaving our Inbox?

Yes, yes. With the AMP Project introducing AMP for Email, all these things are now possible.

What is AMP for Email aka dynamic email?

It is a new technology introduced by the AMP Project in 2018 which lets you use a subset of AMP components in your email to make it more engaging. It is part of AMP Project (open source project to provide a user-first format for web content, supporting the long-term success of every web publisher, merchant, and advertiser) and it offers Javascript-like functionality for email. 

Wait, I have heard about AMP

You must have. But AMP for Email is different from AMP for HTML, though both are open sourced and part of AMP project. AMP for Email has a few more rules than AMP for HTML in order to ensure a smooth email experience for users; for example, file upload using <input type=”file” /> is not supported (as of now) in AMP for Email but it’s there in AMP for HTML.

Okay, but how is it going to work?

Email consists of MIME (Multipurpose Internet Mail Extension) parts such as text/plain for plain text email and text/html for an HTML email. To make the email clients recognize the AMP for Email, a new MIME type text/x-amp-html was introduced. This MIME part will contain AMPHTML markup.

Most email sending libraries and services already started support for this new MIME type e.g. Nodemailer (a library to send emails in node.js) put support in v6.1.0.

Hmm, interesting. Show me AMP for Email in action

Yes, of course. Here is one demo in which an imaginary company “Beautiful Flowers Shop” is asking its customers to provide feedback for different flowers offered by company.

Awesome! I want to learn AMP for Email too. Tell me everything.

To develop a dynamic email, you will need the following four things:

1. A valid AMP for Email markup. This would be your email template which would be rendered in Email. You can validate your markup here at https://amp.gmail.dev/playground/. A sample hello-world markup would be something like:

<!doctype html>
<html 4email>
<head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
 Hello, AMP4EMAIL world.
</body>
</html>

2. An email library which supports text/x-amp-html MIME part in email body. You can use Nodemailer in node.js. An example snippet can be found here. If your dynamic email is going to contain API calls then you will have to meet CORS requirements

Official documentation :

Gmail https://developers.google.com/gmail/ampemail/security-requirements

Mail.ru https://postmaster.mail.ru/amp

Outlook https://docs.microsoft.com/en-gb/outlook/amphtml/

res.set({
'Access-Control-Allow-Origin': origin,
'AMP-Access-Control-Allow-Source-Origin': sourceOrigin,
'Access-Control-Allow-Source-Origin':
'AMP-Access-Control-Allow-Source-Origin',
'Access-Control-Expose-Headers':
'Access-Control-Allow-Origin' +
', AMP-Access-Control-Allow-Source-Origin' +
', Access-Control-Allow-Source-Origin'
});

3. Testing dynamic email in Gmail. Gmail won’t allow dynamic emails to be rendered (it would be rendering html instead) unless your email address is officially whitelisted by the Google team (step 4). But to test your email on some particular Gmail account, you can use the dynamic email developer setting to whitelist from address. https://developers.google.com/gmail/ampemail/testing-dynamic-email

4. Whitelisting your email (sender address) by Gmail so that your dynamic email is rendered to end users. Once you are ready with your production email, you will have to send it to ampforemail.whitelisting@gmail.com for whitelisting along with filling the registration form. A complete guide can be found here.

Note that Gmail doesn’t whitelist per domain, the whitelist works per email sender (e.g. if sender@example.com is whitelisted, it doesn’t apply to all @example.com addresses).

The last two steps are Gmail specific. If you are using Microsoft Outlook, equivalent steps will have to be performed there as well. You can refer to Outlook’s official documentation. Information about AMP for Email on mail.ru can be found here.

I am overwhelmed by so much information

That’s okay! Take your time. When we at Goibibo started this Proof Of Concept, it took us only 2 days to develop a dynamic email and test it in our personal Gmail accounts, but it took us 2+ weeks to make our email use case production-ready and get it whitelisted by Google so that we could send it to our end users. We wanted to send our hotel partners a dynamic email to collect feedback about Extranet (hotelier’s platform for managing rates & inventory) and this is what we came up with:

We specifically used AMP for Email to allow hoteliers to “Reply to Reviews” from their checked-out guests. For example, after a customer stays at the hotel, checks out, and leaves a review, the hotelier has the ability to respond to the review within their email.

Earlier we tried this using a hyperlink to Hotelier’s platform called Extranet, and this used to have a B2B email open rate of 14% to collect replies to reviews from the Hoteliers (B2B). During Proof Of Concept, which we ran on 2 different occasions, we got an amazing response with path-breaking email open rates.  

Conclusion

AMP for Email is really promising and we at Goibibo are going to use it moving forward in our email campaigns. There are some initial challenges like setting up infrastructure for handling AMP API requests and training our email-design and marketing teams, but the end results are going to be really awesome.

AMP is joining the OpenJS Foundation incubation program

Governance

On behalf the AMP Project, I am happy to announce that AMP is joining the OpenJS Foundation incubation program.

AMP was founded as an open source project four years ago to provide a framework that allows web developers to more easily create fast, user-friendly experiences.  We have sought to make AMP a welcoming community for contributors, and have now had nearly 1000 people contribute code to AMP.

Last year we worked with the community to develop an improved governance model to ensure AMP’s technical and product direction were made from a diverse set of voices from the community, representing many AMP stakeholders and constituencies.

At the time we made these governance changes, we announced our intention to move AMP to a foundation after the community had adapted to the new governance model and when we found the right foundation for AMP.  That time has now arrived. After considering many options for a foundation that meets all of AMP’s needs, the OpenJS Foundation stood out as an ideal home for AMP.

There are many reasons that the OpenJS Foundation is the right choice for AMP, including:

  • AMP’s mission of providing “a user-first format for web content” aligns well with the Open JS Foundation’s goals to “promote the widespread adoption and continued development of key JavaScript and web solutions and related technologies.”
  • The OpenJS Foundation offers projects the independence to maintain their own identities, technical focus and product direction while offering key support services that projects look to a foundation for, such as a funding mechanism, legal support, etc.
  • We are already aligned on governance philosophies as AMP’s new governance model was significantly influenced by the governance models of the two organizations that formed the Open JS Foundation, the JS Foundation and Node.js Foundation.

For more details on the foundation search and our reasons for choosing the OpenJS Foundation, see the presentation from AMP Advisory Committee member Tobie Langel and OpenJS Foundation Executive Director Robin Ginn at the AMP Contributor Summit today.

With approval from AMP’s Technical Steering Committee and Advisory Committee, AMP recently kicked off the OpenJS Foundation’s Project Proposal Process.  After reviewing the proposal the foundation’s Cross Project Council (CPC) has accepted AMP into the foundation’s incubation program.  Over the coming months AMP will work with the OpenJS Foundation to complete the on-boarding checklist and join the foundation.

Google will continue to be a strong supporter of AMP.  Google is already a platinum member of the OpenJS Foundation, and will continue to provide additional financial and other forms of support to the foundation to ensure a thriving AMP community and ecosystem.  The team of Google employees contributing full time to the AMP open source project will also continue to do so.

We are looking forward to working with the broader OpenJS Foundation community during the incubation phase and beyond to keep the web open and sustainable. 

Malte Ubl, on behalf of AMP’s Technical Steering Committee

People Behind The Code: Simon Rønbøl’s AMP journey

Developer Experience

When AMP launched in 2015, Simon was starting his career with Online-Results A/S. He’d been researching AMP in his spare time to hone his skills and stay up-to-date with industry trends. Eventually, he learned enough to build a static site generator for AMP pages from his home. 

Having developed a passion for AMP, he brought his site generator into work to show its capabilities to the SEO team. This started a journey that transformed Online-Results A/S’ business offerings, and propelled Simon from intern to company partner in half a decade. 

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

Online-Results A/S is a remote digital arm – we analyze patterns in digital behavior and use those insights to build conversion-focused websites and marketing strategies for small & medium sized businesses. 

If you’re a company of 10-20 people that focuses on car repairs, you might not have the time or capacity to have a website developer on staff. We can build them easy websites that are intuitive, high-performing, and highly-convertible.

Loading time has always been a huge part of our offerings; we use the Page Speed Insights tool as a big motivator to sell our websites. When we saw that AMP loads instantly on Google Search we made the switch – we wanted to make our fast sites even faster. I give a lot of credit to my management team; after a couple of tests they were willing to throw a lot of time and resources behind making the switch. It’s really paid off.

Did integrating AMP present any challenges? 

No, it was really plug-and-play. Turning our static html sites into AMP sites was fast – optimizing them was the journey. 

We’d been using a bloated CMS up until that point; a massive infrastructure with constant performance bottlenecks. For the small sites we were building it was like shooting at birds with cannons! So I built a static site generator, then leveraged the AMP community to troubleshoot it. 

You mentioned optimizing AMP – do you have any examples? 

We never stop optimizing! Just last week I implemented CSS tree-shaking into the static site generator. Now we have an automatic way of going through every page, checking to see if the CSS is actually used on each individual site, and then stripping unused CSS away. 

How did AMP impact your business? 

The static site generator is at the core of how we use AMP. Every time a designer or developer comes up with a new idea, we go back to our HTML roots and get it built quickly. 

Back when we used the CMS, it’d take us hours to build something like a functional slider. Now we can just style it like we would any other HTML element. 

You don’t need to know JavaScript to be able to build – and that’s helped our designers bring their ideas to life in a quick, easy, and effective way. 

How has AMP helped you innovate? 

It’s made it very easy for us to create websites – one employee can go from a blank page to a completed site in three to four days now. That’s an optimized site with analytics, call tracking, the works.

Websites used to account for around 3% of our business, now it’s up to 20-25% of our total revenue. We made AMP really easy for our clients to understand. They see the little lightning bolt in Search results and instantly get that AMP’s speed adds credibility and trust to the sites we build.

What advice would you give to anyone considering AMP? 

If you’re a developer that wants to use AMP, I can’t recommend the Roadshows highly enough. You should hang out in the Slack chat too, that’s where you get a lot of inspiration. If it all comes crashing down on your first build, then there’s always someone there to help out! 

You should also embrace getting back to your roots. It’s easy to fall into the habit of throwing new plugins at each new issue, but we see the 50 kilobytes of CSS limit as an opportunity to express your creativity in new ways.  

In my opinion, you can’t build a bad AMP page. It won’t be valid AMP if it’s not high-functioning – so get in there and play with it. 

Has AMP helped you achieve any personal or professional goals? 

Well, I’m a partner now! It’s helped me massively, and throughout the journey I’ve been so supported. I’m just one guy, I can’t keep building and updating sliders for my entire life. But with AMP, I feel like I’ve got a global team of open source developers working together to create the best components possible.  

It’s been such a timesaver, which has helped me to focus on personal development. 

What excites you most about the future of AMP? 

I can’t wait to see it expand into AMP for Email and AMP Stories. I really want to see how AMP shakes up email. It has the potential to change everything. 

If you ask any developer, they hate working on emails. Coding an email is way too difficult! You have to use some 1998 standard, it’s just so annoying. So having an AMP email library will be incredibly exciting.  

Are you interested in mirroring Simon’s journey? 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? Tweet us your story