AMP

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 

Powerful impact: Why we AMPized the Australian pop culture site – GOAT

WordPress

Editor’s Note: The following post was written by Leo Postovoit, Strategist at XWP.

NOVA Entertainment is one of Australia’s most recognized media brands with a history of radio, media, and local content stretching back 19 years; and GOAT is NOVA’s pop culture, news and entertainment platform built for a mobile-first audience. 

GOAT is the first of NOVA’s sites to benefit from development of a progressive-focused WordPress build. As GOAT’s editorial goals include bringing their content to people in a format they find accessible, convenient, and speedy—performance and usability are top priorities. This study reviews how AMP and PWA brought impact to Goat’s recent technical relaunch.

Challenge

The GOAT website experienced issues with performance and usability. To improve user experience and  compatibility with many devices, priority one was to improve the performance of the site. The site’s delays in rendering content and assets were barriers to users and their onsite and sharing behavior. This is not surprising, given that research studies consistently demonstrate how critical performance is for the level of engagement a site receives.

At a tech conference in Tokyo this year, Googler Jeany Halliman opened her speech about a study that Google conducted on site visitors of Media sites about “the one thing they disliked the most when browsing a site”.

“Coming from the ad business, I always thought it would be ads (visitors disliked). But the majority of users said it was a slow website.” – Jeany Halliman

This response correlates clearly with the well observed impact on bounce rates that page speed has, yet its precedence over on-page ads is a surprise to many due to recent attention and “backlash” many Media sites have received about overbearing Ad strategies.

Opportunity

NOVA reached out to XWP, an ecosystem leader in WordPress engineering, and maintainer of the official AMP Plugin for WordPress in partnership with Google. Well known for producing elegant and complex solutions for major publishers such as Rolling Stone, News Corp Australia, and Rogers, and technology partners — such as Cloudinary, Google, BigCommerce, and Automattic, XWP work focuses on building a better web.

Since performance, scalability, and usability were key goals outlined by stakeholders at NOVA, it was clear to XWP that a progressive AMP approach was the way to go.

While the primary objective of the migration to an AMP-first strategy was clear: to create a fast experience that users love to return to and share, it was important to also ensure scale and stability through best development practices including CI/CD, automated testing and high-availability hosting. Combined with high code quality and modern WordPress practices in mind, the GOAT site was made not only to be quick, but also built to last.

Solution

With XWP’s experience with AMP and other ways to impact performance, they considered various implementations to achieve NOVA’s goals for the GOAT website. An AMP-first strategy was the best fit because it allows for streamlined development around a single code base.

Going one step further, GOAT seemed to be a great use case for the PWA feature plugin (another collaboration between XWP and Google). This added the ability to provide capabilities such as offline mode, notifications and the like, powered by service workers. And the solution defined leverages the amp-install-serviceworker component, which makes it easier than ever before to combine the benefits of AMP and PWA.

While the PWA features included today are limited in scope, the long-term goals are to add installability on desktop and mobile devices, richer offline mode and pre-fetched pages, native push notifications and the like—just like other powerful PWAs across the web.

Incorporating Ads 

When ad loading is not configured properly it contributes towards poor page performance, especially on media-rich sites like GOAT. Working with AMP means the approach XWP took to implementing GOAT’s ad stack had to adhere to AMP standards.  Whilst some concessions had to be made to accommodate ad providers which were not fully AMP compatible the overall effect was a highly performant ad-reliant media site. The best of both worlds: a good user experience that isn’t degraded through sub-optimally loaded ads.

The Results 

As discussed, Goat is the first of Nova’s sites to go live with a unified editorial workflow and performance-focused theme build—as a PWA site, with all templates built as Native AMP. The performance results are noticeable:  

  • The unification of the editorial experience across multiple properties
  • Google Pagespeed Insights score went up from 7 (yes 7) to 77 on mobile
  • WebPageTest 3G test: before / after . Key things: start render time decreased by 1.5s. The time to interactive went down from 43s to just 10
  • Lighthouse test: before / after . First contentful paint went down from 5.8s down to 2.5s (a 3.3s reduction). The performance score went up from 7 to 65. First CPU idle time went down from 16.2s to 5.9s
  • GTmetrix: before / after . The PageSpeed Score went up from a D (63%) up to B (82%)

Start Utilizing AMP

Based on results as the ones obtained by Goat’s site AMP-first strategy, we recommend learning more about how AMP can be the solution to your current business challenges.

  • To find out more about AMP, visit the project homepage at amp.dev.  
  • To evaluate your site’s compatibility and see if you can also gain the performance and user experience benefits of AMP, check out AMPized.com, XWP’s service to bring the benefits of AMP to your WordPress sites.

Written by Leo Postovoit, Strategist at XWP

AMP Advisory Committee midterm election results

Governance

In early August, we announced a midterm election for the AMP Advisory Committee (AC) with the goal of increasing the diversity of the AC’s membership.

Right after we announced the election, Dane Knecht of Cloudflare resigned from his position on the AC, thus freeing an extra seat, but also reducing the presence of CDNs in the committee to zero (Charles Vazac having left Akamai earlier this year). With Web Packaging being such a hot topic, not having a CDN representative onboard was—understandably—a real issue for many on the committee.

We initially wanted to add about four new members to the committee, which we increased to five following Dane’s departure. We gave ourselves a bit of leeway however, in case we couldn’t find the right people or on the contrary where overwhelmed with great candidates. Fortunately, the latter is what happened. And despite opening up two extra seats (including Dane’s), we had to reject some amazing candidates. Hopefully, they’ll apply again when we run our regular elections at the end of the year. We’ll make sure to remind them.

So, without further ado, we’d like to introduce you to the six new members of the AMP Advisory committee, in alphabetical order:

  • Ali Ghassemi is passionate about the Web and started his career in 2005 finding workarounds for IE6 quirks. Ali currently works at LinkedIn Inc. on LinkedIn.com’s Web infrastructure. He was previously a tech lead in AMP working on UI components.
  • Jervay Singh is a performance marketing solutions expert for a large financial services company in South Africa. He wishes to bring an emerging economies perspective to the committee, along with his passion for driving AMP takeup within the South African and African market.
  • Maggie Wettergreen is a web developer and designer focused on building quality user experiences. They have developed AMP pages in multiple environments, notably WompMobile’s third-party AMP system. Maggie wants to ensure that AMP is moving consistently toward being a staple development framework.
  • Melanie Sumner is a software engineer who is passionate about improving “accessibility by default” on the web. Melanie is concerned about AMP’s accessibility and intends to contribute her expertise as an engineer and advocate for an accessible, open web.
  • Melissa DePuydt is a frontend engineer currently working as an engineering manager. She previously led solution architecture for clients at Arc Publishing at The Washington Post, where she became interested in build processes and practices that make AMP integration more sustainable and push news websites toward better performance.
  • Ted Shuter is a product leader at Akamai, focused on making the web a faster, better place to play and work. Ted loves the concept of improving performance, but wants to make sure it is fair and balanced for all users. In particular, Ted brings the perspective of business users and the impact to Content Delivery Networks.

Hopefully, you’ll get to meet some of them at the AMP Contributor Summit in New York, which is just around the corner.

We’re very excited to welcome these new members to the AC and look forward to working together.

Posted by Tobie Langel, AMP Advisory Committee facilitator.