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.
<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 でサンプルを編集する-