Como configurar análises básicas para suas páginas AMP
As plataformas de análise são frequentemente integradas a sites através de fragmentos de JavaScript inline e chamadas de função, que disparam eventos que são enviados de volta ao sistema de análise. O AMP fornece uma sintaxe de configuração JSON flexível para replicar esse processo para diferentes parceiros de análise.
amp-analytics. Contexto: Análises em páginas não-AMP
A seguir está um exemplo de rastreamento tradicional do Google Analytics usando JavaScript. Vamos reescrever isso no formato JSON amp-analytics, mas primeiro vamos dar uma olhada na abordagem tradicional:
<script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; (i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments); }), (i[r].l = 1 * new Date()); (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })( window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga' ); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> Este JavaScript é bastante simples; ele envia uma notificação para rastrear o evento pageview.
Passo 1: Inclua o script amp-analytics
Para reproduzir essa funcionalidade no AMP, devemos primeiro incluir a biblioteca de componentes amp-analytics no <head> do nosso documento:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" ></script> Passo 2: Adicione o código de configuração
Agora vamos acrescentar o componente amp-analytics no final do body do documento:
<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-YYYY-Y" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Name of the Article" } } } } </script> </amp-analytics> Assim como no exemplo JavaScript na parte superior desta página, este trecho de amp-analytics enviará uma notificação ao Google Analytics indicando que uma página foi visualizada.
Para especificar isto, definimos o type como googleanalytics e depois no JSON, criamos um disparador que chamamos de "default preview". Esse disparador será acionado quando a página estiver visível (devido ao "on": "visible") e, quando ele disparar, enviaremos uma solicitação de análise de pageview ao Google Analytics com os vars que especificamos.
O JSON usado para configurar amp-analytics é um formato muito flexível para descrever quais dados de análise devem ser enviados e quando enviá-los. O amp-analytics tem detalhes completos sobre o formato.
Passo 3: Adicionando mais disparadores
A partir do exemplo acima, podemos acrescentar outro disparador chamado "click on #header trigger":
<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-YYYY-Y" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Name of the Article" } }, "click on #header trigger": { "on": "click", "selector": "#header", "request": "event", "vars": { "eventCategory": "examples", "eventAction": "clicked-header" } } } } </script> </amp-analytics> Como você poderá adivinhar pelo nome deste novo disparador, ele será acionado quando o elemento com o ID "header" for clicado (especificado por "on": "click" e "selector": "#header"). Quando este disparador for acionado, enviaremos a solicitação do event para nosso provedor de análises, especificando algumas variáveis a serem incluídas na solicitação.
Se você tem uma plataforma de rastreamento personalizada com a qual deseja se integrar, ainda pode usar amp-analytics e definir seus próprios endpoints de URL personalizados para enviar dados de rastreamento. Saiba mais na documentação de referência do componente amp-analytics.
“UA-YYYY-Y” é uma conta Google Analytics de exemplo; ela deve ser substituída pelo código de rastreamento do Google Analytics do seu próprio site, se você estiver usando este exemplo no seu site.
amp-pixel. Se você só precisa rastrear pageviews, amp-pixel é uma solução mais leve que amp-analytics porque só pretende resolver os requisitos de um rastreamento de pixel tradicional. Saiba mais em Analytics: the basics guide.