En este post vamos a hablar de la configuración básica en Google Tag Manager para medir las Acelerated Mobile Pages.

Estas son resultado del denominado proyecto AMP, una iniciativa de código abierto que busca mejorar la navegación de los usuarios en la web, a través de la carga más rápida de las páginas en los navegadores de los dispositivos móviles.

En lo que se refiere a la analítica web, el proyecto AMP ha dedicado toda una librería dentro de su plataforma a Google Analytics, para medir este tipo de páginas. Por lo tanto, cuando se despliega un contenedor de tipo AMP de Google Tag Manager en una página, lo que realmente se está implementando es una configuración externa, que se corresponde con el propio módulo de analítica del proyecto AMP.

A continuación vamos a resumir los pasos básicos para medir este tipo de páginas.

Configuración del contenedor

Lo primero que debemos hacer es configurar un contenedor de tipo AMP en Google Tag Manager:

Este contenedor usa por debajo el componente llamado amp-analytics para recolectar datos de los usuarios en la página web.

El siguiente paso sería insertar el snippet genérico que GTM nos proporciona y que es necesario incluir en cada una de las páginas tan cerca del cierre de la etiqueta <head> como sea posible. El fragmento de código es el siguiente:

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

Lo que hace este script es crear asíncronamente el elemento personalizado que hemos nombrado con anterioridad, llamado “amp–analytics”, el cual es un objeto de configuración de tipo JSON, que podemos considerar como nuestro dataLayer. Además este script carga la librería propia de amp-analytics.

Posteriormente debemos incluir también este snippet específico al principio de la etiqueta <body> de cada una de las páginas:

<amp-analytics config=»https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL» data-credentials=»include»></amp-analytics>

En este fragmento estamos llamando a un archivo de configuración externo, en este caso Google Tag Manager, el cual descarga un archivo llamado amp.json.

Al fijarnos más detenidamente en este código, observamos que incluye el ID de nuestro contenedor de GTM, y dos atributos muy importantes, uno es el gtm.url, que deberá tomar el valor de la url desde la que se hace la petición al contenedor de GTM, es decir, la url de nuestro sitio web. Y el atributo data-credentials, el cual permite al contenedor que lea y escriba cookies en nuestro dominio.

Una vez completada está configuración, ya podríamos ir a la consola de GTM y configurar nuestros Tags, Triggers y Variables.

Configuración de tags

En el contenedor de AMP no existe la opción de configurar una lista tan amplia de tags predefinidos como en el contenedor de una web normal. Y en cuanto a los personalizados, solo está disponible el Custom Image Tag, el cual consiste en la inclusión de un pixel de imagen invisible en la página.

La configuración de este es sencilla. Tan solo tenemos que proporcionar una url a la cual esta etiqueta debe hacer la petición de la imagen, como aparece en la siguiente imagen:

A través de esta petición se realiza un intercambio de información entre la página y el servidor al cual hace la petición la url.

Triggers

En cuanto a los activadores, tenemos las siguientes opciones de configuración en la consola:

La única diferencia con respecto a la configuración normal en GTM de web, radica en el Trigger de tipo Click. Para configurarlo tenemos que proporcionarle el selector CSS en el cual se va a basar para su activación, procurando coger un atributo id o class que sea único siempre.

Variables

Como en una configuración estándar, tenemos la posibilidad de dar de alta variables que ya están predefinidas en la herramienta o variables personalizadas. Las variables predefinidas, las cuales son fácilmente configurables, son por ejemplo:

–       Browser Language

–       Page Path

–       Page url

–       Screen width

Estas toman la información directamente del DOM de la página web, por lo tanto, no es necesario tocar el código fuente de la página.

Sin embargo, para una medición más exacta podríamos usar las variables personalizadas de tipo AMP, para las cuales si es necesario realizar una pequeña implementación a nivel de código.

Esta consiste en incluir el siguiente fragmento dentro del snippet específico de GTM en todas las páginas:

<script type=»application/json»>
{
«vars»: {
«pageType»: «Home
    }
}
</script>

El resultado sería este:

<amp-analytics config=»https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL» data-credentials=»include»>
<script type=»application/json»>
{
«vars»: {
«pageType»: «Home»
}
}
</script>
</amp-analytics>

Este código sería el equivalente al dataLayer en páginas web normales, aunque técnicamente no es lo mismo.

Es importante tener claro que las custom dimensions que queramos enviar se deberían incluir dentro del objeto vars, en formato de pares “key”:”value” y que los valores definidos dentro de este objeto deben ser caracteres alfanuméricos.

Para finalizar la configuración de variables deberíamos dar de alta esta variable personalizada para conseguir su envío a Google Analytics, como aparece en la siguiente imagen:

Hasta aquí una implementación básica de páginas AMP a través de GTM.

Esperamos que este post os haya resultado útil. Dejadnos vuestro feedback en los comentarios. ¡Muchas gracias!