Algunos aprendizajes con Gtag.js

Demoré un poco es encontrar la solución a estos temas. Como vieron en el post anterior, el estándar de Global Tag es menos complicado en algunos aspectos, pero más complicado en otros. Vamos por paso.

Luego de investigar en profundidad, hice algunas modificaciones que admiten las mejoras que verán a continuación.

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', {

    'anonymize_ip': true,

    'send_page_view': false});

  gtag('event', 'page_view');

</script>

Por defecto la función "config" envía la página vista a Google Analytics. En esta versión editada, el "config" no envía el pageview. Y luego el evento "page_view" se encarga de enviar la página vista.

Google Optimize con Gtag.js

Si estás utilizando Google Optimize, hay que hacer algunas modificaciones importantes para incluir el ID de Optimize y el código Anti-Flickr.

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>

 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'GA_TRACKING_ID', {

  'anonymize_ip': true,
  'send_page_view': false});
 gtag('event', 'page_view');
</script>

<style>.async-hide { opacity: 0 !important} </style>

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;

h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};

(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;

})(window,document.documentElement,'async-hide','dataLayer',3000,

{'OPT_CONTAINER_ID':true});</script>

<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID" onerror="dataLayer.hide.end && dataLayer.hide.end()"></script>

(Se agrega el Anti-Flickr y se agrega el nuevo código de optimize.js asíncrono).

Páginas Virtuales con Gtag.js

Hay dos métodos para hacer páginas virtuales. La que propone Google, y la que yo uso desde hace algún tiempo:

 gtag('event', 'page_view', {

  'page_path': '/ruta-de-la-pagina/',

  'page_title': 'Título de la página'});

(El evento page_view envía la metadata page_path y page_title. También puede enviar page_location, que corresponde a la verdadera URL de la página donde se activa la página virtual).

Dimensiones Personalizadas con Gtag.js

Las dimensiones y métricas personalizadas se envían con los eventos de Gtag.js. Pero es obligatorio crear un mapa dentro del "config" de Gtag.js para que sepa qué valor asignar a qué dimensión o métrica.

 gtag('config', 'GA_TRACKING_ID', {

  'anonymize_ip': true,

  'custom_map': {

    'dimension3': 'haircolor',

    'metric7': 'size'},

  'send_page_view': false});
 gtag('event', 'page_view', { 

  'haircolor': "brown", 

  'size': "12"});

Otros eventos con Gtag.js

Se pueden enviar otros eventos. Por ejemplo, los eventos personalizados clásicos que se ven en el reporte de Eventos de Google Analytics.

<script>

  gtag('event', 'hit', {

    'event_category': 'Evento sin Pageview',

    'event_label': 'Label del evento',

    'event_value': 0,

    'non_interaction': true });

</script>

El evento tiene dos particularidades, a diferencia de la manera cómo se configuraban antes:

1. Acción del evento es el nombre del evento: "hit".
2. Es un evento non_interaction=true; esto quere decir que no envía un pageview.

Si no agregas la línea de no-interacción=true al evento, cualquier evento que sea, agregará pageviews a la página y deformará las métricas.

Puedes agregar una línea con event_action, pero no es necesario. Gtag.js admite que coloques cualquier nombre al evento personalizado.

¿Hay alguna característica de Gtag.js que te esté causando dolor de cabeza? Pregunta en los comentarios por favor.