Analytics En Web Stories

Añadir Google Analytics a las Web Stories

Disclaimer: Ya han solucionado el problema de Analytics en el plugin de Web Stories. Click para ver la incidencia en el github del plugin de Google donde se les propuso los cambios.

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 esta Guía sobre las Web Stories que he creado.

Añadir función de amp-analytics en las Web Stories de Google [Ya no hace falta, pero enseño el proceso]

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:

[Update 01-10-20] Por fin tenemos arreglado la analítica en el formato Web Stories. Y yo contento de haber contribuido en ello.

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

Scroll al inicio