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 añadir funciones de analítica de AMP en tu página debes incluir la siguiente secuencia de comandos en la etiqueta <head>, antes de la biblioteca JavaScript de AMP:

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

Añade 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">
  ...
</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">
<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 string No Título de la página (por ejemplo, "página principal"). El valor predeterminado es title.
documentLocation string No URL de la página que se supervisa (p. ej., https://www.ampproject.org/). El valor predeterminado es sourceUrl.

En el ejemplo siguiente se anulan los valores predeterminados de title y documentLocation:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustomUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "documentLocation": "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">
<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 string Sí Suele ser el objeto con el que se ha interactuado (por ejemplo, 'Video').
eventAction string Sí Tipo de interacción (por ejemplo, 'play').
eventLabel string No Útil para clasificar los eventos (por ejemplo, 'Fall Campaign').
eventValue integer No Valor numérico asociado al evento (por ejemplo, 42). El valor predeterminado es 0.

Eventos sin interacción

En algunos casos, es recomendable enviar los eventos como eventos sin interacción. Para ello, en la sección extraUrlParams, asigna el valor "1" al parámetro ni:

"extraUrlParams": {
   "ni": "1"
}

Para ver un ejemplo completo, consulta Ampliar googleanalytics.

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 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">
<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 string Sí Red en la que se produce la acción (por ejemplo, Facebook o Twitter).
socialAction string Sí Tipo de acción que se produce (por ejemplo, "Me gusta", "Enviar" o un tuit).
socialTarget string 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 la parte final de la 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 con una página vista; en ese caso, incluye el parámetro de dimensión personalizada (o cualquier otro parámetro que quieras incluir en el hit) en la sección extraUrlParams. Esta sección se puede incluir en activador para solicitudes individuales o de manera global para enviar los datos con todas las solicitudes.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "extraUrlParams": {
    "cd3": "AMP"
  },
  "triggers": {
    "trackPageviewWithCustomData": {
      "on": "visible",
      "request": "pageview"
    },
    "trackEvent" : {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      },
      "extraUrlParams": {
        "ni": "1"
      }
    }
  }
}
</script>
</amp-analytics>

Muestreo

Las analíticas de AMP permiten añadir muestreo en las páginas de AMP, igual que ocurre con las páginas que no son de AMP. Si quieres implementar el muestreo en una o varias de las solicitudes enviadas desde tu página de AMP, puedes usar la configuración siguiente para aplicar un muestreo del 1%.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageview",
      "sampleSpec": {
        "sampleOn": "${clientId}",
        "threshold": 1
      }
    }
  }
}
</script>
</amp-analytics>

Puedes añadir el seguimiento de enlaces externos en varios enlaces de tu página de AMP. Para ello, incluye anotaciones en los enlaces y configura un activador para supervisar los clics que reciben los enlaces. Solo tienes que seguir dos pasos:

Añade un activador para realizar el seguimiento de los clics que reciben los enlaces:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "outboundLinks": {
        "on": "click",
        "selector": "a",
        "request": "event",
        "vars": {
          "eventCategory": "outbound",
          "eventAction": "click",
          "eventLabel": "${outboundLink}"
        }
      }
  }
}
</script>
</amp-analytics>

Incluye una anotación en el enlace con los datos correspondientes:

<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>

Páginas AMP y páginas que no son AMP

Debido a varias restricciones técnicas, el tráfico AMP utiliza IDs de cliente distintos de los que se emplea para el tráfico web. Además, las páginas AMP se cargan más rápidamente y muestran patrones de tráfico diferentes, con lo que las métricas también son distintas. Al usar una propiedad distinta para medir el tráfico AMP, las métricas se pueden analizar mejor y, en consecuencia, se obtiene una visión más precisa del tráfico. Si utilizas una única propiedad para medir el tráfico AMP y el que no es AMP, usa la dimensión fuente de datos o una dimensión personalizada para diferenciarlos. De forma predeterminada, Google Analytics envía el valor "AMP" en la dimensión de fuente de datos, que es el valor que puedes usar para segmentar/filtrar o bien analizar el contenido de páginas AMP y compararlo con el contenido de páginas que no son AMP en una misma vista. Para configurar una dimensión personalizada, consulta Ampliar googleanalytics. Además, puedes usar la integración de IDs de cliente de AMP para aplicar un solo ID de cliente a los usuarios tanto en tráfico AMP como en tráfico que no es AMP.

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