Google Accelerated Mobile Pages adds support for Snowplow

19 March 2016  •  Alex Dean

We are pleased to announce that Google’s Accelerated Mobile Pages Project (AMPP or AMP) now supports Snowplow. AMP is an open source initiative led by Google to improve the mobile web experience by optimizing web pages for mobile devices.

As of this week, Snowplow is natively integrated in the project, so pages optimized with AMP HTML can be tracked in Snowplow by adding the appropriate amp-analytics tag to your pages.

amp-logo

Read on after the fold for:

  1. Overview
  2. Event tracking with AMP
  3. Getting help

1. Overview

The Accelerated Mobile Pages (AMP) Project is an open source initiative to help publishers create mobile-optimized content that loads near-instantly. AMP HTML is AMP’s code framework for building mobile-optimized web pages. AMP HTML has an analytics component which integrates various analytics vendors, including now Snowplow.

To learn more about analytics for AMP pages see the amp-analytics reference. For general information about AMP see What Is AMP? on the Accelerated Mobile Pages (AMP) Project site.

2. Event tracking with AMP

AMP is necessarily a simplified, largely static environment for content, so our Snowplow support consists of just two possible “trigger requests” so far:

  • pageView for page view tracking
  • unstructEvent for structured event tracking

Let’s look at each of these in turn.

2.1 Page views

You can track a Snowplow page view in AMP like so:

<amp-analytics type="snowplow" id="snowplow2">
<script type="application/json">
{
  "vars": {
    "collectorHost": "snowplow-collector.acme.com",  // Replace with your collector host
    "appId": "campaign-microsite"                    // Replace with your app ID
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name
      "on": "visible",
      "request": "pageView"
    }
  }
}
</script>
</amp-analytics>

2.2 Structured events

Google Analytics-style structured events can be sent by setting the AMP trigger request value to event and setting the required event category and action fields.

The following example uses the selector attribute of the trigger to send an event when a particular element is clicked:

<amp-analytics type="googleanalytics" id="snowplow3">
<script type="application/json">
{
  "vars": {
    "collectorHost": "snowplow-collector.acme.com",  // Replace with your collector host
    "appId": "campaign-microsite"                    // Replace with your app ID
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "structEvent",
      "vars": {
        "structEventCategory": "ui-components",
        "structEventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

The available vars for structured events are: structEventCategory, structEventAction, structEventLabel, structEventProperty and structEventValue.

3. Getting help

Further information on using Snowplow with AMP can be found on the Snowplow wiki.

If you create any issues or PRs into the AMP HTML GitHub repository regarding Snowplow support, please be aware that we will not be aware of these unless you mention Snowplow team members on the issue.

If you have any questions or run into any problems, please get in touch with us through the usual channels.