Contenido

Dónde se enviarán los datos de analíticas: el atributo type
Cargar configuraciones remotas con el atributo config
Los atributos requests, triggers y transports
Orden de sustitución de variables

Información detallada sobre Analytics para AMP

Esta guía analiza en profundidad el amp-analytics, dividiendo una configuración amp-analytics de ejemplo en los siguientes elementos básicos:

En el resto de la guía usaremos este ejemplo de configuración, que realiza un seguimiento de las páginas vistas y los clics de los usuarios en los enlaces. Además, envía los datos de analíticas al proveedor externo, Google Analytics:

<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "extraUrlParams": {
    "cd1": "AMP"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  },
  'transport': {
    'beacon': false,
    'xhrpost': false,
    'image': true
  }
}
</script>
</amp-analytics>

El código anterior solo es un ejemplo para ayudarte a aprender, pero no es una muestra realista. Si trabajas con proveedores de analíticas, es probable que este ejemplo no tenga sentido, ya que las configuraciones de los proveedores eliminan la complejidad. Consulta la documentación de tu proveedor de analíticas para ver configuraciones de ejemplo.

Dónde se enviarán los datos de analíticas: el atributo type

El diseño de AMP admite dos patrones habituales de recogida de datos:

Un punto de conexión de un editor realiza una ingestión para sistemas de analíticas propios.
Un punto de conexión de un proveedor realiza una ingestión para interactuar con una solución de proveedor. (por ejemplo, Adobe Analytics, Chartbeat o Google Analytics).

Para enviar datos de analíticas a un proveedor, incluye el atributo type en la etiqueta amp-analytics y define el valor según el proveedor correspondiente, tal como se indica en la lista Proveedores Analytics.

Por ejemplo: <amp-analytics type="googleanalytics"> envía datos de analíticas al proveedor de analíticas externo Google Analytics. Para enviar datos a un punto de conexión de un editor, no incluyas el atributo type; así, los datos de analíticas se enviarán a los puntos de conexión definidos para cada solicitud.

Las configuraciones de los proveedores de analíticas son una forma rápida de dar los primeros pasos con amp-analytics. Consulta la documentación de tu proveedor y los recursos de ayuda para obtener más información. Como hemos indicado antes, la lista de proveedores que ya están integrados en AMP, así como los enlaces a sus documentaciones, están disponibles en la lista Proveedores Analytics.

Si eres un proveedor de analíticas, puedes obtener más información sobre la integración de tu configuración de analíticas en AMP HTML.

Cargar configuraciones remotas con el atributo config

No es necesario que incluyas toda la configuración de amp-analytics en la página AMP; puedes usar una URL remota para todas las configuraciones o parte de ellas.

De esta forma puedes, por ejemplo, cambiar la configuración en función de una solicitud específica. Si, como editor, controlas el archivo remoto, puedes realizar cualquier procesamiento de servidor necesario para generar los datos de configuración.

El primer paso para cargar configuraciones remotas es incluir el atributo config en la etiqueta amp-analytics:

<amp-analytics config="https://example.com/analytics.account.config.json">

El siguiente paso es crear el contenido JSON ubicado en la URL remota. En este ejemplo sencillo, la configuración que contiene el objeto JSON es el valor de la variable de la cuenta de Analytics.

Contenido de ejemplo en https://example.com/analytics.account.config.json:

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Sustitúyelo por el ID de tu propiedad
  }
}

El paso final es asegurarse de que el contenido del archivo remoto se transfiere al lugar correcto de la configuración amp-analytics. En estas solicitudes pageview y event, el valor de la variable account se define automáticamente según el valor de la cuenta de la URL remota ("account": "UA-XXXXX-Y"):

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

AMP no realiza validaciones comparando diversos usos de una misma variable. Los valores se asignan siguiendo un orden de preferencia de sustitución de variables, y los valores de las URL remotas tienen prioridad (consulta Orden de sustitución de variables).

Los atributos requests, triggers y transports

El atributo requests define qué datos se envían (por ejemplo, pageviews o events) y dónde se envían (las URL usadas para transmitir datos).

El atributo triggers define cuándo se deben enviar los datos de analíticas; por ejemplo, cuando un usuario vea una página o haga clic en un enlace.

El atributo transport define cómo enviar una solicitud; en concreto, define el protocolo.

Continúa leyendo para obtener más información sobre estas configuraciones. También puedes consultar información sobre estas configuraciones en la amp-analytics

Seleccionar los datos que se envían con el atributo requests

El atributo request-name se usa en la configuración del activador para especificar qué solicitud debe enviarse como respuesta a un evento concreto. El atributo request-value es una URL https. Es posible que estos valores incluyan tokens marcadores de posición que pueden hacer referencia a otras solicitudes o variables.

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Algunos proveedores de analíticas (incluido Google Analytics) ya han proporcionado una configuración, que puedes usar mediante el atributo type. Si usas un proveedor de analíticas, es posible que no tengas que incluir la información de requests. Consulta la información de tu proveedor para saber si es necesario configurar requests y cómo hacerlo.

Añadir una URL de solicitud con el atributo extraUrlParams

El atributo extraUrlParams define parámetros adicionales que se añaden a la cadena de consulta de la URL de solicitud a través de la convención habitual "&foo=baz".

El ejemplo amp-analytics añade un parámetro adicional cd1 a la solicitud y define "AMP" como valor del parámetro:

  "extraUrlParams": {
    "cd1": "AMP"
  }

Definir cuándo se envían los datos mediante el atributo triggers

El atributo triggers define cuándo se debe enviar una solicitud de analíticas. Contiene un par clave-valor: nombre del activador y configuración del activador. El nombre del activador puede ser cualquier cadena formada por caracteres alfanuméricos (a-zA-Z0-9).

Por ejemplo, el siguiente elemento amp-analytics está configurado para enviar una solicitud a https://example.com/analytics cuando el documento se cargue por primera vez y cada vez que se haga clic en una etiqueta a:

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

El método anterior solo se recomienda para páginas AMP, no para anuncios AMPHTML. Como la prioridad de las analíticas es inferior a la del contenido de la página, se recomienda hacer un seguimiento de los clics mediante una redirección de navegador para evitar que se pierdan clics.

AMP admite las siguientes configuraciones de activador:

Configuración del activador	Descripción
`on` (obligatorio)	El evento para el que se procesa. Los valores correctos son: `click`, `scroll`, `timer` y `visible`.
`request` (obligatorio)	Nombre de la solicitud para enviar (tal como se especifica en las solicitudes).
`vars`	Un objeto con pares clave-valor que se usan para anular `vars` definidos en la configuración de máximo nivel o para especificar `vars` únicos de este activador (consulta Orden de sustitución de variables).
`selector` (obligatorio si el valor de `on` es `click`)	Un selector CSS usado para filtrar los elementos incluidos en el seguimiento. Usa el valor `*` para hacer un seguimiento de todos los elementos. Esta configuración se usa junto con el activador `click`. Aprende a usar el selector para hacer un seguimiento de clics de páginas e interacciones sociales.
`scrollSpec` (obligatorio si el valor de `on` es `scroll`)	Controla en qué condiciones se activará el evento `scroll` cuando el usuario se desplace por la página. Este objeto puede contener `verticalBoundaries` y `horizontalBoundaries`. Se necesita al menos una de las dos propiedades para activar el evento `scroll`. Los valores de las dos propiedades deben ser matrices de números que contengan los límites en los que se genera un evento de desplazamiento. Consulta este ejemplo de hacer un seguimiento de los desplazamientos.
`timerSpec` (obligatorio si el valor de `on` es `timer`)	Controla cuándo se activa el evento `timer`. El temporizador se activará inmediatamente y después lo hará según el intervalo definido. Esta configuración se usa junto con el activador `timer`.

Los activadores de una configuración de prioridad inferior quedan anulados por los activadores con los mismos nombres de una configuración que tenga una prioridad superior (consulta Orden de sustitución de variables).

Definir cómo se envían los datos mediante el atributo transport

El atributo transport define cómo enviar una solicitud. Los tres métodos siguientes están habilitados de forma predeterminada:

Método de transporte	Descripción
`beacon`	Indica que navigator.sendBeacon puede usarse para transmitir la solicitud. Enviará una solicitud `POST` con credenciales y un cuerpo vacío.
`xhrpost`	Indica que `XMLHttpRequest` puede usarse para transmitir la solicitud. Enviará una solicitud `POST` con credenciales y un cuerpo vacío.
`image`	Indica que la solicitud se puede enviar generando una etiqueta `Image`. Se enviará una solicitud `GET`.

Solo se usará el método de transporte con la prioridad más alta que esté habilitado, permitido y disponible. El orden de prioridad es beacon > xhrpost > image. Si el agente de usuario del cliente no admite un método, se usará el siguiente método de mayor prioridad.

Solo debes incluir el atributo transport en tu configuración si quieres limitar las opciones de transporte. En caso contrario, es posible que detengas solicitudes.

En el ejemplo siguiente, el valor de beacon y xhrpost es "false", así que, aunque su prioridad sea mayor que la de image, no se usarán. Si el agente de usuario del cliente admite el método image, se usará; si no, no se enviará ninguna solicitud.

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

Orden de sustitución de variables

AMP asigna valores a las variables según un orden de prioridades:

Configuraciones remotas (mediante config).
vars anidado en un activador en triggers.
vars en el nivel más alto anidado en amp-analytics.
Valores proporcionados por plataformas.

En este ejemplo hay una configuración remota, variables definidas en el nivel más alto, en activadores y en el nivel de plataforma:

<amp-analytics config="http://example.com/config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
  },
  "vars": {
    "account": "ABC123",
    "title": "Homepage"
  },
  "triggers": {
    "some-event": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My homepage",
        "clientId": "my user"
      }
  }
}
</script>
</amp-analytics>

Si se ha definido el mismo var en varias ubicaciones, el orden de prioridad de las variables definirá su valor una vez. Así, si la configuración remota ha definido account como UA-XXXXX-Y en el ejemplo anterior, los valores de algunas variables se mostrarán de las siguiente manera:

`var`	Valor	Definido por
`canonicalUrl`	`http://example.com/path/to/the/page`	Plataforma
`title`	My homepage	Activador
`account`	`UA-XXXXX-Y`	Configuración remota
`clientId`	my user	Activador