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.
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.
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.
<!-- Gerenciador de tags do Google -->
<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:
<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.