AMP

Como configurar análises básicas para suas páginas AMP

As plataformas de análise são frequentemente integradas a sites através de fragmentos de JavaScript inline e chamadas de função, que disparam eventos que são enviados de volta ao sistema de análise. O AMP fornece uma sintaxe de configuração JSON flexível para replicar esse processo para diferentes parceiros de análise.

DICA – Se você usa o Google Analytics como seu provedor de análises, aprenda a usar amp-analytics.

Contexto: Análises em páginas não-AMP

A seguir está um exemplo de rastreamento tradicional do Google Analytics usando JavaScript. Vamos reescrever isso no formato JSON amp-analytics, mas primeiro vamos dar uma olhada na abordagem tradicional:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Este JavaScript é bastante simples; ele envia uma notificação para rastrear o evento pageview.

Passo 1: Inclua o script amp-analytics

Para reproduzir essa funcionalidade no AMP, devemos primeiro incluir a biblioteca de componentes amp-analytics no <head> do nosso documento:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Passo 2: Adicione o código de configuração

Agora vamos acrescentar o componente amp-analytics no final do body do documento:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Assim como no exemplo JavaScript na parte superior desta página, este trecho de amp-analytics enviará uma notificação ao Google Analytics indicando que uma página foi visualizada.

Para especificar isto, definimos o type como googleanalytics e depois no JSON, criamos um disparador que chamamos de "default preview". Esse disparador será acionado quando a página estiver visível (devido ao "on": "visible") e, quando ele disparar, enviaremos uma solicitação de análise de pageview ao Google Analytics com os vars que especificamos.

O JSON usado para configurar amp-analytics é um formato muito flexível para descrever quais dados de análise devem ser enviados e quando enviá-los. O amp-analytics tem detalhes completos sobre o formato.

Passo 3: Adicionando mais disparadores

A partir do exemplo acima, podemos acrescentar outro disparador chamado "click on #header trigger":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Como você poderá adivinhar pelo nome deste novo disparador, ele será acionado quando o elemento com o ID "header" for clicado (especificado por "on": "click" e "selector": "#header"). Quando este disparador for acionado, enviaremos a solicitação do event para nosso provedor de análises, especificando algumas variáveis a serem incluídas na solicitação.

Se você tem uma plataforma de rastreamento personalizada com a qual deseja se integrar, ainda pode usar amp-analytics e definir seus próprios endpoints de URL personalizados para enviar dados de rastreamento. Saiba mais na documentação de referência do componente amp-analytics.

OBSERVAÇÃO – “UA-YYYY-Y” é uma conta Google Analytics de exemplo; ela deve ser substituída pelo código de rastreamento do Google Analytics do seu próprio site, se você estiver usando este exemplo no seu site.

DICA – Se você estiver interessado em um sistema de rastreamento mais simples, dê uma olhada em amp-pixel. Se você só precisa rastrear pageviews, amp-pixel é uma solução mais leve que amp-analytics porque só pretende resolver os requisitos de um rastreamento de pixel tradicional. Saiba mais em Analytics: the basics guide.