Adicionar o Google Analytics a páginas AMP

O projeto Accelerated Mobile Pages (AMP) é uma plataforma usada para criar páginas da Web para conteúdos estáticos que são renderizados rapidamente. As páginas AMP incluem um elemento <amp-analytics> que possibilita a avaliação das interações dos usuários. Além disso, elas têm suporte integrado para o Google Analytics.

Configuração básica para avaliar as visualizações de página

Para criar uma instalação básica do Google Analytics em uma página AMP, copie o seguinte snippet de código e substitua <GA_TRACKING_ID> pelo código de propriedade que você gostaria de usar. Saiba como encontrar seu código do Google Analytics.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Como funciona

O elemento <amp-analytics> é um componente estendido do AMP e é ativado explicitamente como um custom-element em uma tag do script.

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

O bloco do elemento <amp-analytics> é configurado para ativar o suporte para os produtos de avaliação do Google. Defina o atributo type de <amp-analytics> como gtag (para ativar o suporte da biblioteca gtag.js) e o atributo data-credentials como include (para ativar os cookies).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

Como o AMP não permite o uso de nenhum JavaScript além das bibliotecas próprias aprovadas, a configuração é executada com o JSON. Uma propriedade gtag_id com um <GA_TRACKING_ID> válido é adicionada ao bloco vars e, abaixo, uma propriedade de configuração com <GA_TRACKING_ID>: {} é adicionada como o valor.

Acompanhar eventos

Use triggers com valores definidos para acompanhar eventos nas páginas AMP. Essas propriedades são usadas em uma configuração de acionador:

  • selector: um seletor de CSS para especificar um elemento de destino.
  • on: especifica o tipo de evento.
  • vars: especifica o tipo de evento no event_name e acrescenta parâmetros adicionais, conforme necessário.

Este exemplo mostra como configurar um evento básico do Google Analytics. Crie um gatilho chamado button que será acionado quando um elemento com um valor do código the-button for clicado. Esse acionador enviará um valor event_name de login e um method do Google ao Google Analytics:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_TRACKING_ID>",
        "config": {
         "<GA_TRACKING_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Eventos do Google Analytics são uma categoria de eventos específicos do Google Analytics que são usados comumente para gerar relatórios sobre as campanhas. Esses valores podem ser especificados no bloco de vars com os parâmetros event_category, event_label e value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_TRACKING_ID>",
        "config": {
          "<GA_TRACKING_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": &#123;
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Veja a documentação do amp-analytics para saber mais sobre a configuração do acionador.

Modificar os parâmetros

Para substituir os parâmetros padrão do Google Analytics ou adicionar novas opções, adicione os valores desejados à seção parameter do bloco config. Este exemplo substitui os valores padrão de exibição de página para page_title e page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

O vinculador do domínio permite que dois ou mais sites relacionados em domínios separados sejam avaliados como um. Especifique os domínios que devem ser vinculados à propriedade "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Nas páginas AMP com o Google Analytics configurado, a capacidade de vincular seu domínio canônico ao cache de AMP é ativada por padrão. Para desativar a capacidade do Google Analytics de vincular o tráfego do domínio, adicione "linker": "false" aos parâmetros de configuração:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_TRACKING_ID>",
    "config" : {
      "<GA_TRACKING_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Tráfego AMP x não AMP

O tráfego AMP usa Client-IDs diferentes daqueles usados para o tráfego da Web por padrão. As páginas AMP são carregadas mais rapidamente e têm padrões de tráfego diferentes daqueles das páginas padrão. Como resultado, normalmente você terá métricas diferentes entre os tráfegos AMP e não AMP.

O uso de uma propriedade separada para avaliar o tráfego AMP permite uma análise mais eficiente das métricas e uma imagem mais precisa do seu tráfego. Se você realmente tiver que usar uma única propriedade para avaliar os tráfegos AMP e não AMP, use a dimensão da fonte de dados ou uma opção personalizada para diferenciar os tipos de tráfego.

Por padrão, o Google Analytics envia o valor AMP por meio da dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou, se preferir, analisar os conteúdos AMP e não AMP em uma única vista.

Depurar a configuração

Você pode usar o Validador de páginas AMP para verificar se uma página da Web não atende às especificações HTML para AMP. Adicione #development=1 ao URL de uma página para ativar o validador.

A extensão amp-analytics fornece mensagens de aviso e erro para ajudar você a depurar e resolver os problemas de configuração. Adicione #log=1 ao URL de uma página para ver mensagens de erro registradas no console do seu navegador da Web.

Exemplo completo

Este exemplo mostra uma página AMP completa com um único botão em uma página. Essa configuração envia dados padrão de visualização de página e eventos button-click para o Google Analytics:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_TRACKING_ID>",
            "config": {
              "<GA_TRACKING_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>