tribal
AMP (Accelerator Mobile Page) con Google Analytics

Google lanzó hace muy poco días Accelerator Mobile Page (AMP), para conseguir mejorar la velocidad de carga de contenidos en entornos mobile.

El uso del móvil se incrementa cada año, por ello,surge la necesidad entre las compañías de Tecnología y Editores de mejorar el rendimiento de la carga de contenidos en entornos móviles y así poder tener el mayor alcance posible en sus noticias.

Google entonces se puso en contacto con muchos medios de comunicación y editores de prensa de todo el mundo para proveer una solución.

Finalmente Google lanzó hace muy poco días Accelerator Mobile Page (AMP), para conseguir mejorar la velocidad de carga de los contenidos en entornos mobile.

Que es Accelerator Mobile Pages AMP

Es una especificación de código abierto AMP HTML, un nuevo formato nacido partiendo de la tecnología HTML ya existente pero con ciertas limitaciones técnicas que hacen que los programadores estén más limitados a la hora de realizar las implementaciones en los sitios web. A su vez permiten cumplir el objetivo por el que se ha creado AMP HTML.

Beneficios que obtienes con AMP

Los beneficios que obtienen las compañías, si sus webs implementan AMP, claramente son tres:

  1. Mejorar la carga de página, ya que el contenido AMP será cacheado por Google
  2. Mejorar la experiencia de usuario y por consiguiente mejoraría el mismo objetivo que tiene los buscadores y Google en particular, que es el motor de búsqueda más usado en la mayoría de los países
  3. Aumentar la monetización de la publicidad

Hasta ahí todo bien, no? Parecen todos contentos:

  • El programador se adapta a los recursos para programar el site con un lenguaje con el que está familiarizado: HTML
  • Las compañías de medios y editores de contenidos contentos porque aumentan los ingresos por publicidad
  • Google contento por que consigue llevar a cabo sus directrices y los usuarios mejoren la experiencia de usuario usando su buscador, con lo que esto conlleva
  • Y el analista web, ¿qué?. Para terminar la implementación perfecta de AMP, queda una parte muy importante que es la medición del site AMP y que el analista web también sea feliz, no?

Recordar siempre: Si no mides, no controlas. Sino controlas, no puedes mejorar.

A continuación se muestra como realizar la medición a través de la Herramienta Google Analytics, pero ésta se puede realizar ya en diferentes Herramientas de medición como se indica en la guía de implementación proporcionada, con el componente amp-analytics

Medicion de un site AMP a través de Google Analytics

 

A continuación indico los pasos a seguir para la correcta implementación en Google Analytics, una vez realizada las implementaciones AMP en cada una de las páginas de Web.

Para realizar el ejemplo de implementación hablada he tomado como ejemplo el CMS archiconocido como WordPress. Tendrás que seguir ciertas pautas en la configuración, adjunto enlace que explica cambios a realizar How To Get Started With Accelerated Mobile Pages (AMP)

1. Creación de una nueva propiedad en Google Analytics

Para que el tráfico de las páginas AMP sea diferenciado del site actual, creamos una propiedad en Google Analytics “Trafico AMP”

2. Incluir el script en la sección <head>

Ahora se tiene que incluir el siguiente script en la sección <head> en todas las páginas:

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

A partir de ahora se podrá lanzar cualquier información permitida hasta ahora, desde el sitio web AMP hacia Google Analytics

3. Incluir el script en la seccion <body>

Ahora se tiene que incluir el siguiente script en la seccion <body>,en las páginas donde se quiera mandar información a Google Analytics

<amp-analytics type=”googleanalytics” id=”analytics1″>

“Código fuente con la información que se quiera mandar a Google Analytics”

</amp-analytics>

Los tipos de envío de información que se puede realizar son:
1. pageview
2. event
3. social

Aquí también me gustaría mostrar un ejemplo claro de los diferentes tipos de envíos de información a Google Analytics. A los que estén familiarizados con esta herramienta les resultará algo familiar el código que se muestra a continuación, aunque la implementación es diferente.

Tipo page view

Permite medir la página visitada por el usuario

<amp-analytics type=”googleanalytics” id=”analytics1″>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y”

},

“triggers”: {

“trackPageview”: {

“on”: “visible”,

“request”: “pageview”

“vars”: {

“title”: “Titulo_página” // Habría que incluir en título de la página

“ampdocurl”: “url_Destino” //Habrá que incluir la página destino que aterrizo el usuario

}

}

}

}

</script>

</amp-analytics>

Este código debería ejecutarse en todas las páginas de la web AMP para que se hiciese el funcionamiento básico en Google Analytics y se pudiera recoger información

La información que debería ser dinámica en cada página, es la puesta en rojo:

  • account: Se pondría la semilla de Google Analytics UA-XXXXX-Y
  • title: El título de la página en la aterrizo el usuario
  • ampdocurl: La url destino en la que aterrizó el usuario

 

Tipo event

En este tipo se reflejan las interacciones del usuario con el contenido que no sean una carga de página

Ejemplo rellena formulario de suscripción

<amp-analytics type=”googleanalytics” id=”analytics3″>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y”

},

“triggers”: {

“trackearClickBotonEnviar”: {

“on”: “click”,

“selector”: “#btnEnviar”,

“request”: “event”,

“vars”: {

“eventCategory”: “Conversion”,

“eventAction”: “Enviar-Formulario”

“eventLabel”: “Suscripcion-OK”

}

}

}

}

</script>

</amp-analytics>

Aquí se debería incluir en el botón de Enviar Formulario el id “btnEnviar” ya que se activará el evento cuando se haga un clic en un botón con ese id

La información que debería ser dinámica en la página de envió de formulario, es la puesta en rojo:

  • account: Se pondría la semilla de Google Analytics UA-XXXXX-Y
  • eventCategory: El nombre de la categoría del evento
  • eventAction: El nombre de la acción del evento
  • eventLabel: El nombre de la etiqueta del evento

 

Tipo social

Permite medir el número de veces que un usuario que está en la web tiene iteración con las redes sociales

Ejemplo hace un clic en red social Twitter en internet

<amp-analytics type=”googleanalytics” id=”analytics4″>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y”

},

“triggers”: {

“TrackearClickTwitter” : {

“on”: “click”,

“selector”: “#tweet”,

“request”: “social”,

“vars”: {

“socialNetwork”: “twitter”,

“socialAction”: “tweet”,

“socialTarget”: “https://www.twitter.com/usuarioTwitter”

}

}

}

}

</script>

</amp-analytics>

Aquí se debería incluir en el botón que inicia interacción con Twitter el id “tweet” ya que se activará el evento cuando se haga un clic en un botón con ese id

La información que debería ser dinámica en la página de envió de formulario, es la puesta en rojo:

  • account: Se pondría la semilla de Google Analytics UA-XXXXX-Y
  • socialNetwork: El Nombre de la red social
  • socialAction: La acción realizada en red social
  • socialAction: La página destino de la red social

Para más información detallada al respecto, podéis consultar la guía de desarrollo puesta a disposición para los programadores

Espero que os haya servido de ayuda y seguiremos muy de cerca los movimientos sobre este tema apasionante. No os parece interesante el mundo AMP?

Tribal Spain is a proud official partner of

Aviso de Cookies