amp-analytics
- Introduction Setup Pageview UI elements appearance tracking Anchor click Scroll event Timer AMP Carousel Tracking Form

websites

amp-analytics

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="200" height="240" layout="fixed" sandbox="allow-scripts" frameborder="0" src="https://amp.dev/documentation/examples/components/amp-analytics/embed?test=1&user=&account=ampdev">
  <amp-img src="/static/samples/img/pixel-white.png" layout="fixed-height" height="350" width="auto" placeholder alt="...">
  </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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.

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

The elementShown event is issued when the image becomes visible

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "elementShown": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Try it by clicking one of the links.

a link
another link

<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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.

a special link.
a not so special link.

<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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

AMP Carousel Tracking

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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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.

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&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>

자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동

설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기

Written by @sebastianbenz