Migrar el sistema de medición, de analytics.js a gtag.js (Universal Analytics)

En esta guía, te explicaremos paso a paso cómo migrar a gtag.js una implementación analytics.js de Universal Analytics que ya tengas.

Resumen

analytics.js usa dos mecanismos principales para enviar datos a Google Analytics:

  1. Objetos de seguimiento

    Los objetos de seguimiento especifican la propiedad que quieres medir.

  2. Tipos de hit

    Los tipos de hit especifican qué tipo de interacción quieres medir.

En gtag.js, las propiedades se especifican mediante el comando config o como parámetros de un comando.

A diferencia de analytics.js, gtag.js no usa objetos de seguimiento para enviar datos a Google Analytics, sino que envía datos a las propiedades Google Analytics identificadas con sus IDs, los cuales se especifican con 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 el sistema de medición que utilizas, de analytics.js a gtag.js, sigue estos pasos en cada una de las páginas de tu sitio web:

Sustituir el fragmento de analytics.js por el fragmento de gtag.js

Localiza el fragmento de analytics.js en 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', 'TAG_ID', 'auto');
  ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

A continuación, sustitúyelo por el siguiente fragmento de gtag.js:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Medir vistas de página

analytics.js utiliza objetos de seguimiento para enviar vistas de páginas a Google Analytics. Un objeto de seguimiento tiene el ID de medición de una propiedad de Google Analytics. Por su parte, gtag.js envía vistas de páginas a una propiedad de Google Analytics identificada mediante el parámetro TAG_ID, el cual se especifica mediante el comando config.

Medir vistas de páginas con el objeto de seguimiento predeterminado

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

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

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

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

gtag('config', 'TAG_ID');

Medir vistas de páginas con objetos de seguimiento especificados

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

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

A continuación, sustitúyelo por el siguiente comando event de gtag.js:

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

Medir eventos

Tal y como se menciona arriba, analytics.js utiliza objetos de seguimiento para enviar eventos a Google Analytics. Estos objetos 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 TAG_ID, el cual se especifica en el comando config.

Medir eventos con el objeto de seguimiento predeterminado

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

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

A continuación, sustitúyelo 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:

analytics.js:

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

// Uses the default tracker to send the event to the
// Google Analytics property with a tag ID of `TAG_ID`.
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

gtag.js:

// Sends the event to the Google Analytics property with a
// tag ID of `TAG_ID` set by the config command in
// the gtag.js snippet.
gtag('event', 'play', {
  'event_category': 'Videos',
  'event_label': 'Fall Campaign'
});

Medir eventos con objetos de seguimiento especificados

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

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

A continuación, sustitúyelo por el siguiente comando event de gtag.js:

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

Ejemplo:

analytics.js:

// Creates a tracker named <b>clientTracker</b>.
ga('create', 'TAG_ID', 'auto', 'clientTracker');

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

gtag.js:

// Send the event to the Google Analytics property
// with a tag ID of 'TAG_ID'.
gtag('event', 'play', {
  'send_to': 'TAG_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ían dimensiones personalizadas a Google Analytics:

ga('send', 'hitType', { 'dimension&lt;Index&gt;':  'dimension_value'});

A continuación, sustitúyelos por el siguiente código de gtag.js:

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

Sustituye TAG_ID por tu propio ID de Analytics.

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

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

A continuación, sustitúyelos por el siguiente código de gtag.js:

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

Sustituye TAG_ID por tu ID de etiqueta.

Medir los tiempos de usuario

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

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

A continuación, sustitúyelos por el siguiente comando gtag.js event:

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

Medir excepciones

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

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

A continuación, sustitúyelos por el siguiente comando event de gtag.js:

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

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

Las tablas siguientes muestran los campos de analytics.js y sus 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 no negativo que representa el índice de la dimensión o de la 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

Medición de excepciones

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

Datos de acciones 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 promociones

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 producto y promoción

Campo de analytics.js Evento de gtag.js
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 y User ID

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