Guia de configuração do AMP e do Gerenciador de tags

O projeto Accelerated Mobile Pages (AMP) é uma plataforma da Web de código aberto que ajuda a melhorar o desempenho do seu conteúdo da Web. O AMP oferece suporte integrado ao Gerenciador de tags do Google. Neste documento, explicamos a maneira recomendada de configurar o Gerenciador em páginas AMP.

Para instalar o Gerenciador de tags e usá-lo com o AMP, siga estas etapas:

Crie um contêiner AMP no Gerenciador de tags.
Adicione o snippet do Gerenciador de tags às páginas AMP.
Configure tags no contêiner do Gerenciador de tags e publique-o.

Criar um contêiner AMP

O Gerenciador de tags disponibiliza um tipo de contêiner AMP. Crie um novo contêiner AMP para o projeto:

Na tela Contas, clique em Mais ações () referente à conta que você quer usar. Selecione Criar contêiner.
Nomeie o contêiner. Use um nome descritivo, como example.com – notícias – AMP.
Em Onde usar o contêiner, selecione AMP.
Clique em Criar.

Seu contêiner está pronto. A próxima etapa é instalar o código do Gerenciador de tags nas páginas AMP.

O Gerenciador de tags indicará a melhor forma de instalar o snippet de código. Consulte a próxima seção para ver mais instruções.

Adicionar o snippet do Gerenciador de tags

Depois de criar o novo contêiner AMP, a tela Instalar o Gerenciador de tags do Google será exibida. O Gerenciador disponibilizará dois snippets de código. Copie esses snippets para que eles apareçam nas páginas AMP.

Observação: para acessar o snippet de código mais tarde, clique no número do código do contêiner na parte superior da Página de visão geral do espaço de trabalho. Outra alternativa é clicar em Administrador e, depois, em Instalar o Gerenciador de tags do Google.

O primeiro snippet adiciona o componente amp-analytics à página AMP. Esse código é inserido no final da seção <head> da página e deve aparecer apenas uma vez na página.

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

Importante: adicione esse código à página apenas se ele ainda não existir. Além disso, verifique se há apenas um por página.

O segundo snippet configura o amp-analytics para usar o Gerenciador de tags. Insira esse código imediatamente após o elemento <body> inicial. Substitua o GTM-CONTAINER_ID pelo código do contêiner do Gerenciador de tags ou copie e cole todo o snippet da interface do usuário do Gerenciador.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Configurar e publicar o contêiner

Quando o snippet de contêiner estiver instalado corretamente nas páginas, elas poderão disparar tags implantadas no Gerenciador de tags. A próxima etapa é criar configurações de tags e publicar o contêiner.

Para criar uma nova tag, siga estas etapas:

Clique em Tags Nova.
Clique em Configuração da tag e selecione o tipo na lista de tags AMP compatíveis.
Configure a tag com as informações disponibilizadas pelo seu fornecedor
Clique em Acionamento e adicione uma ou mais condições de evento que farão com que a tag seja disparada.
Nomeie o acionador e clique em Salvar.

Repita essas etapas se fizer outras configurações de tags. Para que as alterações entrem em vigor, publique o contêiner assim que a configuração dele estiver pronta.

Variáveis de página

O Gerenciador de tags pode capturar variáveis AMP e usá-las nas configurações de tags e acionadores. Por exemplo, uma página que vende sapatos pode ter variáveis que descrevam as propriedades de um item específico. É possível usar esses valores para criar variáveis do Gerenciador de tags:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "tipo": "calçados",
              "cor": "vermelho"
          }
      }
  </script>
</amp-analytics>

Para criar uma variável definida pelo usuário no Gerenciador de tags que capture a variável de cor do código acima, siga estas etapas:

Clique em Variáveis.
Em Variáveis definidas pelo usuário, clique em Nova.
Clique em Configuração da variável e selecione Variável AMP.
No campo Nome da variável AMP, insira o nome do campo (por exemplo, cor).
Atribua um nome descritivo à variável (por exemplo, Variável AMP – cor).
Clique em Salvar.

Tags AMP compatíveis com o Gerenciador de tags

Isso foi útil?

Como podemos melhorá-lo?