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údo estático que é renderizado rapidamente. As páginas AMP incluem um elemento <amp-analytics> que possibilita a avaliação das interações dos usuários. Além disso, têm suporte integrado para o Google Analytics.

Configuração básica para medir as exibiçõ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_MEASUREMENT_ID> pelo ID da propriedade que você quer usar. Saiba como encontrar seu ID 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_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Como funciona

O elemento <amp-analytics> é um componente estendido de AMP que é 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 de elementos <amp-analytics> é configurado para ativar o suporte aos produtos de avaliação do Google. Defina o atributo type de <amp-analytics> como gtag para permitir 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 a tecnologia AMP não permite o uso de nenhum JavaScript além das próprias bibliotecas aprovadas, a configuração é executada com o JSON. Uma propriedade gtag_id com <GA_MEASUREMENT_ID> válido é adicionada ao bloco vars, e uma propriedade de configuração com <GA_MEASUREMENT_ID>: {} é incluída abaixo como o valor.

Medir os eventos

Use triggers com valores definidos para medir os 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 em event_name e adiciona outros parâmetros, conforme necessário.

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

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_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 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_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

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

Modificar os parâmetros

Para modificar os parâmetros padrão do Google Analytics ou incluir novos, adicione os valores desejados à seção parameter do seu bloco config. Este exemplo modifica os valores de evento e visualização de página padrão de page_title e page_location:

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

Domínios com link

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

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_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_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Velocidade do site

O Google Analytics coleta automaticamente dados de velocidade do site para uma pequena fração do tráfego do seu site. Você pode alterar a taxa de amostragem e coletar mais ou menos informações. Para definir essa taxa como 100%, adicione o código destacado à sua configuração:

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

Para deixar de coletar dados de velocidade do site, use o código destacado:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</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 enviará o valor AMP pela dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou analisar o conteúdo AMP e não AMP em uma única vista.

Depurar a configuração

Você pode usar o AMP Validator 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 envia mensagens de aviso e erro para ajudar a depurar e resolver os problemas de uma configuração. Adicione #log=1 ao URL de uma página para ver as 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_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_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>

Recursos relacionados

AMP: projeto AMP
AMP: o que é AMP?
AMP: amp-analytics
gtag.js: usar gtag.js com AMP
Central de Ajuda do Google Analytics: Accelerated Mobile Pages (AMP)