Use cases

Este guia mostra um conjunto de casos de uso comuns do rastreamento de engajamento do usuário:

OBSERVAÇÃO – Quer adicionar um caso de uso? Fale conosco. Você também pode enviar seus próprios casos de uso. Veja como contribuir.

Rastrear visualizações de página

Saiba como rastrear visualizações de página usando amp-pixel e amp-analytics.

Como usar amp-pixel

Envie dados de visualização de página a um URL especificado usando amp-pixel:

<amp-pixel src="https://foo.com/pixel?"></amp-pixel>

Como usar amp-analytics – sem fornecedor

Envie dados de visualização de página a uma URL especificada usando amp-analytics:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Como usar amp-analytics – googleanalytics

Envie dados de visualização de página ao Google Analytics. Veja também como funciona o rastreamento de páginas no Google Analytics:

<amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackPageview": {
          // Trigger names can be any string. trackPageview is not a required name.
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Rastrear cliques na página

Saiba como rastrear cliques na página usando amp-analytics e enviando dados de eventos a uma URL especificada e ao Google Analytics.

Como enviar dados a uma URL especificada

O exemplo a seguir usa o atributo selector para enviar um evento click à URL especificada sempre que um usuário clica em um link (<a href>):

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "42",
            "eventLabel": "clicked on a link"
          }
        }
      }
    }
  </script>
</amp-analytics>

Como enviar dados ao Google Analytics

O exemplo a seguir usa o atributo selector do trigger para enviar um evento click ao Google Analytics quando um elemento específico recebe um clique. Veja também o rastreamento de eventos de AMP no Google Analytics:

<amp-analytics type="googleanalytics" id="analytics3">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackClickOnHeader": {
          "on": "click",
          "selector": "#header",
          "request": "event",
          "vars": {
            "eventCategory": "ui-components",
            "eventAction": "header-click"
          }
        }
      }
    }
  </script>
</amp-analytics>

Como rastrear a rolagem de página

Rastreie a rolagem de página usando amp-analytics. O exemplo a seguir usa o atributo scrollspec para enviar um evento scroll à URL especificada quando um usuário rola 25%, 50% e 90% da página verticalmente. O evento também é acionado pela rolagem horizontal de 90% da largura de scroll:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [25, 50, 90],
            "horizontalBoundaries": [90]
          }
        }
      }
    }
  </script>
</amp-analytics>

Como rastrear interações em redes sociais

Saiba como rastrear interações em redes sociais usando amp-analytics e enviando dados de eventos a um URL especificado e ao Google Analytics.

Como enviar dados a uma URL especificada

O exemplo a seguir usa o atributo selector para enviar um evento click à URL especificada sempre que um usuário clica em um tweet (#tweet-link):

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackClickOnTwitterLink": {
          "on": "click",
          "selector": "#tweet-link",
          "request": "event",
          "vars": {
            "eventId": "43",
            "eventLabel": "clicked on a tweet link"
          }
        }
      }
    }
  </script>
</amp-analytics>

Como enviar dados ao Google Analytics

O exemplo a seguir usa o atributo selector do trigger para enviar um evento sempre que um botão específico de redes sociais recebe um clique. Veja também o rastreamento de interações em redes sociais nas AMP no Google Analytics:

<amp-analytics type="googleanalytics" id="analytics4">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackClickOnTwitterLink": {
          "on": "click",
          "selector": "#tweet-link",
          "request": "social",
          "vars": {
            "socialNetwork": "twitter",
            "socialAction": "tweet",
            "socialTarget": "https://www.examplepetstore.com"
          }
        }
      }
    }
  </script>
</amp-analytics>