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> </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.
<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.
<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:
<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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-
Written by @sebastianbenz