As Accelerated Mobile Pages (AMP, na sigla em inglês) são uma maneira de criar páginas da Web para conteúdos estáticos que são renderizados rapidamente. As páginas AMP incluem um elemento amp-analytics
que permite acompanhar as interações dos usuários com as páginas AMP. Além disso, elas têm suporte integrado para o Google Analytics.
Para saber mais sobre as análises para as páginas AMP, consulte a referência amp-analytics. Para informações gerais sobre AMP, consulte O que é AMP? no site do Projeto Accelerated Mobile Pages (AMP).
Para ver os requisitos e os recursos de suporte integrado do Google Analytics para as páginas AMP, leia Accelerated Mobile Pages (AMP) na Central de Ajuda do Google Analytics.
Interações do usuário compatíveis com o Google Analytics
O amp-analytics
é um componente estendido e precisa ser incluído explicitamente no documento como um elemento personalizado para ser usado. Para adicionar a funcionalidade de análise das páginas AMP às suas páginas, inclua o script a seguir em <head>
, antes da biblioteca AMP JS:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Adicione o elemento amp-analytics
ao corpo da sua página. Em seguida, para ativar o suporte incorporado para o Google Analytics, defina o atributo type
do elemento amp-analytics
como googleanalytics
. É recomendável incluir um atributo id
para que você possa identificar cada elemento amp-analytics
(por exemplo, depuração).
<amp-analytics type="googleanalytics">
...
</amp-analytics>
Os valores request
do acionador a seguir são compatíveis com a configuração do Google Analytics:
pageview
para acompanhamento de páginasevent
para acompanhamento de eventossocial
para acompanhamento de redes sociais.
Acompanhamento de páginas
Com o acompanhamento de páginas, você pode contabilizar o número de visualizações de determinada página do seu website.
Para enviar os hits de exibição de página, defina o valor request
do acionador para pageview
.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
É possível definir pares de valores-chave para os campos de exibição de página a seguir no atributo vars
do acionador.
Valor | Tipo | Obrigatório | Descrição |
---|---|---|---|
title |
string |
não | O título da página (por exemplo, página inicial) O padrão é title . |
documentLocation |
string |
não | URL da página que está sendo acompanhada (por exemplo, https://www.ampproject.org/). O valor padrão é sourceUrl . |
O exemplo a seguir substitui os valores padrão de exibição de página para title
e documentLocation
:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageviewWithCustomUrl": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My page",
"documentLocation": "https://www.examplepetstore.com/pets.html"
}
}
}
}
</script>
</amp-analytics>
Acompanhamento de eventos
Eventos são interações do usuário com conteúdo que pode ser acompanhado independentemente do carregamento de uma página da Web ou de uma tela. Se você não conhece bem os eventos no Google Analytics, primeiro leia o artigo Sobre os eventos na Central de Ajuda do Google Analytics.
Para enviar os hits de evento, defina o valor request
do acionador como event
e configure os campos obrigatórios do evento "Categoria" e "Ação".
O exemplo a seguir usa o atributo selector
do acionador para enviar um evento quando o usuário clica em um elemento específico:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
É possível definir pares de valores-chave para os campos de evento a seguir no atributo vars
do acionador.
Valor | Tipo | Obrigatório | Descrição |
---|---|---|---|
eventCategory |
string |
sim | Normalmente, o objeto com o qual a interação ocorreu (por exemplo, "Video"). |
eventAction |
string |
sim | O tipo de interação (por exemplo, "play"). |
eventLabel |
string |
não | Útil para classificar eventos (por exemplo, "Fall Campaign"). |
eventValue |
integer |
não | Um valor numérico associado ao evento (por exemplo, 42). O valor padrão é 0. |
Eventos sem interação
Em alguns casos, convém enviar um evento como evento sem interação.
Para fazer isso, defina o parâmetro ni
como "1"
na seção extraUrlParams
:
"extraUrlParams": {
"ni": "1"
}
Para um exemplo completo, consulte Extensão de googleanalytics
.
Interações em redes sociais
A análise de interação em redes sociais permite que você avalie a frequência com que os usuários realizaram ações relacionadas às redes sociais. Por exemplo, você pode avaliar quando um usuário clica em um link "Compartilhar um link" do Twitter.
Se você não conhece bem as interações em redes sociais no Google Analytics ou não sabe ao certo quais valores usar para redes sociais, ação ou destino, leia primeiro o artigo Sobre interações e plug-ins de redes sociais na Central de Ajuda do Google Analytics.
Para enviar os hits de interação em redes sociais, defina o valor request
do acionador como social
e configure os campos obrigatórios "Redes sociais", "Ação" e "Segmentar".
O exemplo a seguir usa o atributo selector
do acionador para enviar um evento quando o usuário clica em um botão específico de uma rede social:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
É possível definir pares de valores-chave para os campos de evento a seguir no atributo vars
do acionador.
Valor | Tipo | Obrigatório | Descrição |
---|---|---|---|
socialNetwork |
string |
sim | A rede em que ocorre a ação (por exemplo, Facebook, Twitter). |
socialAction |
string |
sim | O tipo de ação realizada (por exemplo, "Dar um like", "Enviar", "Enviar um tweet"). |
socialTarget |
string |
sim | Especifica o destino de uma interação em redes sociais. Esse valor é normalmente um URL, mas pode ser qualquer texto (por exemplo, http://mycoolpage.com). |
Extensão de googleanalytics
Como a extremidade subjacente de solicitação da configuração de googleanalytics
é o Protocolo de avaliação, é possível enviar Parâmetros de protocolo de avaliação adicionais com os hits. Isso é útil para o enviar de valores para parâmetros como dimensões e métricas personalizadas, que devem ser enviadas juntamente com os hits.
Por exemplo, para enviar uma dimensão personalizada com uma exibição de página, inclua o parâmetro Dimensão personalizada (ou qualquer outro parâmetro que você queira incluir com o hit) na seção extraUrlParams
. Esta seção pode ser incluída no nível do acionador para as solicitações individuais ou em nível global para enviar os dados com todas as solicitações.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"extraUrlParams": {
"cd3": "AMP"
},
"triggers": {
"trackPageviewWithCustomData": {
"on": "visible",
"request": "pageview"
},
"trackEvent" : {
"on": "visible",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
},
"extraUrlParams": {
"ni": "1"
}
}
}
}
</script>
</amp-analytics>
Amostragem
As análises de AMP permitem que você adicione recursos de amostragem às suas páginas AMP, exatamente como nas páginas não AMP. Para implementar a amostragem em uma ou mais solicitações enviadas da sua página AMP, use a configuração a seguir para coletar amostras a 1%.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageviewWithCustom" : {
"on": "visible",
"request": "pageview",
"sampleSpec": {
"sampleOn": "${clientId}",
"threshold": 1
}
}
}
}
</script>
</amp-analytics>
Acompanhamento de links externos
Para adicionar o acompanhamento de links externos a vários links da sua página AMP, faça anotações nos links e configure um acionador que seja disparado por cliques nos links. Isso pode ser feito com duas etapas:
Adição de um acionador para acompanhar os cliques nos links:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"outboundLinks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventCategory": "outbound",
"eventAction": "click",
"eventLabel": "${outboundLink}"
}
}
}
}
</script>
</amp-analytics>
Anotações no link com os dados adequados:
<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>
Tráfego AMP x não AMP
Devido a restrições técnicas, o tráfego AMP usa Client-IDs diferentes daqueles usados para o tráfego da Web por padrão. As páginas AMP também são carregadas mais rapidamente e têm padrões de tráfego diferentes, resultando em métricas diferentes. O uso de uma propriedade separada para avaliar o tráfego AMP permite uma análise mais eficiente das métricas e uma imagem mais precisa do seu tráfego. Se você usar uma única propriedade para avaliar os tráfegos AMP e não AMP, use a dimensão fonte de dados ou uma dimensão personalizada para diferenciá-los. Por padrão, o Google Analytics envia o valor "AMP" na dimensão da fonte de dados. Esse é o valor que você pode usar para segmentar/filtrar ou, se preferir, analisar conteúdo AMP e não AMP em uma única vista. Para configurar uma dimensão personalizada, leia Extensão de googleanalytics. Além disso, com a integração do Client-ID de AMP, é possível usar um único Client-ID para um usuário em todo o tráfego AMP e não AMP.
Exemplo de página AMP
Veja a seguir o exemplo de uma página AMP com a exibição de página e o acompanhamento de eventos do Google Analytics.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMP Analytics</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackEvent": {
"selector": "#event-test",
"on": "click",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "click"
}
}
}
}
</script>
</amp-analytics>
<h1 id="header">AMP Page</h1>
<span id="event-test" class="box">
Click here to generate an event
</span>
</body>
</html>
Depuração
Você pode usar o Validador de páginas AMP para verificar se uma página da Web não atende às especificações HTML para AMP. A adição de #development=1
ao URL da página ativa o validador.
A extensão amp-analytics
fornece mensagens de aviso e erro para ajudar você a depurar e resolver os problemas de configuração. É possível registrar mensagens no console do navegador. Adicione #log=1
ao URL de uma página para ativar o registro de mensagens.
Personalização
O suporte integrado para o Google Analytics na extensão amp-analytics
fornece uma maneira fácil de avaliar as interações do usuário com usas páginas AMP. No entanto, em alguns casos de uso mais avançado, convém criar sua própria configuração para enviar os campos adicionais e tipos de hit disponíveis no Protocolo de avaliação.
Os recursos a seguir ajudarão você a começar a usar uma solução personalizada:
- extensão mp-analytics – Uma visão geral de como receber dados de análise de um documento AMP.
- variáveis amp-analytics: uma lista de variáveis compatíveis com
amp-analytics
. - vendor.js: esse artigo inclui modelos
request
para fornecedores, inclusive o modelogoogleanalytics
. Você pode usar o modelogoogleanalytics
como referência sobre como criar sua própria configuração. - Como usar o Protocolo de avaliação e referência de parâmetros: uma visão geral de como usar o Protocolo de avaliação e a lista de todos os parâmetros do Protocolo de avaliação.