amp-analytics – Medindo a atividade em um documento AMP

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>