Passer d'analytics.js à gtag.js (Universal Analytics)

Ce guide vous explique comment migrer une implémentation Universal Analytics analytics.js existante pour utiliser gtag.js.

Présentation

analytics.js dispose de deux mécanismes principaux pour envoyer des données à Google Analytics:

  1. coach électronique

    Les traceurs spécifient la propriété que vous mesurez.

  2. types d'appels

    Les types d'appels spécifient le type d'interaction que vous mesurez.

Dans gtag.js, les propriétés sont spécifiées via la commande config ou en tant que paramètre d'une commande.

Contrairement à analytics.js, gtag.js n'utilise pas d'outils de suivi pour envoyer des données à Google Analytics. Elle envoie des données aux propriétés Google Analytics identifiées par leur ID défini par la commande config. Les noms d'événements fournis à gtag.js spécifient les types de données envoyés à Google Analytics.

Pour migrer d'analytics.js vers gtag.js, procédez comme suit pour chaque page Web de votre site:

Remplacer l'extrait analytics.js par l'extrait gtag.js

Remplacez l'extrait analytics.js dans votre page 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 -->

par l'extrait gtag.js suivant:

<!-- 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>

Mesurer les pages vues

analytics.js utilise des outils de suivi pour envoyer les pages vues à Google Analytics. Un outil de suivi possède l'ID de mesure d'une propriété Google Analytics. gtag.js envoie les pages vues à une propriété Google Analytics identifiée par l'élément TAG_ID spécifié dans une commande config.

Mesurer les pages vues avec l'outil de suivi par défaut

Supprimez le code analytics.js suivant, qui utilise l'outil de suivi par défaut pour send les pages vues dans Google Analytics:

// 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');

Le code suivant de l'extrait gtag.js envoie automatiquement une page vue à la propriété Google Analytics avec l'ID de balise TAG_ID:

gtag('config', 'TAG_ID');

Mesurer les pages vues avec les outils de suivi spécifiés

Remplacez le code analytics.js suivant, qui utilise l'outil de suivi spécifié pour envoyer des pages vues à Google Analytics:

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

à l'aide de la commande gtag.js event suivante:

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

Mesurer des événements

Comme indiqué précédemment, analytics.js utilise des outils de suivi pour envoyer des événements à Google Analytics. Un outil de suivi possède l'ID de suivi d'une propriété Google Analytics. En revanche, gtag.js envoie des événements à une propriété Google Analytics identifiée par le paramètre TAG_ID spécifié dans une commande config.

Mesurer des événements avec l'outil de suivi par défaut

Remplacez le code analytics.js suivant, qui utilise l'outil de suivi par défaut pour les événements send dans Google Analytics:

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

à l'aide de la commande event gtag.js suivante:

gtag('event', eventName, eventParameters);

eventName est le nom de l'événement que vous souhaitez consigner.

Exemple :

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'
});

Mesurer des événements avec des outils de suivi spécifiés

Remplacez le code analytics.js suivant, qui utilise l'outil de suivi spécifié pour envoyer des événements à Google Analytics:

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

à l'aide de la commande gtag.js event suivante:

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

Exemple :

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'
});

Envoyer des dimensions et des métriques personnalisées

Remplacez toute commande send analytics.js qui envoie des dimensions personnalisées à Google Analytics dans vos pages Web:

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

à l'aide du code gtag.js suivant:

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

Remplacez TAG_ID par votre propre ID Analytics.

Remplacez les commandes send analytics.js qui envoient des métriques personnalisées à Google Analytics dans vos pages Web:

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

à l'aide du code gtag.js suivant:

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

Remplacez TAG_ID par l'ID de votre balise.

Mesurer les temps utilisateur

Remplacez les commandes send analytics.js qui suivent le temps utilisateur dans vos pages Web:

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

à l'aide de la commande gtag.js event suivante:

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

Mesurer les exceptions

Remplacez les commandes send analytics.js qui suivent les exceptions dans vos pages Web:

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

à l'aide de la commande event gtag.js suivante:

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

Mapper les champs analytics.js sur les paramètres gtag.js

Les tableaux suivants mappent les champs analytics.js aux paramètres gtag.js correspondants.

Événements

Champ analytics.js Paramètre gtag.js
eventAction event_action
eventCategory event_category
eventLabel event_label
eventValue value

Dimensions et métriques personnalisées

Champ analytics.js Paramètre gtag.js
dimension<Index> dimension<Index>
metric<Index> metric<Index>

<Index> est un entier non négatif représentant l'index de la dimension ou de la métrique personnalisée.

Temps utilisateur

Champ analytics.js Paramètre gtag.js
timingCategory event_category
timingLabel event_label
timingValue value
timingVar name

Mesure des exceptions

Champ analytics.js Paramètre gtag.js
exDescription description
exFatal fatal

Données sur les actions d'e-commerce amélioré

Champ analytics.js Paramètre gtag.js
id transaction_id
affiliation affiliation
revenue value
tax tax
shipping shipping
coupon coupon
list list_name
step checkout_step
option checkout_option

Données des promotions

Champ analytics.js Paramètre gtag.js
creative creative_name
position (impression, produit) list_position
position (promotion) creative_slot

Actions liées aux produits et aux promotions

Champ analytics.js Événement gtag.js
add add_to_cart
checkout (première étape) begin_checkout
checkout (toute étape ultérieure) checkout_progress
checkout_option set_checkout_option
click select_content (sans promotions)
detail view_item
promo_click select_content (avec promotions)
purchase purchase
refund refund
remove remove_from_cart

Client-ID et User-ID

Champ analytics.js Paramètre gtag.js
clientId client_id
userId user_id