Accelerated Mobile Pages (AMP) é uma plataforma usada para construir conteúdo estático de forma rápida. AMP possui o componente que permite mensurar as interações do usuário com Google Analytics em páginas AMP.
Configuração básica
Para criar uma instalação básica do Google Analytics em uma página AMP, copie e cole o código base a seguir e substitua <GA_MEASUREMENT_ID> pela a propriedade ID do seu Google Analytics.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Code language: HTML, XML (xml)
Como funciona Google Analytics em páginas AMP?
O componente <amp-analytics> é um extended component para habilita-lo precisamos carregar o script responsável para carregar o componente:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Code language: HTML, XML (xml)
Depois de incluir o script precisamos configurar nosso componente amp-analytics, primeiro atributo é o type, define qual o tipo de tracking iremos trabalhar nesse caso vamos utilizar o “gtag” mas o componente aceita uma lista extensa de ferramentas de tracking:
- acquialift: Acquia Lift
- adobeanalytics: Adobe analytics
- baiduanalytics: Baidu Analytics
- facebookpixel: Facebook pixel
- googleanalytics: Google Analytics
- newrelic: New relic
- A lista completa você pode conferir aqui: https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/?format=websites
O segundo atributo é o data-credentials ele ativa a capacidade de leitura de cookies em uma solicitação específica por meio de um atributo config.
AMP não permite JavaScript fora de seu controle ou por bibliotecas não aprovadas; portanto a configuração das ferramentas de monitoramento precisa ser realizadas através de um JSON. No caso do Google Analytics dentro do nosso JSON precisamos de uma propriedade gtag_id(o id do nosso Google Analytics) válida e as configurações para definir como iremos realizar o monitoramento definido pelo atributo config
Tráfego AMP vs. Tráfego não-AMP
O tráfego AMP utiliza IDs de clientes diferentes daquele para o tráfego da Web por padrão. As páginas AMP são carregadas mais rapidamente e mostram padrões de tráfego diferentes dos correspondentes de uma página web padrão, o que geralmente significa que você irá obter métricas diferentes entre páginas AMP e não-AMP.
O uso de uma propriedade separada pode ajudar a medir o tráfego AMP com uma melhor análise das métricas. Se vc precisar usar uma única propriedade para medir o tráfTego AMP e ano AMP, use uma dimensão de fonte de dados ou uma dimensão personalizada para distingui-los.
Por padrão, o Google Analytics envia o valor “AMP” pela dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou analisar o conteúdo AMP versus o conteúdo não-AMP.
Assim conseguimos adicionar Google Analytics em páginas AMP. Para ver mais conteúdo sobre AMP acesse a página da categoria ou deixe um comentário.