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>
Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.
Vai a Stack Overflow Ci sono funzioni non descritte?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Modifica esempio in GitHub-