Tag global do site para AMP

A implementação de AMP da gtag.js aproveita o framework do amp-analytics para possibilitar a análise do seu site AMP. Os dados podem ser enviados de páginas AMP para o Google Ads, a DoubleClick e o Google Analytics usando a mesma implementação da gtag.js.

Instalação

Para configurar a gtag.js em uma página AMP, primeiro é preciso verificar se o componente amp-analytics foi incluído na tag <head> da sua página:

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

Em seguida, instale a tag global do site. Adicione o código dela à sua página AMP como um componente JSON dentro das tags <body>. Substitua <TARGET_ID> pelo ID de conversão do Google Ads, pelo código do anunciante da DoubleClick ou pelo código do Google Analytics:

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

Para configurar outros produtos na tag global do site, não é necessário instalar todo o snippet de código deles. Você só precisa adicionar o código do destino ao objeto config. Neste exemplo, um ID de conversão do Google Ads é incluído em uma configuração existente do Google Analytics. Substitua <AW-CONVERSION_ID> E <GA_MEASUREMENT_ID> pelos seus próprios valores de produto.

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

Para mais informações, consulte a documentação sobre o amp-analytics.

Gatilhos de evento

Se você quiser enviar dados específicos para seus produtos, configure os gatilhos com base em eventos, como cliques. Os gatilhos da gtag.js em páginas AMP seguem os mesmos padrões JSON que as outras configurações de disparo do amp-analytics.

O exemplo a seguir mostra como enviar um evento de clique para o Google Analytics. O valor de selector é um seletor de CSS que permite especificar qual elemento é segmentado, e o de on define o tipo de evento, que, neste caso, é um evento de click. Na seção vars, defina essa informação em event_name e adicione outros parâmetros conforme necessário.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Além da lista sugerida de eventos para a gtag.js, você também pode especificar seus próprios eventos personalizados.

O vinculador de domínios permite que dois ou mais sites relacionados em domínios separados sejam avaliados como um só. Para especificar quais domínios serão vinculados, use "linker": { "domains": [...] }:

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

Você pode vincular seu domínio canônico ao Cache de AMP por padrão. Para desativar a vinculação do tráfego de domínios, adicione "linker": "false" aos parâmetros de configuração:

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

Exemplo completo

Neste exemplo de código, mostramos uma página AMP que cria uma única página AMP e envia um evento "button-click" ao Google Analytics após o clique no botão. Lembre-se de substituir <GA_MEASUREMENT_ID> por um ID do produto válido:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>