Añadir Google Analytics a las Web Stories

analytics en web stories

He añadido el plugin de WordPress Web Stories de Google a una web de nicho que estoy empezando, y quería analizar las visitas de estas Stories. Las stories quedan muy bien y es fácil de utilizar, lo recomiendo.

Sobre uso de las Web Stories, no voy a hacer review completa, para eso mejor id a la web de Carlos Ortega donde habla detalladamente de Web Stories. Allí podréis ver también las stories que ha creado él y las mías. Únicamente voy a hacer un inciso y voy a dar unos beneficios versus stories de Instagram:

  • Son editables mientras son públicas. (Instagrammers odiadme, seguramente se puedan editar las stories en Instagram pero os aseguro que no tan fácil).
  • Resultan más fáciles de crear y copiar. Así que es fácil crear una plantilla, utilizar mismos estilos y de forma rápida.
  • Duran más de 24 h, de hecho están publicadas permanentemente.
  • Ideales para captar más audiencia, ya que se son públicas y se muestran en resultados de Discover, imágenes…

Después de esta pequeña intro con mis sesgadas opiniones, vamos a analizar nuestras Web Stories:

Añadir función de amp-analytics en las Web Stories de Google

 

Este plugin para crear este nuevo formato de stories tiene una función para activar Analytics para amp pero parece capada, esta función la encontraréis en el archivo del plugin: /web-stories/includes/Story_Renderer.php

Viendo un poco este archivo, las acciones y un poco de aquí un poco de allí, he creado esta función para añadirlo al functions.php del theme, hay que sustituir el UA-XXXXXXXXX-X, por vuestro código de Analytics.

[Update 8-7-20] Se ha separado el código para poder distribuir el script donde carga el recurso en el head y la etiqueta de amp-analytics en el footer del body. ¡Gracias Rubén Alonso!

[Update 2-9-20] Después del update de la beta 2 del plugin, en pleno agosto, han decidido cambiar la función “web_stories_print_analytics” por  “web_stories_insert_analytics_configuration”.

[Update 10-9-20] Han añadido un apartado en el plugin para añadir el código de seguimiento de Analytics. Lo puedes introducir en “Editor Settings”. Tal y como puedes ver en la siguiente imagen:

apartado analytics en web stories

 

Este nuevo apartado presenta 2 problemas:

  • No lanzan los eventos story_progress ni story_complete.
  • ¿Veis el botón de Guardar? Yo tampoco. No sabes si realmente se guarda la configuración en el plugin, ya que no hay botón de guardar configuración ni el campo se queda con el dato guardado. Tienes que confiar con que el ID introducido en el apartado “Editor Settings” se ha guardado correctamente. Basta con añadir el código ID de Analytics, apretar Enter y desear suerte. En este orden.

En cuanto a la función de analytics, han vuelto a cambiar “web_stories_insert_analytics_configuration” por  “web_stories_print_analytics”.

He optado por no introducir el código en Editor Settings y dejar este código activo en el archivo functions.php (Hasta que lancen una actualización mejor). Así, con este script puedo ver los eventos que lanza de cada story.

function print_analytics_script() {
    if (is_singular('web-story')) {
    ?>
<meta name="amp-google-client-id-api" content="googleanalytics">
<?php
}
}
add_action('web_stories_story_head', 'print_analytics_script');

function print_body_analytics_script() {
    if (is_singular('web-story')) {
    ?>
<amp-analytics type="gtag" data-credentials="include">
 <script type="application/json">
   {
     "vars": {
       "gtag_id": "UA-XXXXXXXXX-X",
       "config": {
         "UA-XXXXXXXXX-X": {
           "groups": "default"
         }
       }
     },
     "triggers": {
       "storyProgress": {
         "on": "story-page-visible",
         "vars": {
           "event_name": "custom",
           "event_action": "story_progress",
           "event_category": "${title}",
           "event_label": "${storyPageIndex}",
           "send_to": ["UA-XXXXXXXXX-X"]
         }
       },
       "storyEnd": {
         "on": "story-last-page-visible",
         "vars": {
           "event_name": "custom",
           "event_action": "story_complete",
           "event_category": "${title}",
           "event_label": "${storyPageCount}",
           "send_to": ["UA-XXXXXXXXX-X"]
         }
       }
     }
   }
 </script>
</amp-analytics>
    <?php
}
}
add_action('web_stories_print_analytics', 'print_body_analytics_script');

 

Clasificar las páginas de las Web Stories en Analytics

Como verás en este código hay varios disparadores de eventos para saber cuanta gente ha visto el story y cuanta gente lo ha terminado, debido a que hay dos acciones de evento: story_progress y story_complete. El resultado es este:

web stories analytics test

Ahora queremos saber cuantas veces han visto cada Story, para ello en Analytics podemos hacer un panel personalizable en apartado Personalización -> Paneles

Una vez aquí tendremos que crear un widget que muestre mediante un gráfico de barras la métrica de Resultados (Hits), agrupado por la dimensión de Etiqueta del evento (Event Label).

En el título del widget, no pongáis como yo las “Páginas más vistas de las Stories”, mejor poned el nombre de la Story, ya que con este widget vamos a analizar una Story en concreto.

eventos analytics en web stories primer paso

En el siguiente paso, vamos a asumir que le hemos puesto nombre a nuestra Story y vamos a filtrar por la categoría del evento. Debemos ir al informe de Adquisición -> Eventos, copiad allí el nombre de la categoría del Story y plasmadlo en el siguiente apartado del widget.

En el siguiente paso del widget filtraremos con la condición de Mostrar solo -> Categoría del evento -> Ponemos la condición “Que coincide con” si tenemos el nombre completo y finalmente pegamos el nombre. Como veréis en esta imagen la lié un poco con el título de la Story, pagué la novatada.

widget eventos analytics para web stories

Finalizamos guardando este widget y nos deberían salir las páginas de la story clasificadas por número de página, en este caso por la etiqueta de evento: ${storyPageIndex}, ya que en la función de arriba le hemos puesto esta variable en el disparador de etiqueta de evento.

Si quisiéramos clasificar la acción story_progress por ID (da unas ID infumables…), deberíamos modificar el campo de etiqueta de evento por ${storyPageId}, y así nos mostraría unos resultados similares a la de la captura de pantalla, ya que estaba haciendo pruebas. Si está todo ok, deberíais tener un widget similar a esto:

eventos de analytics para web stories

Por último, en la acción story_complete, le he añadido una etiqueta ${storyPageCount} que me servirá para saber el tamaño total de la story, así también podré analizar si hay retención y finalización con stories más cortas o más largas.

Más info en este post de AMP: https://blog.amp.dev/2019/08/28/analytics-for-your-amp-stories/

Galería de disparadores y variables para Stories:  https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story-analytics.md