Implementação com AMP

O AMP é uma estrutura HTML de código aberto que fornece uma maneira simples de criar páginas da Web rápidas e com carregamento leve.

Como o Adobe Analytics usa uma biblioteca JavaScript para compilar e enviar uma solicitação de imagem, são necessários ajustes na implementação para enviar dados à Adobe nas páginas que usam o AMP.

Determine que método deve ser implementado no Adobe Analytics em páginas que usam o AMP

A Adobe criou dois métodos para implementar o Adobe Analytics em páginas que usam o AMP. Ambos usam a tag HTML <amp-analytics>. Consulte amp-analytics na documentação da AMP para obter mais informações.

A tabela a seguir compara estes dois métodos:

Considere os prós e os contras para que você possa escolher o melhor método de implementação para sua organização.

Método 1: usar a marca <amp-analytics> com o modelo "adobeanalytics"

O modelo de rastreamento "adobeanalytics" usa a tag HTML <amp-analytics> para criar uma solicitação de rastreamento diretamente. Especifique as solicitações de ocorrência que são acionadas em eventos de página específicos, como a página se tornando visível ou em um clique. Eventos de clique podem ser personalizados para se aplicarem a certas IDs de elemento ou classes ao especificar um seletor. É possível carregar o modelo ao adicionar type="adobeanalytics" à tag amp-analytics.

No código de exemplo a seguir, há dois disparadores definidos: pageLoad e click. O acionador pageLoad é executado quando o documento se torna visível e inclui a variável pageName, conforme definido na seção vars. O segundo acionador click é acionado ao clicar em um botão. A variável eVar1 está definida para este evento com o valor button clicked.

<amp-analytics type="adobeanalytics">
  <script type="application/json">
    {
      "requests": {
        "myClick": "${click}&v1=${eVar1}",
      },
      "vars": {
        "host": "example.data.adobedc.net",
        "reportSuites": "reportSuiteID1,reportSuiteID2",
        "pageName": "Adobe Analytics Using amp-analytics tag"
      },
      "triggers": {
        "pageLoad": {
          "on": "visible",
          "request": "pageview"
        },
        "click": {
          "on": "click",
          "selector": "button",
          "request": "myClick",
          "vars": {
            "eVar1": "button clicked"
          }
        }
      }
    }
  </script>
</amp-analytics>

A marca <amp-analytics> oferece suporte a substituições de variáveis, para que o AMP possa fornecer valores de dados conhecidos. Consulte variáveis com suporte em amp-analytics no GitHub para obter mais informações.

A Adobe identifica visitantes usando uma função AMP integrada e define o cookie adobe_amp_id. Essa ID de visitante é exclusiva de qualquer outra ID definida pelo Adobe Analytics. Um visitante único diferente é contado para cada CDN do qual um visitante recupera o conteúdo, o que pode aumentar a contagem de visitantes únicos. É altamente recomendado usar um conjunto de relatórios separado para páginas AMP devido à forma como o AMP identifica visitantes únicos. O serviço da Adobe Experience Cloud ID não é compatível.

Essa solução exige que o servidor de rastreamento seja especificado na propriedade host corresponda ao servidor de rastreamento no site principal, para que os controles da política de privacidade sejam respeitados. Caso contrário, crie uma política de privacidade separada para as páginas que usam AMP.

Método 2: usar a marca <amp-analytics> com o modelo "adobeanalytics_nativeConfig"

A tag "adobeanalytics_nativeConfig" é mais fácil de implementar, pois usa a mesma metodologia de marcação usada nas páginas normais da Web. Adicione o seguinte à tag amp-analytics:

<amp-analytics type="adobeanalytics_nativeConfig">
  <script type="application/json">
    {
      "requests": {
        "base": "https://${host}",
        "iframeMessage": "${base}/stats.html?campaign=${queryParam(campaign)}&pageURL=${ampdocUrl}&ref=${documentReferrer}"
      },
      "vars": {
        "host": "example.data.adobedc.net"
      },
      "extraUrlParams": {
      "pageName": "Example AMP page",
      "v1": "eVar1 example value"
      }
    }
 </script>
</amp-analytics>

Uma página HTML hospedada nos servidores da Web também é necessária:

<html>
  <head>
    <title>Stats Example</title>
    <script language="JavaScript" type="text/javascript" src="VisitorAPI.js"></script>
    <script language="JavaScript" type="text/javascript" src="AppMeasurement.js"></script>
  </head>
  <body>
    <script>
      var v_orgId = "INSERT-ORG-ID-HERE";
      var s_account = "examplersid1,examplersid2";
      var s_trackingServer = "example.data.adobedc.net";
      var visitor = Visitor.getInstance(v_orgId);
      visitor.trackingServer = s_trackingServer;
      var s = s_gi(s_account);
      s.account = s_account;
      s.trackingServer = s_trackingServer;
      s.visitorNamespace = s_visitorNamespace;
      s.visitor = visitor;
      s.pageName = s.Util.getQueryParam("pageName");
      s.eVar1 = s.Util.getQueryParam("v1");
      s.campaign = s.Util.getQueryParam("campaign");
      s.pageURL = s.Util.getQueryParam("pageURL");
      s.referrer = s.Util.getQueryParam("ref");
      s.t();
    </script>
  </body>
</html>

Essa abordagem envia dados a uma página da Web de utilitário por meio de parâmetros de cadeias de caracteres de consulta especiais adicionados ao parâmetro de solicitação iframeMessage. Esses parâmetros de cadeias de caracteres de consulta podem ser nomeados quando desejar, contanto que a página stats.html esteja configurada para coletar os dados apropriados.

O modelo "adobeanalytics_nativeConfig" também adiciona parâmetros da cadeia de caracteres de consulta com base nas variáveis listadas na seção extraUrlParams da marca <amp-analytics>. No exemplo acima, os parâmetros pageName e v1 são incluídos.

Usando esse método, se um usuário final optar por não ser rastreado no site primário, ele também deixará de ser rastreado em todos os AMPs sem etapas adicionais. Usar essa página de utilitários também significa que o AMP pode ser compatível com o serviço da Adobe Experience Cloud ID. Não é necessário um conjunto de relatórios separado.

O rastreamento de link e de vídeo não pode ser usado com este método. A tag iframeMessage no AMP só pode ser carregada uma vez por página, portanto, não é possível enviar outras solicitações de imagem depois que o quadro é carregado. Esse método também requer mais recursos de processamento para execução, o que pode afetar o desempenho da rolagem. Ele não afeta o tempo de carregamento da página, pois todos os recursos são carregados de forma assíncrona.

Perguntas frequentes

Como posso diferenciar visitantes AMP de outros em meus dados?

Para todas as páginas AMP, a dimensão Versão do JavaScript coleta um valor semelhante ao AMP vX.X. Também é possível definir uma dimensão personalizada como "AMP" para segmentar esses visitantes.

Como esse método de implementação se compara aos Artigos Instantâneos do Facebook?

Os Artigos Instantâneos do Facebook são compatíveis com uma solução semelhante ao método "adobeanalytics_nativeConfig". A página stats.html desse método pode atender às necessidades de análise tanto para AMP quanto para FIA, simultaneamente. Para obter mais informações sobre como implementar o rastreamento no FIA, consulte Artigos Instantâneos do Facebook.