Adição do Google Analytics às suas páginas AMP

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áginas
  • event para acompanhamento de eventos
  • social 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 string não Um valor numérico associado ao evento (por exemplo, 42). O valor padrão é 0.

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>

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",
          "eventValue": "${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 IDs de cliente diferentes daqueles usados para o tráfego da Web. As páginas AMP também são carregadas mais rapidamente e têm padrões de tráfego diferentes. Por isso, você deve usar uma propriedade separada para avaliar o tráfego AMP. 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. Não é necessário usar códigos adicionais com a fonte de dados. 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.

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: