Guia de configuração das AMP e do Gestor de Etiquetas

O projeto Accelerated Mobile Pages (AMP) é uma plataforma da Web de código aberto que ajuda a melhorar o desempenho do seu conteúdo Web. As AMP incluem suporte integrado para o Gestor de Etiquetas do Google. Este documento descreve a forma recomendada de configurar o Gestor de Etiquetas do Google em páginas AMP.

Para instalar o Gestor de Etiquetas para AMP:

Crie um contentor de AMP no Gestor de Etiquetas.
Adicione o fragmento do Gestor de Etiquetas às suas páginas AMP.
Configure etiquetas no seu contentor do Gestor de Etiquetas e publique.

Criar um contentor de AMP

O Gestor de Etiquetas tem um tipo de contentor de AMP. Crie um novo contentor de AMP para o seu projeto:

No ecrã Contas, clique em Mais ações () para a conta que pretende utilizar. Selecione Criar contentor.
Atribua um nome ao contentor. Utilize um nome descritivo, por exemplo, "example.com - notícias - AMP".
Em Onde utilizar o contentor, selecione AMP.
Clique em Criar.

O contentor já está pronto. O passo seguinte consiste em instalar o código do Gestor de Etiquetas nas suas páginas AMP.

O Gestor de Etiquetas vai fornecer informações acerca da melhor forma de instalar o fragmento do código. Pode consultar a secção seguinte para obter mais orientações.

Adicionar o fragmento do Gestor de Etiquetas

Depois de criar o novo contentor de AMP, é apresentado o ecrã Instalar o Gestor de Etiquetas do Google. O Gestor de Etiquetas fornece dois fragmentos de código. Copie estes fragmentos de código para que estejam presentes nas suas páginas AMP.

Nota: para aceder posteriormente aos fragmentos de código, clique no número de ID do contentor na parte superior da página de vista geral do espaço de trabalho ou clique em Administração e, em seguida, em Instalar o Gestor de Etiquetas do Google.

O primeiro fragmento adiciona o componente amp-analytics à página AMP. Este código é colocado no final da secção <head> da sua 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: apenas adicione este código à página se ainda não existir e certifique-se de que só é apresentado uma vez por página.

O segundo fragmento configura o componente amp-analytics para ativar o Gestor de Etiquetas. Coloque este código imediatamente após o elemento <body> de abertura. Substitua GTM-CONTAINER_ID pelo ID do contentor do Gestor de Etiquetas ou copie e cole o fragmento completo a partir da interface do utilizador do Gestor de Etiquetas.

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

Configurar o contentor e publicar

Quando o fragmento do contentor estiver instalado corretamente nas suas páginas, estas vão poder acionar etiquetas implementadas a partir do Gestor de Etiquetas. O passo seguinte consiste em criar configurações de etiquetas e publicar o contentor.

Para criar uma nova etiqueta:

Clique em Etiquetas Nova.
Clique em Configuração da etiqueta e selecione o tipo de etiqueta a partir da lista de etiquetas de AMP suportadas.
Configure a etiqueta com informações disponibilizadas pelo seu fornecedor de etiquetas.
Clique em Acionadores e adicione uma ou mais condições de evento que farão acionar a etiqueta.
Atribua um nome ao acionador e clique em Guardar.

Repita estes passos para quaisquer configurações de etiquetas adicionais. Quando a configuração do contentor estiver pronta, publique o contentor para que as alterações sejam aplicadas.

Variáveis de página

O Gestor de Etiquetas pode capturar variáveis de AMP e utilizar as mesmas nas configurações de etiquetas e acionadores. Por exemplo, uma página que venda calçado pode ter variáveis que descrevam as propriedades de um tipo de calçado específico. Estes valores podem ser utilizados para criar variáveis do Gestor de Etiquetas:

<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çado",
              "cor": "vermelha"
          }
      }
  </script>
</amp-analytics>

Para criar uma variável definida pelo utilizador no Gestor de Etiquetas que capture a variável de cor do código acima:

Clique em Variáveis.
Em Variáveis definidas pelo utilizador, clique em Nova.
Clique em Configuração da variável e selecione Variável de AMP.
No campo Nome da variável de AMP, introduza o nome do campo (por exemplo, "cor").
Atribua um nome descritivo à variável (por exemplo, "Variável de AMP - cor").
Clique em Guardar.

Etiquetas de AMP com suporte do Gestor de Etiquetas

A informação foi útil?

Como podemos melhorá-la?