Migrar de analytics.js a gtag.js

Si tienes experiencia con analytics.js, es recomendable que conozcas algunas de las diferencias entre analytics.js y gtag.js. En esta guía se ofrece una descripción de algunas de estas diferencias clave y se incluyen sugerencias sobre cómo migrar de analytics.js a gtag.js.

Introducción

El código de seguimiento analytics.js utiliza (1) sistemas de seguimiento para enviar datos a Google Analytics y (2) tipos de hit para especificar los tipos de datos.

A diferencia de analytics.js, gtag.js no usa sistemas de seguimiento para enviar datos a Google Analytics, sino que envía datos a las propiedades de Google Analytics identificadas con sus ID de seguimiento, los cuales se especifican en el comando config. Los nombres de eventos que se proporcionan a gtag.js especifican los tipos de datos que se envían a Google Analytics.

Para migrar de analytics.js a gtag.js, realiza estos pasos en cada una de las páginas de tu sitio web:

Reemplazar el fragmento de seguimiento de analytics.js por el fragmento global de gtag.js

Localiza el fragmento de seguimiento de analytics.js de tu página web:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

A continuación, reemplázalo por el siguiente fragmento global de gtag.js:

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<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');
</script>

Reemplaza GA_TRACKING_ID por tu ID de seguimiento.

Hacer el seguimiento de páginas vistas

Para enviar páginas vistas a Google Analytics, analytics.js utiliza sistemas de seguimiento. Los sistemas de seguimiento tienen el ID de seguimiento de una propiedad de Google Analytics. El código de seguimiento de gtag.js envía páginas vistas a una propiedad de Google Analytics identificada mediante el parámetro GA_TRACKING_ID, el cual se especifica en el comando config.

Hacer el seguimiento de páginas visitas con el sistema de seguimiento predeterminado

Retira el siguiente código de analytics.js que utiliza el sistema de seguimiento predeterminado para enviar páginas vistas a Google Analytics con el comando send:

// Creates the default tracker.
ga('create', 'GA_TRACKING_ID', 'auto');

// Uses the default tracker to send a pageview to the
// Google Analytics property with tracking ID GA_TRACKING_ID.
ga('send', 'pageview');

El siguiente código del fragmento de seguimiento global de gtag.js permite enviar automáticamente una página vista a la propiedad de Google Analytics que tiene el ID de seguimiento GA_TRACKING_ID:

gtag('config', 'GA_TRACKING_ID');

Hacer el seguimiento de páginas vistas con sistemas de seguimiento especificados

Localiza el siguiente código de analytics.js que usa el sistema de seguimiento especificado para enviar páginas vistas a Google Analytics:

ga('create', 'GA_TRACKING_ID', 'auto', 'trackerName');
ga('trackerName.send', 'pageview');

A continuación, reemplázalo por el siguiente comando de gtag.js event:

gtag('event', 'page_view', { 'send_to': 'GA_TRACKING_ID' });

Hacer el seguimiento de eventos

Tal y como se ha mencionado anteriormente, analytics.js utiliza sistemas de seguimiento para enviar eventos a Google Analytics. Los sistemas de seguimiento tienen el ID de seguimiento de una propiedad de Google Analytics. Por el contrario, gtag.js envía eventos a una propiedad de Google Analytics identificada mediante el parámetro GA_TRACKING_ID, el cual se especifica en el comando config.

Hacer el seguimiento de eventos con el sistema de seguimiento predeterminado

Localiza el siguiente código de analytics.js que usa el sistema de seguimiento predeterminado para enviar eventos a Google Analytics con el comando send:

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

A continuación, reemplázalo por el siguiente comando event de gtag.js:

gtag('event', eventName, eventParameters);

En este comando, eventName es el nombre del evento que quieres registrar.

Ejemplo:

analytic.js:

// Creates the default tracker.
ga('create', 'GA_TRACKING_ID', 'auto');

// Uses the default tracker to send the event to the
// Google Analytics property with tracking ID GA_TRACKING_ID.
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

gtag.js:

// Sends the event to the Google Analytics property with
// tracking ID GA_TRACKING_ID set by the config command in
// the global tracking snippet.
gtag('event', 'play', {
  'event_category': 'Videos',
  'event_label': 'Fall Campaign'
});

Hacer el seguimiento de eventos con sistemas de seguimiento especificados

Localiza el siguiente código de analytics.js que usa el sistema de seguimiento especificado para enviar eventos a Google Analytics:

ga('create', 'GA_TRACKING_ID', 'auto', 'trackerName');
ga('trackerName.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

A continuación, reemplázalo por el siguiente comando event de gtag.js:

gtag('event', eventName, {
  'send_to': 'GA_TRACKING_ID',
  'parameter1': 'value1',
  'parameter2': 'value2',
  // ...
});

Ejemplo:

analytics.js:

// Creates a tracker named clientTracker.
ga('create', 'GA_TRACKING_ID', 'auto', 'clientTracker');

// Uses tracker clientTracker to send the event to the
// Google Analytics property with tracking ID GA_TRACKING_ID.
ga('clientTracker.send', 'event', 'Videos', 'play', 'Fall Campaign');

gtag.js:

// Send the event to the Google Analytics property
// with tracking ID GA_TRACKING_ID.
gtag('event', 'play', {
  'send_to': 'GA_TRACKING_ID',
  'event_category': 'Videos',
  'event_label': 'Fall Campaign'
});

Enviar dimensiones y métricas personalizadas

Localiza en tus páginas web los comandos send de analytics.js que envíen dimensiones personalizadas a Google Analytics:

ga('send', 'hitType', { 'dimension<Index>':  'dimension_value'});

A continuación, reemplázalos por el siguiente código de gtag.js:

gtag('config', 'GA_TRACKING_ID', {
  'custom_map': {'dimension<Index>': 'dimension_name'}
});
gtag('event', 'any_event_name', {'dimension_name': 'dimension_value'});

Reemplaza GA_TRACKING_ID por tu ID de seguimiento.

Localiza en tus páginas web los comandos send de analytics.js que envíen métricas personalizadas a Google Analytics:

ga('send', 'hitType', { 'metric<Index>':  'metric_value'});

A continuación, reemplázalos por el siguiente código de gtag.js:

gtag('config', 'GA_TRACKING_ID', {
  'custom_map': {'metric<Index>': 'metric_name'}
});
gtag('event', 'any_event_name', {'metric_name': 'metric_value'});

Reemplaza GA_TRACKING_ID por tu ID de seguimiento.

Hacer el seguimiento de los tiempos de usuario

Localiza en tus páginas web los comandos send de analytics.js que hagan el seguimiento de los tiempos de usuario:

ga('send', 'timing', 'timingCategory', 'timingVar', timingValue, 'timingLabel');

A continuación, reemplázalos por el siguiente comando gtag.js event:

gtag('event', 'timing_complete', {
  'name': 'timingVar',
  'value': timingValue,
  'event_category': 'timingCategory',
  'event_label': 'timingLabel'
});

Hacer el seguimiento de excepciones

Localiza en tus páginas web los comandos send de analytics.js que hagan el seguimiento de excepciones:

ga('send', 'exception', {
  'exDescription': 'error_message',
  'exFatal': false  // set to true if the exception is fatal
});

A continuación, reemplázalos por el siguiente comando event de gtag.js:

gtag('event', 'exception', {
  'description': 'error_message',
  'fatal': false  // set to true if the exception is fatal
});

Asignar campos de analytics.js a parámetros de gtag.js

En las tablas siguientes, los campos de analytics.js se asignan a los parámetros de gtag.js correspondientes.

Eventos

Campo de analytics.js Parámetro de gtag.js
eventAction event_action
eventCategory event_category
eventLabel event_label
eventValue value

Métricas y dimensiones personalizadas

Campo de analytics.js Parámetro de gtag.js
dimension<Index> dimension<Index>
metric<Index> metric<Index>

En esta tabla, <Index> es un número entero positivo que representa el índice de la dimensión o métrica personalizadas.

Tiempos de usuario

Campo de analytics.js Parámetro de gtag.js
timingCategory event_category
timingLabel event_label
timingValue value
timingVar name

Hacer el seguimiento de excepciones

Campo de analytics.js Parámetro de gtag.js
exDescription description
exFatal fatal

Datos de acción de comercio electrónico mejorado

Campo de analytics.js Parámetro de gtag.js
id transaction_id
affiliation affiliation
revenue value
tax tax
shipping shipping
coupon coupon
list list_name
step checkout_step
option checkout_option

Datos de promoción

Campo de analytics.js Parámetro de gtag.js
creative creative_name
position (impresión, producto) list_position
position (promoción) creative_slot

Acciones de producción y promoción

Campo de analytics.js gtag.js eventName
add add_to_cart
checkout (primer paso) begin_checkout
checkout (cualquier paso posterior) checkout_progress
checkout_option set_checkout_option
click select_content (sin promociones)
detail view_item
promo_click select_content (con promociones)
purchase purchase
refund refund
remove remove_from_cart

ID de cliente e ID de usuario

Campo de analytics.js Parámetro de gtag.js
clientId client_id
userId user_id