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>
Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.
Stack Overflow'a git Açıklanmayan bir özellik mi var?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
Örneği GitHub'ta düzenle-