Cómo trackear las páginas AMP con Google Analytics

Hoy en día la gran mayoría de usuarios que accede a los buscadores, lo hace desde dispositivos móviles, Google obviamente tratando de adaptarse a los cambios, ha realizado cambios en su algoritmo de indexación, pasando del concepto de mobile friendly de 2015 al actual de Mobile First en 2018, que prioriza facilitar contenido optimizado a esta gran mayoría de usuarios.

Mobile First básicamente consiste en que Google priorizará la versión de contenido para dispositivos móviles a fin de realizar su indexación y clasificación de contenidos. Con esta indexación el robot de Google rastreará las páginas con el agente de smartphone y las indexará, pero no se creará un índice individual que priorice esas versiones, sino que se seguirá usando un único índice de contenidos web.

Por esta razón, cada vez es más importante tener una versión de nuestra web que pueda ofrecer una experiencia rápida y confiable para dispositivos móviles, o lo que es lo mismo, y más sabiendo que es una tecnología creada por Google, las páginas AMP.

En este artículo te ayudaré a realizar la implementación de soluciones de medición para dichas páginas AMP. Además de Google Analytics, los contenedores AMP en GTM, te facilitan soporte para todas las plataformas publicitarias de Google, existiendo más de 20 etiquetas disponibles de fábrica, y una gran variedad de etiquetas de proveedores de terceros para facilitar tus configuraciones en Google Tag Manager.

Configuración de Google Analytics para AMP

Ante todo damos por hecho que ya tienes creadas y validadas tus páginas AMP, este seria el primer paso cuando creamos dichas páginas, por suerte Google nos facilita dicha validación con una herramienta que tiene ubicada en esta url bit.ly/validador_amp.

Una vez ya tenemos nuestras páginas validadas, deberemos ajustar el código de seguimiento para evitar la falta de soporte nativo para javascript en AMP.

El elemento amp-analytics se puede usar para medir la actividad en un documento AMP. Actualmente, amp-analytics admite diferentes tipos de eventos:

Para ello debemos importar el componente amp-analytics en el encabezado de la página. Simplemente debemos añadir antes del cierre de la etiqueta <head> una etiqueta script apuntando a cdn.ampproject.org/v0/amp-analytics-0.1.js.

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

Página vista (Sin GTM)

Esta es la configuración amp-analytics que se lanzaría cuando se cargase una página en nuestro sitio web. Dicho código debe estar implementado en todas las páginas AMP del sitio web.

Ejemplo:

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXX-10” // Incluye la UA de tu propiedad en GA

},

“triggers”: {

“default pageview”: {

“on”: “visible”,

“request”: “pageview”,

“vars”: {

“title”: “Medicion páginas AMP con GA”

},”extraUrlParams”: {“cd1”: “autor del post”} // dimensiones personalizadas

}

}

}

</script></amp-analytics>

Account : aquí insertaríamos la UA de la propiedad donde queramos remitir los hits de página vista.

extraUrlParams : aquí podemos añadir las dimensiones personalizadas que queramos medir en el ejemplo, se esta pasando el valor de la variable ‘autor del post’.

Una versión más avanzada de página vista, aplicada a la visualización de un elemento AMP, en el ejemplo sería una fotografía.

<amp-analytics>

<script type=”application/json”>

{

“requests”: {

“elementShown”: “https://amp-publisher-metriplica.com/amp-analytics/ping?user=nu0o6avb&account=ampbyexample&event=${eventId}”

},

“triggers”: {

“defaultPageview”: {

“on”: “visible”,

“request”: “elementShown”,

“selector”: “#an-image”, // Trigger seria el id de la imagen

“vars”: {

“eventId”: “imageShownAfterButtonClick”

}

}

}

}

</script></amp-analytics>

Eventos

El seguimiento de eventos personalizados nos permite rastrear el comportamiento del los usuarios en el sitio web. Para rastrear eventos en AMP, habría que usar el siguiente código de ejemplo:

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXX-10” // Incluye la UA de tu propiedad en GA

},

“triggers”: {

“trackClickOnHeader”: {

“on”: “click”,

“selector”: “#header”,  // disparador / trigger

“request”: “event”,

“vars”: {

“eventCategory”: “Botón Registro Cabecera”,

“eventAction”: “Click”,

}

}

}

}

</script></amp-analytics>

Selector : el selector o trigger debe sustituirse en su caso por el propio selector CSS de botón o acción que queramos rastrear, si quisiéramos lanzar el evento con varios selectores, estos deberían ir separados por punto y coma ‘;’.

En caso de que queramos lanzar eventos no interactivos, bastaría con usar extraUrlParams justo después de “vars”, como hicimos en el caso anterior, pero añadiendo este json:

“extraUrlParams”: {“ni”: “1”}

Código para realizar la medición del scroll en una página AMP

Este código de scroll solo se lanzaría bajo ciertas condiciones, cuando se realiza el scroll en la página, en nuestro caso hemos preferido definir solamente que se ejecute cuando el usuario alcance el 50,75 y 100% de visualización de la página.

<amp-analytics>

<script type=”application/json”>

{

“requests”: {

“event”: “https://amp-publisher-metriplica.com/amp-analytics/ping?user=nu0o6avb&account=ampbyexample&event=${eventId}”

},

“triggers”: {

“scrollPings”: {

“on”: “scroll”,

“scrollSpec”: {

“verticalBoundaries”: [50, 75, 100] // Porcentajes de Scroll

},

“request”: “event”,

“vars”: {

“eventId”: “scroll”

}

}

}

}

</script></amp-analytics>

Temporizador

Este evento interactivo, se lanzará cuando se cumpla un especifico intervalo de tiempo.

<amp-analytics>

<script type=”application/json”>

{

“requests”: {

“event”: “https://amp-publisher-metriplica.com/amp-analytics/ping?user=nu0o6avb&account=ampbyexample&event=${eventId}”

},

“triggers”: {

“pageTimer”: {

“on”: “timer”,

“timerSpec”: {

“interval”: 30,  // intervalo de tiempo

“maxTimerLength”: 60

},

“request”: “event”,

“vars”: {

“eventId”: “timer”

},”extraUrlParams”: {“ni”: “0”} // evento interactivo

}

}

}

</script></amp-analytics>

Medición de páginas AMP con GTM

La implementación de acciones con GTM es mucho más sencilla, básicamente las acciones que deberíamos realizar y gestionar serían las siguientes:

Deberemos crear un nuevo contenedor para nuestra versión AMP en Google Tag Manager.

amp_contenedor

Una vez creado dicho contenedor, tendríamos los códigos que deberíamos implementar en cada página AMP, para poder realizar básica de páginas vista. Recordar situar cada código en su correcta situación, <head> y <body>.

amp_script

Páginas vista con GTM

Para poder realizar la medición de páginas vista, crearíamos una etiqueta como la que se puede ver a continuación:

amp_paginas_vistas

En tracking ID, debes indicar el código de tu propiedad en Analytics, mediante numeración o variable constante, para AMP no existe aun la variable de configuración GA.

Eventos con GTM

El seguimiento de eventos en una página AMP, es igual al de cualquier otra página web normal en GTM. Deberemos proporcionar en la etiqueta, la UA de nuestra propiedad, donde se recogerán los eventos y los parámetros categoría, acción y label.

amp_eventos

A dicha etiqueta habría que añadirle un trigger / selector, como vimos en el caso en código. Cuando se cumplan los requisitos de seguimiento de dicho trigger, se activará y remitirá los datos a Google Analytics configurados en el tag.

Triggers

Los triggers designan cuando y donde deben dispararse las etiquetas, en este caso sus seguimientos de Google Analytics, cada etiqueta debe tener al menos uno definido.

Hay cinco tipos de triggers disponibles:

Clic: Con un selector de CSS, como a: not ([href * = “mymobilesite.com”), a: not ([href * = “mymobilesite.com”)) * para rastrear los clics salientes, o una [href ^ = “mailto:”], a [href ^ = “mailto:”] * para rastrear los clics de correo electrónico.

Vista de página: Pueden ser alguna pagina vista en particular (ingresando específicamente la página donde se desea que se active) o todas las paginas vistas.

Scroll : Se activa con el desplazamiento vertical del usuario en la web, según se va alcanzando cierto umbral porcentual de visualizado en la página. Se pueden especificar varios umbrales separados por comas (por ejemplo, 50, 75 y 100).

Temporizador: Se activa cuando un usuario permanece en la página un intervalo de tiempo, especificado en segundos en el campo Interval.El campo limite indica el máximo numero de bucles de activación, pudiendo dejarlo en blanco si se desea que sea ilimitado. Si quieres limitarlo solo hay que tener en cuenta que aquí hay que especificar el máximo de tiempo que se desea que el temporizador realice los bucles, ejemplo: interval es 20 y queremos que lo haga 5 veces, 20 x 5 = 100 segs, en limit pondríamos 100 segundos.

Visibilidad: Este trigger se dispara cuando un elemento está visible en el navegador durante un período de tiempo determinado. Necesita la ID del elemento, el porcentaje mínimo visible (al menos indicar 1 %, para que no se dispare hasta que no este visible), el tiempo mínimo continuo (en milisegundos) y el tiempo total mínimo (también en milisegundos) .

” width=”20″ height=”20″>

Autor:

Analista Digital en Metríplica.

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.