amp-analytics

Edit on Github
Open in Playground

Introduction

The amp-analytics element can be used to measure activity on an AMP document. Currently, amp-analytics supports four different kind of events:

  • Pageview
  • Anchor Clicks
  • Timer
  • Scrolling
  • AMP Carousel changes

This sample demonstrates which events can be measured and how they can be configured. For a completele overview of all available options and parameters, have a look at the official documentation.

Setup

Import the amp-analytics component in the header.

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

We need amp-iframe to embed an analytics dashboard.

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

We are going to use a demo analytics endpoint to demonstrate what's possible with amp-analytics. The dashboard is embedded via amp-iframe and shows the data received by the analytics endpoint in real-time. It should be visible in the bottom right corner.

Example

<amp-iframe class="fixed-dashboard ampstart-card m1"
  width="180"
  height="180"
  layout="fixed"
  sandbox="allow-scripts allow-same-origin"
  frameborder="0"
  src="https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/embed?user=61uhiw90&account=ampbyexample">
  <amp-img src="/img/pixel-white.png"
    layout="fixed-height"
    height="350"
    width="auto"
    placeholder></amp-img>
</amp-iframe>

Pageview

This is a simple amp-analytics configuration to fire a single request when the page becomes visible. Note how we declare a variable eventId in the request and define the concrete value in the vars block.

Important: amp-analytics should be configured in the document body.

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

This is a more sophisticated view tracking. This sample fires an analytics request when a specific element becomes visible. The element is specified via id and must be an AMP element (amp-img, amp-iframe, amp-ad,...).

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#cat-image-id",
            "visiblePercentageMin": 20,
            "totalTimeMin": 500,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "catview"
          }
        }
      }
    }
  </script>
</amp-analytics>

This image will trigger an analytics request, if at least 20% of it are visible for 500ms with a minimum time of 200ms continuous visibility.

Example

<amp-img id="cat-image-id"
  src="/img/cat-looking-up-300x200.jpg"
  width="300"
  height="200"
  attribution="visualhunt"
  alt="a cat"
  layout="responsive"></amp-img>

Anchor Clicks

User interactions can be tracked as well. This configuration will track clicks on any anchor links in the page.

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Try it by clicking one of the links.

Example

<ul>
  <li>
    <a>a link</a>
  </li>
  <li>
    <a>another link</a>
  </li>
</ul>

It is also possible to fire click events only for specific links. Select specific elements to tracking by specifying a selector id. This sample only tracks clicks on anchors with the id anchor-id.

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "#anchor-id",
          "request": "event",
          "vars": {
            "eventId": "clickOnSpecialAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Only one of these links will trigger the clickOnSpecialAnchor event.

Example

<ul>
  <li>
    <a id="anchor-id">a special link</a>.</li>
  <li>
    <a id="another-anchor-id">a not so special link</a>.</li>
</ul>

Scroll Events

Use scroll events to fire a request under certain conditions when the page is scrolled.

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
          },
          "request": "event",
          "vars": {
            "eventId": "scroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

Timer

Timer events fire in the specified interval.

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

It is possible to track amp-carousel events with amp-analytics (this works only for type="slides"). Here is a sample carousel:

Example

Slide 1
Slide 2
Slide 3
<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides">
  <div class="slide"
    data-slide-id="slide1">Slide 1</div>
  <div class="slide"
    data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

You can use the fromSlide and toSlide variables for tracking which slides are viewed. The value is either taken from the data-slide-id attribute of the slide when present, else it represents the index of the slide (starting from 0).

The amp-carousel-change event is issued when there is any change in the slide that is currently visible:

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselChange": {
          "on": "amp-carousel-change",
          "request": "event",
          "vars": {
            "eventId": "carousel-change-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

The amp-carousel-next event is issued when there is a traversal to the next slide:

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselNext": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-next-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

The amp-carousel-next event is issued when there is a traversal to the previous slide:

Example

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=61uhiw90&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselPrev": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-prev-${fromSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>