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

As páginas aceleradas para dispositivos móveis (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 de páginas aceleradas para dispositivos móveis (AMP).

Para ver os requisitos e os recursos de suporte integrado do Google Analytics para as páginas AMP, leia Páginas aceleradas para dispositivos móveis (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" id="analytics1">
  ...
</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" id="analytics1">
<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.
ampdocUrl string não O URL da página que é acompanhada (por exemplo, https://www.ampproject.org/). O padrão é ampdocUrl.

O exemplo a seguir modifica os valores padrão de exibição de página para title e ampdocUrl:

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithAmpdocUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "ampdocUrl": "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" id="analytics3">
<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 que participou da interação (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 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 um rede social:

<amp-analytics type="googleanalytics" id="analytics4">
<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, "Curtir", "Enviar", "Compartilhar um link").
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 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, é possível enviar uma dimensão personalizada por meio de uma exibição de página. Para fazer isso, estenda o request da exibição de página com um parâmetro Dimensão personalizada (ou qualquer outro parâmetro que você queira incluir com o hit). É possível fazer essa alteração no atributo requests que especifica os URLs usados para a transmissão de dados para um plataforma de análise.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd3",
      "vars": {
        "title": "Classic Cars",
        "cd1": "registeredUser",
        "cd3": "automotive"
      }
    }
  }
}
</script>
</amp-analytics>

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 type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <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" id="analytics1">
  <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 um 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 – Este artigo inclui modelos request para fornecedores, incluindo o modelo googleanalytics. Você pode usar o modelo googleanalytics como referência sobre como criar sua própria configuração.
  • Uso do 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 para o Protocolo de avaliação.