O elemento amp-analytics é utilizado para medir as atividades dos visitantes em um documento AMP.
Atualmente amp-analytics suporta até 5 tipos de eventos
- Visualização de página
- Clicks em ancoras
- Tempo
- Scrolling
- Mudanlas no AMP Carousel
Para você utilizar este componente, adicione o seguinte script no Header do seu projeto.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Precisamos também do amp-iframe para incorporar o painel analítico.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Exemplo Pageview
Este evento será executado quando a página for carregada.
Observação: o componente deverá ser configurando entre a tag body do documento.
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=ppoqj3rs&account=ampbyexample&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
Anchor Clicks
As interações do usuário também podem ser rastreadas. O analytics abaixo irá acompanhar qualquer clique em um dos links na página.
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=ppoqj3rs&account=ampbyexample&event=${eventId}"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "clickOnAnyAnchor"
}
}
}
}
</script>
</amp-analytics>
Também é possível disparar eventos de clique apenas para alguns links. Selecione os elementos específicos para o rastreamento definindo um identificador “id”.
No exemplo abaixo estaremos monitorando apenas os eventos de click no link com o ID anchor-id.
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=ppoqj3rs&account=ampbyexample&event=${eventId}"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "#anchor-id",
"request": "event",
"vars": {
"eventId": "clickOnSpecialAnchor"
}
}
}
}
</script>
</amp-analytics>
Eventos Scroll
Exemplo de evento que será executado conforme a rolagem da página.
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=ppoqj3rs&account=ampbyexample&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>
Tempo “Timer”
É possível criar eventos que serão disparadas em um determinado intervalo, continuamente.
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=ppoqj3rs&account=ampbyexample&event=${eventId}"
},
"triggers": {
"pageTimer": {
"on": "timer",
"timerSpec": {
"interval": 10,
"maxTimerLength": 600
},
"request": "event",
"vars": {
"eventId": "timer"
}
}
}
}
</script>
</amp-analytics>