Google AMP - Analytics

A análise de amplificador é um componente de amplificador usado para rastrear dados em uma página. Toda a interação do usuário na página pode ser registrada e salva para analisar os dados para futuras melhorias ou fins comerciais.

Para trabalhar com o componente amp-analytics, precisamos adicionar o seguinte script na seção head -

<script async custom-element = "amp-analytics" 
   src   = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

Para registrar os eventos usados no amp-analytics, podemos usar um fornecedor terceirizado ou também pode ter um sistema de rastreamento interno.

Exemplo de amp-analytics usando fornecedor GoogleAnalytics -

<amp-analytics type = googleanalytics>
   <script type = application/json>{
      "requests": {
         "pageview": "${eventId}"
      },
      "vars": {
         "account": "UA-44450152-1"
      },
      "triggers": {
         "trackPageview" : {
            "on": "visible",
            "request": "pageview",
            "vars": {
               "eventId": "pageview"
            }
         }
      }
   }
   </script>
</amp-analytics>

Exemplo de amp-analytics usando o fornecedor comscore

<amp-analytics type = comscore>
   <script type = application/json>
      {"vars": {"c2":"7922264"}}
   </script>
</amp-analytics>

Exemplo de amp-analytics usando fornecedor chartbeat

<amp-analytics type = chartbeat>
   <script type = application/json>{
      "vars": {
         "uid": "230",
         "domain": "dummyurl.com",
         "sections": "us",
         "authors": "Hello World"
      }
   }</script>
</amp-analytics>

A lista detalhada de fornecedores está disponível aqui .

Um exemplo prático de como usar o fornecedor de análise interna é fornecido abaixo -

Exemplo

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both}
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackPageview": {
                     "on": "visible",
                     "request": "event",
                        "vars": {
                           "eventId": "pageview"
                        }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

Quando a página é acessada no navegador, o rastreador é disparado para visualização de página. Ele pode ser visto na guia da rede do Google, conforme mostrado abaixo.

Você também pode disparar o evento amp-analytics quando um elemento específico estiver visível na página. Um exemplo prático para o mesmo é mostrado aqui -

Exemplo

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-video controls 
         id = "videoplayer"
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png"
         autoplay>
            <source src = "video/bunny.webm" type = "video/webm" />
            <source src = "video/samplevideo.mp4" type = "video/mp4" />
               <div fallback>
                  <p>This browser does not support the video element.</p>
               </div>
      </amp-video>
      <amp-analytics>
         <script type = "application/json">
         {
         "requests": {
            "event": "http://localhost:8080/googleamp/tracking.php?
            user=test&account=localhost&event=${eventId}"
         },
         "triggers": {
            "trackPageview": {
               "on": "visible",
               "request": "event",
                  "visibilitySpec": {
                     "selector": "#videoplayer",
                     "visiblePercentageMin": 20,
                     "totalTimeMin": 2000,
                     "continuousTimeMin": 200
                  },
                  "vars": {
                     "eventId": "video"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

Resultado

O componente Amp-analytics requer que um objeto json seja passado para a tag de script. O formato do json é o seguinte -

{
   "requests": {
      request-name: request-value,
      ...
   },
   "vars": {
      var-name: var-value,
      ...
   },
   "extraUrlParams": {
      extraurlparam-name: extraurlparam-value,
      ...
   },
   "triggers": {
      trigger-name: trigger-object,
      ...
   },
   "transport": {
      "beacon": *boolean*,
      "xhrpost": *boolean*,
      "image": *boolean*,
   }
}

Todos os objetos especificados acima não são obrigatórios para serem passados para amp-analytics. Se você estiver usando um fornecedor terceirizado, o fornecedor terá seu formato e o usuário precisará passar os dados dessa forma.

Vamos entender cada um dos objetos em detalhes -

solicitações de

O objeto de solicitações tem um url que é usado para disparar quando as condições são atendidas. Um exemplo de objeto de solicitações é mostrado aqui -

"requests": {
   "request-name": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},

O nome da solicitação será especificado no objeto acionador e o mesmo nome deve ser usado para ele.

Vars

Todas as variáveis a serem usadas no objeto de solicitação são especificadas no objeto vars.

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},
"vars": {
   "eventId": "video"
}

Parâmetros extras de URL

Quaisquer parâmetros adicionais a serem anexados ao url de solicitação como string de consulta podem ser definidos neste objeto. Observe o seguinte exemplo

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
   "eventId": "video"
},
"extraUrlParams": {
   "x": "1",
   "y": "2",
   "z": "3"
}

Gatilhos

Este objeto dirá quando o URL da solicitação deve ser disparado. Os pares de valores-chave que estão disponíveis dentro do objeto acionador são fornecidos abaixo -

on- Você deve mencionar o evento a ser ouvido. Os valores disponíveis paraonsão render-start, ini-load, click, scroll, timer, visible, hidden, user-error, access- * e video- *

request- Este é o nome do pedido. Isso deve corresponder ao nome da solicitação no objeto de solicitações .

vars - Este é o objeto com variáveis de valor-chave definidas para serem usadas dentro do objeto de gatilho ou usado para substituir o valor-chave vars definido.

selector - Mostra os detalhes do elemento no qual o gatilho está definido.

scrollSpec - Isso terá detalhes do gatilho de rolagem.

timerSpec - Este terá detalhes da hora a dar.

videoSpec - Isso terá detalhes a serem invocados para um vídeo.

Aqui está um exemplo em que adicionamos amp-video. O Amp-analytics disparará o rastreador quando o elemento de vídeo estiver disponível na página, pelo menos 20% visível na página, o vídeo deve ser reproduzido por pelo menos 2 segundos e é contínuo na visualização por 200 ms. Quando todas essas condições forem atendidas, apenas o rastreador será disparado. Os detalhes são mostrados abaixo -

Para adicionar as condições sobre a visibilidade do elemento e outras condições como o elemento deve ser visível pelo menos 20%, o vídeo deve ser reproduzido por 2s, todas essas condições devem ser especificadas dentro do visibilitySpec como mostrado abaixo -

<amp-analytics>
  <script type = "application/json">
   {
      "requests": {
         "event": "http://localhost:8080/googleamp/tracking.php?
         user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
         "trackPageview": {
            "on": "visible",
            "request": "event",
               "visibilitySpec": {
                  "selector": "#videoplayer",
                  "visiblePercentageMin": 20,
                  "totalTimeMin": 2000,
                  "continuousTimeMin": 200
               },
               "vars": {
                  "eventId": "video"
               }
         }
      }
   }
   </script>
</amp-analytics>

videoSpecpermite definir as condições com base nas quais deseja acionar o disparo do rastreador. As condições estão listadas aqui -

waitFor

Esta propriedade é usada para que o gatilho de visibilidade aguarde um determinado caso antes de disparar. As opções disponíveis para waitFor sãonone, ini-load e render-start. Por padrão, o valor de waitFor é ini-load.

reportWhen

Esta propriedade é usada para que o gatilho de visibilidade aguarde um determinado caso antes de disparar. O valor suportado é documentExit. Você não pode usarreportWhen e repeat propriedade juntos dentro visibilitySpec

continuousTimeMin and continuousTimeMax

Esta propriedade indica que o rastreador de visibilidade para disparar precisa que o elemento esteja na janela de visualização continuamente entre continuousTimeMin e continuousTimeMax. Se continousTimeMin não for especificado, será, por padrão, definido como 0. O valor é especificado em milissegundos.

totalTimeMin and totalTimeMin

Esta propriedade indica que o rastreador de visibilidade para disparar precisa que o elemento esteja na janela de visualização por um tempo total entre totalTimeMin e totalTimeMin. Se totalTimeMin não for especificado, o padrão será 0. O valor é especificado em milissegundos.

visiblePercentageMin and visiblePercentageMax

Esta propriedade indica que o rastreador de visibilidade para disparar precisa que o elemento fique visível dentro da janela de visualização entre a porcentagem atribuída a visiblePercetageMin e visiblePercentageMax. Os valores padrão paravisiblePercentageMin é 0 e 100 para visibilePercentageMax. Ambos têm valores 0, então o gatilho de visibilidade irá disparar quando o elemento não estiver visível e se ambos tiverem 100, ele irá disparar quando o elemento estiver totalmente visível

Repeat

Se definido como verdadeiro, o acionador será acionado sempre que as condições visibilitySpec forem atendidas. Por padrão, o valor para repetir é falso. Não pode ser usado junto com a propriedade reportWhen.

Um exemplo de gatilho de clique é mostrado aqui -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
      <style amp-custom>
         a {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <a>Click Here</a>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackAnchorClicks": {
                  "on": "click",
                  "selector": "a",
                  "request": "event",
                     "vars": {
                        "eventId": "clickonlink"
                     }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

Resultado

Ao clicar no link, o evento será disparado conforme mostrado abaixo -

↰ Previous page Next page ↱