Dynamic geo-personalization

AMP documents are often served from a third-party cache; this means it’s not always clear how to support dynamic or personalized content. There are a range of components and techniques to achieve many of these use cases (amp-list, amp-state, amp-form, and amp-iframe just to name a few), but there are some common cases the AMP team can make a lot easier.

In particular, businesses often want to vary content by the geographic location of the user. The best way to do this for pages in different languages is to use the hreflang attribute, but this isn’t the best solution for pages with just a small geo-dependent variation, like a promotion for a particular locale. This is why we’ve created the amp-geo component, which is ready for testing, and targeting a full release next week.

amp-geo

amp-geo makes it easy to vary small sections of web content for users based on an approximation of the users’ country-level location, similar to the level of an ISO Country Code. As a developer, there are just a few steps:

1. Include the amp-geo script

In the document <head>:

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

2. Include the amp-geo tag

In the document <body>:

<amp-geo layout=”nodisplay”></amp-geo>

3. Mark up your document with CSS to alter content based on the user’s approximate location

In the <style amp-custom> tag:

/* defaults */
.flag { background-image: "./starsandstripes.png"; }
/* override */
.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }


In the document <body>:

<div height=”300” width=”500” layout=”responsive” class=”flag”>
</div>

Groups in amp-geo

Here’s a slightly more advanced case, where you can take advantage of the grouping feature in amp-geo to vary an aspect of English dialect by geo.

1. As above, include the amp-geo script in theof your document

2. Instead of just including an empty amp-geo tag, configure ISOCountryGroups to reduce the amount of code you have to write to specify behaviors across multiple locales.

In the document <body>:

<amp-geo layout=”nodisplay”>
  <script type="application/json">
  {
    “ISOCountryGroups”: {
      "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
      "football": [ "unknown" ]
    }
  }
  </script>
</amp-geo>

3. As in the previous example, mark up the document with CSS to alter content based on the user’s approximate location

In the <style amp-custom> tag:

/* defaults */
.football:after { content: 'football';}
/* override */
.amp-geo-group-soccer .football:after { content: 'soccer' }


In the document <body>:

<div>
The game is called <span class='football'></span>!
</div>

If the user is in any of the locales configured for “soccer”, then the text will read “The game is called soccer!” Otherwise, the text will read “The game is called football!”

You can find another, more complex example at AMP by Example, and learn about more extended capabilities of the feature in the official documentation; for instance, you can integrate amp-geo with your analytics through variable substitution, or use it in more complex interactions through amp-bind.

Try it out

amp-geo is targeting a full production release next week, but as of today you can test it on your site and tell us what you think. You can file bugs and requests in Github, and feel free to reach out and chat on Slack. We look forward to hearing from you!

Posted by Eric Lindley, AMP Product Manager

Dynamic geo-personalization

AMP and Advertising Conversions

The following was posted by Oliver Armstrong, VP of Product, Instapage. Learn more about Instapage’s AMP integration on their blog.

You don’t have to be an advertiser to know that mobile ad experiences are lacking. According to research from Google and SOASTA, the average load time for mobile landing pages is 22 seconds. For more than half of people who click through mobile ads, that’s at least 19 seconds too long:

accelerated-mobile-pages-bounce-rate

And as load time grows, so does the number of people who abandon a page:

accelerated-mobile-pages-bounce-rate-increaseA business can no longer bank on relevant and engaging ads. More than a click-through, your goal is conversion — and for that, you need a fast post-click experience.

Back in February, Instapage’s Senior Director of Engineering Piotr Dolistowski and I spoke at AMP Conf on How to Balance AMP Limitations with Optimization Features. During the presentation we announced our plans to build AMP functionality within the Instapage platform. Fast forward to today, and we are pleased to report that advertisers can now build fast post-click experiences faster than ever by combining the AMP framework with Instapage.

The post-click experience

Before internet advertising, ads delivered revenue. Prospects watched TV commercials, read print ads, and determined whether or not they wanted what you were selling. If your ad sold the product well, they’d call to purchase or mail a check for your product. Today on the internet, that’s not the case.

The ad doesn’t do the selling anymore. The ad is only the gateway to what does the selling: the landing page. Here lies the difference between the pre-click and post-click experience:

  • The pre-click experience: Everything that affects whether or not somebody clicks through your ad. These are things like platform, location, copy, media, targeting, etc.

  • The post-click experience: Everything that affects whether those who click through convert. These are things like visual hierarchy, message match, load time, trust indicators, etc.

Recent numbers have shown that search advertising service AdWords click-through rates leave much room for improvement, at an average of 3.17%. And while pre-click experiences can be further optimized, post-click experiences have lagged behind significantly.

The average AdWords conversion rate across industries is 3.75%. That means around 97% of people aren’t clicking your ad, and of the 3% who are, more than 96% aren’t converting.

To address this gap between the ad and landing page on mobile, Google and others spearheaded the development of the open-source Accelerated Mobile Pages project (AMP). Three years later, it’s become clear that one of the easiest and most effective ways to boost mobile landing page conversion rate is by improving load time.

AMPifying your pages: What search advertisers stand to gain

From preliminary research done by Google and SOASTA, we can safely assume that with faster landing page load times come more conversions. If 53% of your visitors don’t get to see your landing page because it loads in over 3 seconds, then you’ve lost more than half your opportunities to earn a conversion. Even with a stellar landing page, you can’t convert visitors you don’t have.

However, a safe assumption is still an assumption. Luckily, now that 31 million domains have used AMP to speed their pages, we have some data to back up the hypothesis.

In a Forrester Consulting study commissioned by Google, AMP publishers are seeing a 20% increase in sales conversion rate, 10% year-over-year increase in AMP site traffic, and 60% increase in pages per visit. Certainly, numbers any advertiser would love to achieve.

The trouble is, while building a landing page with AMP is quick and easy, building one for every campaign isn’t. And reusing a landing page for a different campaign can deter visitors just like a slow-loading one can. The reason is because it won’t have message match.

What is message match?

The landing page is where conversions happen. And just as speeding your load time can quickly boost conversion rate, so can ensuring that the message of your landing page matches the message of your ad with:

  • Similar colors  
  • Identical logos
  • The same media
  • Matching headlines

Conversions start with a foundation of trust, and message match establishes it by letting visitors know they’re in the right place. However, when you’re constantly running and testing new campaigns, it’s tough to customize every landing page to match every ad.

The middle ground

When advertisers need something quick-loading, quick to build, and fully customizable, now they can turn to Instapage’s new AMP functionality.

Using the most robust post-click optimization platform, you can pick a template and click to edit elements, drag to place them, and publish your accelerated mobile landing page faster than ever.

Where there was once a trade-off between quality and quantity, there is no longer. Today, you can quickly create landing pages with all the ingredients of a persuasive landing page:

  • No navigation
  • An attention-grabbing, message matched headline
  • Engaging media
  • Skimmable, benefit-oriented copy
  • Trust indicators like social proof and security badges
  • A compelling call-to-action

Today, when the ad alone can’t convert, every campaign needs its own landing page. By combining AMP and Instapage, you maximize opportunities for conversion by keeping visitors from bouncing, and compelling them to click your CTA. Go here to get started building AMP-compliant pages in Instapage.

Oliver Armstrong, VP of Product, Instapage. Learn more about Instapage’s AMP integration on their blog.

AMP and Advertising Conversions

New tools for building user controls in AMP pages

A couple weeks ago, we talked about our plans to give publishers and tech vendors tools to implement their preferred user controls on AMP pages. Today we’re announcing the initial availability of these tools.

We are introducing the new <amp-consent> component, in AMP, as a new tool for publishers to implement user controls. The component enables three main things:

  • Determining if the user should be asked to interact with the control.
  • Capturing the user’s decision — either a positive response or a negative response — and remembering it for future use during the current page lifecycle and future page loads.
  • Making the user’s setting available to elements on the AMP page in order to modify the page’s behavior.

Determining if the user should interact with the control

User controls may be applicable for certain users or circumstances but not others. Publishers can specify a remote URL to ping in order to determine if the user will be prompted to make a choice, thereby setting the control. If so, a UI container will be presented that is completely configurable within the page and can be used to capture the user’s choice.

Capturing the user’s decision

The currently supported semantics for a user control are either an “accept” or “reject” action. The publisher can designate a button corresponding to each of these choices. In addition, the publisher can implement a “dismiss” action, which will result in neither state being set and the user control remaining unresolved.

Modifying element behavior

Once the user has made a choice, the publisher can specify how the page should behave to respect that choice. By adding a simple HTML attribute, publishers can configure AMP elements  to be blocked from loading if the user setting is undetermined or is in a negative state (that is, the user rejected). This makes it possible to, for example, only load ads and/or analytics when user consent is given. Additionally, elements can be further customized by vendors to have more sophisticated behaviors that depend on the user’s setting.
Check out the documentation to learn more about how to implement and configure amp-consent. You can find some sample implementations on AMP by Example as well.

We plan to add more features to <amp-consent> over time. You can find some already planned ideas on GitHub and we invite you to submit new ideas by filing an issue. If you’re a vendor who wants to customize how your AMP extensions behave based on user controls, please get started by following our contribution guidelines and reading documentation on the topic here.

Posted by Rudy Galfi, Product Manager for AMP

New tools for building user controls in AMP pages

AMP Roadshow++: More cities, more content

We started the AMP Roadshow in the first half of 2017 to educate and meet developers around the world in a free one-day hands-on conference and workshop. To date, we’ve met over 2,000 of you in 13 cities, but we’re far from done: We’re planning to go to over 20 additional cities in 2018 and beyond.

We’ll add more destinations through the year, but you can already sign up for the following events:

We’ve added AMP Stories, AMP for Email and more to the agenda to give you an up-to-date kickstart into AMP website development. And speaking for the entire AMP team, we can’t wait to meet you all in person.

AMP team members excited about the AMP Roadshow Singapore

See you soon!

Posted by Paul Bakaus

AMP Roadshow++: More cities, more content

Enabling publishers to implement user controls on AMP pages

Read new details about this post here

Users today want additional control over their online experience. Additionally, publishers are faced with a variety of different demands on how they provide notice and choice to their users –  from vendor policies to evolving legal requirements, like the forthcoming General Data Protection Regulation (GDPR). The open source AMP Project is working to give publishers and tech vendors tools to implement their preferred user controls and to support their varied individual compliance requirements on their AMP pages.

A new component is currently under development (Update: development finished. See docs here) and will be available for integration into AMP pages soon. This will enable publishers to implement more easily the notice, choice and consent flows that they deem necessary for their websites. The features to be launched include the ability to show choices in user interface notices via “accept” and “reject” semantics, and configuration of AMP element behaviors in response to users’ choices. We encourage you to check out the corresponding GitHub issue for more details, to offer comments, and to subscribe and stay up to date.

Approaches to implementing user controls and achieving compliance with laws, such as GDPR, will vary by publisher. Therefore, we encourage everyone to engage and communicate requirements using the AMP Project GitHub. We welcome specific feature requests and ideas in the project at any time by filing new issues.

In addition, AMP supports over 100 vendor-provided capabilities ranging from analytics to ad tech to video players and other kinds of content embeds. As a publisher, if you want to ensure your vendors integrate with AMP’s user control features, please encourage the vendor to engage with the AMP Project.

In a couple of weeks, we will publish documentation and examples to help publishers with implementation of the new component. Please watch this space for further updates as we continue to share more details. Update: See this post for updates.

Posted by Rudy Galfi, Product Manager for AMP

Enabling publishers to implement user controls on AMP pages

Jung von Matt’s road to the world’s fastest* automotive content marketing website

Posted by Thomas Feldhaus, Managing Director, Jung von Matt/NEXT ALSTER

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.

“What a nice challenge!” That’s what we thought when we won the job to relaunch the digital home of BMW, BMW.com, and to excite users by transforming the website from only a web showroom to a data driven, entertaining and helpful  state of the art automotive content marketing platform.

Our creatives, strategists and consultants discussed every little detail of the task: digital strategies, content strategies, media strategies, social media strategies, KPIs and so on: everything needed to reach the long-term goal of getting car enthusiasts and those generally interested in mobility excited about the beauty of the BMW brand.

As an agency well-known for creative excellence, our friends in the creative department wanted users to plunge into a digital adventure that would totally ‘wow’ them – with everything an ultramodern user experience has to provide: inspiring articles with high-res images, smooth full-screen videos and a state-of-the-art user interaction design. By setting up this seamless experience, we knew we could meet our goals of reaching users when they were interested in our content.

Let the code experts take the lead and performance will follow

There is a known cliche cliché that developers are just seen as the “code monkeys” who put a stop to any creative concept. Not in our case, because we all agreed that the critical  success factor would be: PERFORMANCE!!!

Our simple formula was “No performance, no fun. Mo’ performance, mo’ fun!” Because what’s the value of super-fancy content if it takes you ages to load on your mobile device.

By using a technical strategy that allowed performance and visual and engaging content to coexist via the combination of AMP and PWA (Progressive Web Apps), we hardly had to make any compromises. Not to mention the fact that we liked that AMP pages are linked and load quickly from all platforms, like Google Search and Twitter.

So in close collaboration with UX, designers and editors we started working on the new BMW.com, with our focus turned 100% to delivering the best-ever mobile user experience.

Close collaborations and requirements for fast, engaging user experiences

Every creative wish brought to our attention was checked for its feasibility with AMP. With the limitation of 50 KB in CSS, we started to research, develop and test whether a desired feature was realisable with the PWA technology. For example, we were able to implement the feature of swiping smoothly from one article to the next whilst remain super-fast – an experience users would normally only expect from a native app.

If the team said, “There’s no chance to implement the feature without a loss of speed”, the whole agency backed our decision, because we were all committed to one divine command: performance.

It also certainly helped that during our development journey, the AMP team was friendly and helpful via Slack, GitHub and in person at conferences.

The world’s fastest* automotive content marketing website

Working with AMP not only demonstrated  to us what a great technology it is, but also what is possible if the development and creative teams agree on a plan from the very first line of code.

The result of all the work: a website that loads unbelievably fast. The all-new BMW.com – possibly the world’s fastest automotive content marketing website. Read more about our results in the recent AMP case study.

Challenge us

Are you up for a challenge? Which major car brand has the fastest automotive website? See how we score on the Visually Complete Index on webpagetest.org. #automotivespeedindex

*Possibly the world’s fastest automotive content marketing website. Please take a look at our challenge for further details.

180327-BMWCOM-AMP_white.jpg

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.

Jung von Matt’s road to the world’s fastest* automotive content marketing website

Standardizing lessons learned from AMP

For over two years, AMP has been a leading format for creating consistently excellent user experiences on the web, and Google continues to invest strongly in it as our well-lit path to achieving a user-first web. We’ve long believed that the goal of a user-first web can be built in many ways, but, until we began working on AMP, knowing exactly what that meant and how it could be verified was a challenge. Based on what we learned from AMP, we now feel ready to take the next step and work to support more instant-loading content not based on AMP technology in areas of Google Search designed for this, like the Top Stories carousel. This content will need to follow a set of future web standards and meet a set of objective performance and user experience criteria to be eligible.

 

The origins and development of AMP

We started working on AMP because we were seeing the mobile web feel clunky and slow, falling behind the tightly-integrated, highly-optimized user experiences that walled garden platforms can offer. Yet we also knew there wasn’t a fundamental technology problem: you could build great experiences on the web with the right knowledge, resources, and management support. Thus we set out to create a framework that would provide a well-lit path to building great web-based experiences: AMP would be well documented, easily deployable, validatable, and opinionated about user-first principles.

AMP has seen fast development as an open source project with weekly releases and constant adjustment to publisher and user feedback. The lessons learned in 2+ years of iteration based on the extensible web are ones we hope will be useful in informing the web standards process. Credit goes to Tim Kadlec and Yoav Weiss for kicking off the Content Performance Policy idea in 2016 and convincing us that we should go down this path. This idea has now morphed into the Feature Policies and become a real thing that will help with AMP-like performance guarantees without relying on AMP going forward.

We feel that the mission underlying AMP is more important than ever before and Google will continue to invest strongly in developing AMP. Current focus areas of investment are: engaging storytelling experiences with AMP Stories, dynamic email, JS in AMP, pushing the boundaries of e-commerce on the web, and developing additional deep integrations between platforms and content into Google Search.

 

Standardizing lessons learned

The standardization work motivated by AMP is well under way through various WICG projects. Google’s goal is to extend support in features like the Top Stories carousel to AMP-like content that (1) meets a set of performance and user experience criteria and (2) implements a set of new web standards. Some of the proposed standards in the critical path are Feature Policy, Web Packaging, iframe promotion, Performance Timeline, and Paint Timing. Equally important, the Chrome team last year released the Chrome User Experience report. Its underlying data provides, for the first time, web-wide real world measurements for performance and user experience.

In January we announced that we plan to use Web Packaging as recommended by the W3C TAG finding for providing privacy preserving pre-loading together with being able to serve AMP content under the publisher URLs. We’re super excited about Web Packaging because it isn’t AMP-specific technology, so we’ll be able to use it for instant-loading of all packaged web content!

Features like the Top Stories Carousel in Google Search rely on AMP’s embeddability features. For example, it uses privacy-preserving pre-rendering; AMP-based throttling of CPU, RAM and bandwidth usage; and built-in container-embed-communication. We now feel confident that with iframe performance isolation through site isolation or cooperative multitasking, web packaging, Feature Policies, iframe promotion, and a document opt-in, it’ll be possible to make such features available to non-AMP web content that implements those standards.

That’s a lot to keep track of, so we plan to keep this page updated regularly to track progress. While we fully intend to make these changes in Google Search, as with any Google Search feature they will undergo experimentation and user testing and only launch if results are positive for users. It is hard to estimate when these changes will roll out as it depends on future progress of standardization and browser implementations. Achieving consensus between the community and implementers is an important part of the standardization process, which may require changes to this plan.

In summary: We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. We hope this work will also unlock AMP-like embeddability that powers Google Search features like the Top Stories carousel. Meanwhile, AMP will be Google’s well-lit path to creating great user experiences on the web. It will be just one of many choices, but it will be the one we recommend. We will continue to invest heavily in AMP. A key example of how we continue to innovate on user experience on the web are AMP Stories and we hope to provide insights to future web standards along that way.

I and the rest of the AMP team are incredibly excited about the future of the open web and can’t wait to see what all of y’all will be building! #teamweb

Posted by Malte Ubl, Tech Lead for the AMP Project at Google.

Standardizing lessons learned from AMP