Casos de uso

Esta guía presenta un conjunto de casos prácticos que se utilizan con frecuencia al realizar el seguimiento de las interacciones de los usuarios:

NOTE – Want to add a use case? Let us know. Or you can also contribute your own use cases, see How to Contribute.

Seguimiento de las vistas de la página

Learn how to track page views using amp-pixel and amp-analytics.

Con amp-pixel

Send pageview data to a specified URL using amp-pixel:

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

Con amp-analytics (sin proveedor)

Send pageview data to a specified URL using 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>

Con amp-analytics (googleanalytics)

Send pageview data to Google Analytics (see also Page tracking in 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>

Seguimiento de los clics en la página

Learn how to track page clicks using amp-analytics, sending event data to a specified URL, and to Google Analytics.

Envío de datos a una URL específica

The following example uses the selector attribute to send a click event to the specified URL everytime a user clicks on a 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>

Envío de datos a Google Analytics

En el siguiente ejemplo se utiliza el atributo selector del trigger para enviar un evento de click a Google Analytics cuando un elemento en particular recibe un clic (consulte también el artículo Seguimiento de eventos AMP en 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>

Seguimiento del desplazamiento

Haga un seguimiento del desplazamiento en la página utilizando amp-analytics. En el siguiente ejemplo se utiliza el atributo scrollspec para enviar un evento de scroll a la URL determinada cuando el usuario se desplaza de forma vertical por el 25%, 50% y 90% de la página. El evento también se activa cuando el usuario se desplaza de forma horizontal por la página hasta el 90% del ancho 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>

Seguimiento de las interacciones sociales

Obtenga información sobre cómo hacer seguimiento de las interacciones sociales utilizando amp-analytics, enviando los datos de eventos a una URL específica y a Google Analytics.

Enviar datos a una URL específica

En el siguiente ejemplo se utiliza el atributo selector para enviar un evento de click a la URL determinada cada vez que un usuario hace clic en un tuit (#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>

Enviar datos a Google Analytics

The following example uses the selector attribute of the trigger to send an event when a particular social button is clicked (see also AMP social interactions tracking in 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>