Configurando Google Tag Manager (GTM) para AMPs

Siendo conscientes de que el tráfico mobile en buscadores es muy superior al tráfico desde PC desde hace ya varios años, Google puso en marcha una iniciativa de código abierto para mejorar la navegabilidad web desde dispositivos móviles. Esta iniciativa son los llamados AMPs.

¿Qué son los AMPs? Se trata de una “réplica” del contenido de un sitio web más ligera en términos de código, restringiendo los elementos HTML permitidos con el objetivo de mejorar el rendimiento del sitio web en mobile.

¿Cómo se genera un AMP? En ciertos gestores de contenido como WordPress, basta con activar el plugin de AMPs para generar estas páginas de contenido ágil en mobile. Una vez instalado y activado como cualquier otro plugin de WordPress solo tendremos que añadir /amp/ a la URL de cualquiera de nuestras entradas y podremos ver la versión AMP del mismo.

En CMS diferentes a WordPress, crear un AMP no es tan sencillo como activar un plugin, sino que requerirá de la recreación del HTML y CSS de la página siguiendo las “buenas prácticas” del proyecto de código abierto.

¿Crear un AMP afecta al SEO de mi sitio web? Definitivamente sí. Al tratarse de una “réplica” de una página ya existente, tenemos que tener cuidado con las duplicidades de contenido. Para evitar ser penalizados por Google, debemos establecer mediante etiquetas la relación entre las versiones originales y las AMP, por lo tanto desde todas las páginas de nuestro sitio que dispongan de versión AMP incluiremos una etiqueta link rel=”amphtml” cuyo href sea la URL de la versión AMP. Igualmente, debemos indicar con la etiqueta canonical en la versión AMP en qué URL se encuentra el contenido equivalente de la versión de escritorio.

¿Puedo medir un AMP con Analytics? ¡Claro que sí! Es más, nuestra recomendación es usar Google Tag Manager para llevar a cabo la medición del AMP. Lo más sencillo es crear un nuevo contenedor (GTM ha creado un contenedor distinto para medir AMPs) manteniendo el mismo UA-XXXXXXX-Y que se utilice para medir el resto de páginas del sitio web.

gtm-amp-container

Una vez creado el contenedor, habrá que copiar la siguiente línea de código que se indica a continuación en el <head> del AMP:

async custom-element=“amp-analytics” src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js&#8221;>

Este código, desplegará la librería de Analytics y buscará el elemento <amp-analytics>, donde irá el objeto JSON que determinará la medición del AMP. Dicho elemento, deberá incorporarse al inicio del <body> del AMP:

<amp-analytics config=https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL&#8221; data-credentials=“include”>
type=“application/json”>
  {“vars”: { “someCustomAmpVar”: “someValue” }  }
  
</amp-analytics>

Ahora bien, hemos de tener en cuenta que la configuración de GTM para un AMP es algo distinta, ya que por ejemplo, NO existen las variables dataLayer, sino las llamadas Variables AMP, que como se indica en el ejemplo de código anterior, deben ir incorporadas al objeto de configuración JSON, dentro de un elemento <script> si queremos traspasar por ejemplo alguna dimensión personalizada a la cuenta de Analytics.

Como se verá en la consola de GTM para AMPs, las posibilidades de crear triggers y variables customizadas para traspaso de data en una AMP son limitadas.

Los únicos tipos de variables que podrán utilizarse en la medición de AMPs serán:

  • ID del contenedor
  • Versión del contenedor
  • URL
  • Variable AMP
  • Constante
  • Nombre del entorno
  • Número aleatorio
  • Table de consulta

Y en el caso de los triggers, los tipos disponibles son:

  • Clic (solamente podrá utilizarse el CSS Selector para configurar un trigger de clic en AMPs)
  • Desplazamiento
  • Página vista (OJO: No se podrán utilizar las variables AMP para disparar los triggers)
  • Temporizador
  • Visibilidad

¿Sencillo? ¡Pues a probar!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s