Configuração de tag para AMP

O projeto Accelerated Mobile Pages (AMP) é uma plataforma da Web de código aberto que ajuda a melhorar a performance do seu conteúdo da Web. As páginas AMP têm suporte integrado para a tag do Google e o Gerenciador de tags do Google. Neste guia, descrevemos como configurar o Analytics para essas páginas.

Instalação

Com a tag do Google, você pode instalar o Analytics, o Google Ads e outros produtos do Google em páginas AMP. O Gerenciador de tags configura um contêiner de AMP e permite criar configurações avançadas e implantar tags de terceiros na própria interface.

Use os botões abaixo para selecionar uma plataforma:

Tag do Google

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

Instalação

Para configurar a tag do Google (gtag.js) em uma página AMP, primeiro verifique se você incluiu o componente amp-analytics na tag <head> da página:

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

Em seguida, adicione a tag do Google à sua página AMP como um componente JSON na tag <body> da página. Substitua <TARGET_ID> pelo ID da tag dos produtos (como Google Ads ou Analytics) que vão receber os dados:

<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 vários produtos na tag do Google, não é necessário instalar toda a tag deles. Basta adicionar o ID de destino a um comando config separado.

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

Para mais detalhes, consulte a documentação amp-analytics.

Acionadores de evento

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

O exemplo a seguir mostra como enviar um evento click 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, é click). Na seção vars, defina o tipo em event_name e adicione outros parâmetros, se for o caso.

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

Além dos eventos recomendados, você pode especificar seus próprios eventos personalizados.

Vincular domínios

O vinculador de domínios permite que dois ou mais sites relacionados em domínios diferentes sejam medidos como um. 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 config:

<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 desse tipo e envia um evento button-click ao Google Analytics após o clique no botão. Substitua <TAG_ID> por um ID de tag 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": "<TAG_ID>",
            "config": {
              "<TAG_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>

Solução de problemas

Use amptagtest.appspot.com para validar sua configuração de inclusão de tag ou verifique manualmente se o valor de cid é consistente em todos os domínios da seguinte forma:

Limpe os cookies ou use o modo de navegação anônima.
Se cid não for encontrado em um cookie do Google Analytics, ele também poderá ser visto na guia "Rede" do navegador da Web. Pesquise collect request, e o payload precisa conter um valor cid.
Depois de transmitir da CDN do Google para o site do cliente, o cid e o valor gclid precisam ser transmitidos pela decoração do URL:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
A página de destino final ainda terá o mesmo valor cid que a página de destino inicial.
Tenha cuidado com redirecionamentos e mudanças de domínio entre a página canônica e as páginas de destino não AMP.