AMP
English Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文
  • websites

amp-analytics

Open in playground

Introduction

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

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

This sample demonstrates which events can be measured and how they can be configured. For a complete 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>

 

<amp-iframe class="fixed-dashboard"
  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=[[.]]&account=ampbyexample">
  <amp-img src="/static/samples/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.

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

UI elements appearance tracking

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,...).

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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.

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

This sample fires an analytics request when the image becomes visible as a result of an action.

<div>
  <button on="tap:an-image.toggleVisibility">
    Toggle image
  </button>
  <amp-img hidden
    id="an-image"
    src="/static/samples/img/amp.jpg"
    width="1080"
    height="610"
    layout="responsive"
    alt="AMP">
  </amp-img>
</div>

The elementShown event is issued when the image becomes visible

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "elementShown": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "defaultPageview": {
          "on": "visible",
          "request": "elementShown",
          "selector": "#an-image",
          "vars": {
            "eventId": "imageShownAfterButtonClick"
          }
        }
      }
    }
  </script>
</amp-analytics>

Anchor click

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

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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.

<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.

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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.

<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 event

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

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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.

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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:

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:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&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:

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

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

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

Form

You can track events triggered by amp-form. Find a list of supported event here

Try to insert any name as a name input in the form to see the amp-form-submit-success event.

Try to insert the word "error" as a name input in the form to see the amp-form-submit-error event.

<div>
  <amp-analytics>
    <script type="application/json">
      {
        "requests": {
          "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=[[.]]&account=ampbyexample&event=${eventId}"
        },
        "triggers": {
          "formSubmit": {
            "on": "amp-form-submit",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit"
            }
          },
          "formSubmitSuccess": {
            "on": "amp-form-submit-success",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit-success"
            }
          },
          "formSubmitError": {
            "on": "amp-form-submit-error",
            "request": "event",
            "selector": "#testForm",
            "vars": {
              "eventId": "form-submit-error"
            }
          }
        }
      }
    </script>
  </amp-analytics>
  <p>Try to insert any name as a name input in the form to see the <code>amp-form-submit-success</code> event.</p>
  <p>Try to insert the word "error" as a name input in the form to see the <code>amp-form-submit-error</code> event.</p>
  <form id="testForm"
    method="post"
    action-xhr="/documentation/examples/api/submit-form-input-text-xhr"
    target="_top">
    <input type="text"
      name="name"
      placeholder="Name..."
      required>
    <input type="submit"
      value="Subscribe">
  </form>
</div>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub