Analytics and Measurement for AMP

In the world of publishing, understanding your audience is at the heart of writing the right stories, creating loyal readers, and improving the bottom line. Key to unlocking that information is access to tools that enable measuring your audience and understanding their behavior. We believe it’s important that AMP support those tools. However, we also think the state we’ve reached in this area on the web today is broken, and that AMP can provide a path to an improved approach.

An approach that improves performance

One pattern we often see in mobile web pages is that multiple analytics vendors’ tags are installed on the same page. While each analytics package provides a unique and insightful view of a publisher’s audience, this client-side duplication of effort has led to degraded performance, as each tracker independently performs many of the same measurements. These many little costs can add up to poor experiences that cause readers (and potential readers) to abandon pages.

We approached building AMP analytics with a “measure once, report to many” philosophy. What this means is that you can use amp-analytics to configure multiple endpoints and data sets.  AMP then manages all of the instrumentation to come up with the data specified and shares it with all of your analytics providers. No matter how many analytics providers are configured, the AMP runtime will only ever do a single measurement to come up with a value. This improves performance by reducing duplication of effort, batching network requests, and streamlining code paths.

In this post we’d like to introduce to you the two components we’ve built to support analytics and measurement in AMP: amp-pixel and amp-analytics.

amp-pixel

A core built-in component, amp-pixel provides page view tracking that’s meant to emulate a tracking pixel. Here’s an example of amp-pixel markup:

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

When amp-pixel is rendered, it sends a GET request to the specified URL such as https://foo.com/pixel?RANDOM. Note that this request can contain data values that the page author is interested in capturing. In the example above, “RANDOM” indicates that a substituted value should be used, so the request that’s actually sent might be something like https://foo.com/pixel?0.8390278471201.

Both amp-pixel and the next component I’ll discuss, amp-analytics, support several variable substitutions like “RANDOM”. These can be used to convey data like the document referrer, page title, screen size values, or a client identifier managed by AMP. You can learn more about the available substitutions by consulting the documentation.

amp-analytics

amp-analytics is a more complex but powerful solution that supports many types of event triggers to help publishers better understand their audiences. We received incredibly valuable feedback from our discussions with publishers and measurement companies while building analytics solutions for AMP. These conversations helped us learn about the many and varied data needs that publishers have and how they leverage the data to meet business and product goals.

Here’s an example of amp-analytics markup:

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  }
}
</script>
</amp-analytics>

Using amp-analytics, page authors can specify hit requests that will fire on events like the page becoming visible or on a click. Click events can be customized to apply to certain element IDs or classes by specifying a selector. In the example above, there are two triggers defined. One is intended to track pageviews and will fire the defined “pageview” request when the document becomes visible. The other trigger tracks anchor clicks by specifying that the “event” request should be fired, but only on “a” (or anchor) elements.

amp-analytics can be further customized to specify transport handling for requests and can be remotely configured by specifying a URL where some configuration JSON lives. As with amp-pixel, amp-analytics supports a number of variable substitutions so that AMP can provide data values that it’s aware of. You can learn more about these in the documentation.

Getting data to where it needs to go

Finally, once you’ve determined what data you want to collect and AMP has a way collect it, you need a place to send it.

We prioritized supporting integration with publishers’ in-house analytics systems as well as offering an integration path with third-party vendors. When using either amp-pixel or amp-analytics, the page author specifies where data should be sent, which could be to the publisher’s own server or to its vendor of choice.

We also wanted to enable a streamlined approach to configuring an amp-analytics tag that would transmit data to a vendor. The solution we came up with allows a publisher to specify the vendor they wish to use and to not have to worry about including the boilerplate configuration that would be specific to that vendor. To enable this, the vendor must supply configuration as open-source code in the AMP library, which causes this configuration to be applied consistently across all of their customers’ integrations.

Much more to come

When we unveiled the Developer Preview for AMP in October 2015, the only analytics support we had was amp-pixel. With the support and feedback of many in the publishing and analytics industries, we’ve come a long way from there, having built amp-analytics to meet more complex and challenging demands. We know the work’s not done yet and look forward to continuing our engagement with these communities to build the many exciting and useful features on our roadmap.

Please use the resources linked from this article to get your analytics integration in AMP started. For any feedback or new feature requests, please let us know by filing an issue in our GitHub repository.

Finally, if you’re a member of an analytics company that’s interested in providing default configuration values for your customers as described above, please read our contributing guidelines and get in touch through GitHub. We welcome your insight and expertise, and are grateful for your support.

Posted by Rudy Galfi, Product Manager for Accelerated Mobile Pages

Join us for a Hangout on Air covering AMP Analytics on February 5 at 9am PT, hosted by the Google News Lab.

Analytics and Measurement for AMP

AMP: What About Ads?

Join us for a Hangout on Air covering AMP Ads on February 19 at 9am PT, hosted by the Google News Lab.

Last October, we previewed AMP with a simple vision: Make the mobile web great by connecting people to content instantly. This vision only works if publishers can also continue to grow their businesses. In other words, in order for AMP to be successful, the ads have to work, too.

Over the past few months, it’s been incredible to see the advertising community come together to take on this challenge. Our goals throughout the process have been twofold: 1)  Ensure that AMP works well with the publisher business models of today; and 2) leave lots of room for bold innovation in the future.

A smooth transition to a better mobile web experience

In the near term, our top priority is making sure that ad formats, features and measurement that publishers rely on work within the AMP environment. When AMP launches on Google Search in February, it will include important, basic functionalities. These include the ability to traffic ads with ad servers of your choice, support for multiple demand sources and formats (including native ads), full control over ads placements, and viewability measurement. It also includes integration with 20+ ad tech vendors, all of whom are excited to participate in the AMP initiative:

We are excited to be collaborating with Google to enable Moat Analytics within AMP. As an industry, we need to work together to improve the mobile web user experience and open source projects like AMP will be a key part of that process”  — Jonah Goodhart, Co-Founder and CEO of Moat

Kargo is excited to bring our bespoke mobile ad formats to AMP’s sleek publisher platform. We think the combination will be a win-win for publishers, advertisers and consumers.” — Ryan McConville, Chief Operating Officer, Kargo

“Over the past few months, Outbrain has been working with Google on its AMP project to address what’s always been a singular focus for this company: improving the user experience with content and how it’s discovered.  AMP is a major step toward that future, and by delivering AMP-powered recommendations for publishers, we’re proud to aid that step” — Dennis Yuscavitch, Director of Product Marketing, Outbrain

A big bet for the long-run

We also can’t emphasise enough that this is just the start.

From Noah Szubski, Chief Product Officer at The Daily Mail (MailOnline), and one of the early partners working on the AMP Project, “Google has been very receptive to feedback throughout the process. They have prioritized partnerships with publishers and our 3rd party partners since the beginning. The industry should be aligned that we need to create better advertising experiences for users. We see AMP as an important early step but expect innovation and for this to be a long term strategy”.

Everyone involved in this effort recognizes that it will take time and innovation to transform the ads experience on the mobile web. We’re invested for the long term. As we look to the future, four key principles are guiding our development work on ads in AMP:

  • Faster is better – Speed, speed, speed. There is no technical reason why ads in AMP can’t be as fast as AMP documents themselves.
  • ‘Beautiful’ matters At least as far as it concerns ads, right up there with speed, is our goal to ensure that ads in AMP are beautiful and innovative.
  • Be safe, be secure –  The digital ad industry’s rap sheet includes irritating and unsafe ads. We’re requiring all creatives to utilize the HTTPS protocol.
  • We’re better together – Ultimately, AMP isn’t about supporting a single entity, but an entire industry. Therein lies our most fundamental value — success requires broad industry participation.

If we can crack this code, we believe it will help grow the advertising pie for the entire industry. As Sridhar Ramaswamy, Google’s SVP of Ads & Commerce, shared at the IAB conference today, improving the mobile user experience is THE key to unlocking the industry’s next $50 billion. We are thrilled about how far we’ve come on this journey for ads in AMP. We are even more excited about what we can achieve in the future by working together.

Nitin Kashyap, Product Manager, and Craig DiNatali, Director, Global Partnerships

 

 

AMP: What About Ads?

Learn to Write AMP HTML Quickly

Since we announced the AMP developer preview in October, more than 5,200 developers have engaged with the project and more than 16,000 new AMP pages have been created each day.

To make it easier to join the community of AMP authors, we’ve recently expanded ampproject.org with extended and freshly written documentation, with the goal of helping you learn to write AMP pages quickly.

Most importantly, we want to thank you for your early feedback. Your requests in the AMP HTML source code repository and questions in Stack Overflow helped us figure out which docs were needed the most, and we will continue to use these resources to write more docs.

Read on to learn more about how we built the site, what’s new in the docs, what we learned creating our own AMP pages, and how you can continue to help keep the momentum going.

How we built the site

While we were writing about AMP, we realized one of the best ways to test our knowledge and assumptions of how AMP works was to implement the AMP site in AMP. The beauty of the underlying code is that it generates AMP HTML content for this updated website using web development best practices.

As the technical writer on the project, my main focus was to create content. Google Developer Advocate Paul Bakaus created docs site code that uses templating and preprocessing to make it as easy as possible for me to focus on writing the docs.

Want to dive a little deeper to see what I mean? Check out the markdown for our about AMP page. Now right-click and view source on this page in ampproject.org to see a living, breathing example of an AMP page.

What we learned

Having built the site in AMP, we learned what it really feels like to be AMP page creators. As early AMP page creators, we were part of helping the project evolve. It’s easy to get started creating AMP pages, but you still might discover things you need are still in development, for example, amp-analytics.

You may also stumble over things that we, who work on the AMP project, haven’t considered before. For example, how does one create a responsive hamburger menu in an AMP page without JavaScript? We’re working on it in this feature request!

What’s new in the docs

With our doc expansion, we wanted to build a guide so that anyone who has produced web content before can get up and running with AMP in under an hour. If you understand basic mark-up, it’s easy to learn how to create your first AMP HTML page.

Ease-of-use is one of my favorite things about AMP HTML. It’s straight-forward to style your pages, control layout, validate your AMP content, and make your pages discoverable.

The ampproject.org site also pulls in the reference docs straight from the AMP specification so that the reference is always up-to-date. And there’s more docs to come in the new year.

In addition to new how-to guides on analytics and monetization, we’re also adding docs that show how to create and test AMP components, which can then be reused by other developers in their AMP pages.

Help us!

We are all in this together. The AMP project including the AMP docs is a community effort. We welcome your feedback in the docs issue tracker. Even more importantly, we’d love your contributions. The amproject.org docs are open-source. Send us pull requests. You can also fork the docs and use them to get started on your own AMP site.

Posted by Meggin Kearney, lead technical writer for AMP

Learn to Write AMP HTML Quickly