Agregar Analytics a las páginas AMP

Con AMP puedes crear páginas web de contenido estático que se carguen rápidamente. AMP incluye un elemento amp-analytics que permite realizar un seguimiento de las interacciones de usuario con páginas AMP e integra funciones de compatibilidad con Google Analytics.

Para obtener más información sobre la obtención de datos de analítica en páginas AMP, consulta la referencia de amp-analytics. Para obtener información general sobre AMP, consulta la sección sobre AMP del sitio Accelerated Mobile Pages (AMP) Project.

Para conocer los requisitos y las capacidades de la compatibilidad integrada con Google Analytics para las páginas AMP, consulta Accelerated Mobile Pages (AMP) en el Centro de Ayuda de Google Analytics.

Interacciones de usuario compatibles con Google Analytics

amp-analytics es un componente ampliado y, para poder usarlo, debe incluirse explícitamente en el documento como elemento personalizado. Para agregar funciones de analítica AMP a tu página debes incluir la siguiente secuencia de comandos en la etiqueta <head>, antes de la biblioteca de JavaScript AMP:

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

Agrega el elemento amp-analytics en el cuerpo de tu página. A continuación, para habilitar la compatibilidad integrada con Google Analytics, configura el atributo type del elemento amp-analytics en googleanalytics. Se recomienda incluir un atributo id para poder identificar fácilmente cada elemento amp-analytics (p. ej., depuración).

<amp-analytics type="googleanalytics" id="analytics1">
  ...
</amp-analytics>

Estos valores request del activador son compatibles con la configuración de Google Analytics:

  • pageview para el seguimiento de páginas
  • event para el seguimiento de eventos
  • social para el seguimiento de las interacciones en medios sociales

Seguimiento de páginas

El seguimiento de páginas permite medir el número de veces que se ha visto una determinada página en tu sitio web.

Los hits de número de páginas vistas pueden enviarse configurando el valor request del activador en 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>

Puedes definir pares clave-valor para los siguientes campos de número de páginas vistas en el atributo vars del activador.

Valor Tipo Obligatorio Descripción
title cadena No Título de la página (por ejemplo, "página principal"). El valor predeterminado es title.
ampdocUrl cadena No URL de la página de la cual se realiza el seguimiento (por ejemplo, https://www.ampproject.org/). El valor predeterminado es ampdocUrl.

En el ejemplo siguiente se sustituyen los valores predeterminados de número de páginas vistas title y 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>

Seguimiento de eventos

Los eventos son interacciones del usuario con contenido cuyo seguimiento se puede realizar independientemente a partir de una página web o una carga de pantalla. Si no estás familiarizado con los eventos en Google Analytics, primero lee el artículo Acerca de los eventos del Centro de Ayuda de Analytics.

Los hits de eventos se pueden enviar configurando el valor request del activador en event y especificando los campos adecuados de categoría y acción del evento.

En el ejemplo siguiente se usa el atributo selector del activador para enviar un evento cuando se hace clic en un elemento concreto:

<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>

Puedes definir pares clave-valor para los siguientes campos de eventos en el atributo vars del activador.

Valor Tipo Obligatorio Descripción
eventCategory cadena Sí Suele ser el objeto con el que se ha interactuado (por ejemplo, "Vídeo").
eventAction cadena Sí Tipo de interacción (por ejemplo, "reproducir").
eventLabel cadena No Útil para clasificar los eventos (por ejemplo, "Campaña de otoño").
eventValue cadena No Valor numérico asociado al evento (por ejemplo, "42"). El valor predeterminado es 0.

Interacciones en medios sociales

Con la analítica de interacciones en medios sociales puedes medir el número de veces que los usuarios realizan acciones relacionadas con alguna red social. Por ejemplo, puedes medir cuando un usuario hace clic en un enlace "Tweet" de Twitter.

Si no estás familiarizado con las interacciones en medios sociales en Google Analytics, o no estás seguro de los valores que debes usar para la red, la acción o el destino del medio social, lee primero el artículo Información sobre las interacciones y los complementos sociales del Centro de Ayuda de Analytics.

Los hits de interacciones en medios sociales se pueden enviar configurando el valor request del activador en social y especificando los campos adecuados de red, acción y destino del medio social.

En el ejemplo siguiente se usa el atributo selector del activador para enviar un evento cuando se hace clic en un botón de un medio social concreto:

<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>

Puedes definir pares clave-valor para los siguientes campos de eventos en el atributo vars del activador.

Valor Tipo Obligatorio Descripción
socialNetwork cadena Sí Red en la que se produce la acción (por ejemplo, Facebook o Twitter).
socialAction cadena Sí Tipo de acción que se produce (por ejemplo, "Me gusta", "Enviar", "Tweet").
socialTarget cadena Sí Destino de una interacción en un medio social. Suele ser una URL, pero puede ser cualquier texto (por ejemplo, http://mipáginainteresante.com).

Ampliar googleanalytics

Puesto que el extremo de solicitud subyacente en la configuración de googleanalytics es el Protocolo de medición, es posible enviar otros parámetros del Protocolo de medición con los hits. Esto resulta útil para enviar valores en parámetros como las dimensiones y las métricas personalizadas, que se espera que se envíen junto con los hits.

Por ejemplo, puedes enviar una dimensión personalizada a través de una página vista ampliando el atributo request de esta con un parámetro de dimensión personalizada (o con cualquier otro parámetro que quieras incluir con el hit). Puedes hacer este cambio en el atributo requests, el cual especifica las URL que se emplean para enviar los datos a una plataforma de analítica.

<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>

Ejemplo de página AMP

A continuación se muestra un ejemplo de página AMP con seguimiento de eventos y número de páginas vistas de 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>

Depuración

Puedes usar la herramienta AMP Validator para identificar si una página web no cumple las especificaciones HTML de AMP. Para activar el validador, debes agregar #development=1 a la URL de la página.

La extensión amp-analytics ofrece mensajes de error y de advertencia para ayudarte a depurar una configuración y a solucionar los problemas relacionados. Estos mensajes se registran en la consola del navegador. Para activar el registro, debes agregar #log=1 a la URL de la página.

Personalización

La compatibilidad integrada con Google Analytics de la extensión amp-analytics te permite medir fácilmente las interacciones de usuario con tus páginas AMP. Sin embargo, para los casos más complejos, puedes crear tu propia configuración para enviar otros campos y tipos de hits del Protocolo de medición.

Para empezar con una solución personalizada, puedes usar los recursos siguientes: