Ce qu'est la fonction gtag, comment elle se charge et ce qu'envoie chaque commande

Qu'est-ce que gtag ?

Dans le code d'une page, la fonction gtag est l'API JavaScript de la balise Google : chaque appel à gtag() pousse une commande comme config, event, set ou consent dans une file appelée dataLayer, que la bibliothèque gtag.js lit pour envoyer les données aux produits Google. La référence de Google le résume en une ligne : "The Google tag (gtag.js) API uses the gtag() function to send data to Google products like Google Analytics and Google Ads." Si le code source d'un site charge gtag/js?id=, ce site exécute la balise Google directement dans son propre code, sans passer par un conteneur Tag Manager.

Trois noms se mélangent souvent ici. gtag.js est le fichier de la bibliothèque. gtag() est la fonction que votre code appelle. La balise Google est le nom de produit que Google donne à l'ensemble, qu'il décrit comme "a single tag you can add to your website to use Google measurement and advertising products like Google Ads, Google Analytics, Campaign Manager, Display & Video 360, and Search Ads 360."

Comment gtag.js se charge-t-il sur une page ?

gtag.js se charge via un extrait en deux parties que Google demande de placer "immediately after the opening <head> HTML tag on every page you want to measure." La première partie télécharge la bibliothèque, la seconde définit la fonction gtag() et met en file les premières commandes.

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

L'ordre compte moins qu'il n'y paraît. La bibliothèque se charge avec async, donc le script en ligne s'exécute en premier. Comme gtag() ne fait rien d'autre que dataLayer.push(arguments), chaque commande appelée avant l'arrivée de la bibliothèque attend dans le tableau dataLayer, et gtag.js traite la file une fois chargé. C'est pour cela que vous pouvez appeler gtag('event', ...) n'importe où sur la page sans vérifier si la bibliothèque est prête.

L'id dans l'URL du script est un ID de balise Google. Google donne "GT-XXXXXXXXX, G-XXXXXXXXX, and AW-XXXXXXXXX" comme exemples et précise que "the IDs can be used interchangeably when adding the Google tag to your website." Une seule balise Google peut porter plusieurs ID et envoyer vers plusieurs destinations, comme une propriété Google Analytics et un compte Google Ads.

Que font les commandes gtag() ?

Les commandes gtag() sont cinq verbes, passés chacun en premier argument : config, event, set, get et consent. Le tableau reprend la syntaxe et la formulation de la référence d'API de Google.

config fait plus que ce que sa description laisse entendre. Google indique que "The config command is needed to send data to Google advertisement products," et pour Google Analytics, l'appel config par défaut envoie aussi un événement page_view. Pour l'en empêcher, Google documente send_page_view: false, dont vous avez besoin quand vous envoyez vous-même les pages vues, par exemple dans une application monopage.

set est celle à utiliser avec parcimonie. Google ajoute : "We recommend using config or event commands wherever possible." Les valeurs définies au niveau de l'événement écrasent les valeurs de config, et les valeurs de config écrasent tout ce qui a été défini globalement avec set.

consent accepte deux modes. 'default' fixe l'état de départ avant que le visiteur réponde à votre bannière, et 'update' le modifie après sa réponse. Les quatre paramètres du mode de consentement v2 sont ad_storage, analytics_storage, ad_user_data et ad_personalization ; le guide Google consent mode v2 explique ce qu'apportent les deux signaux les plus récents.

Dans quel ordre les commandes gtag doivent-elles s'exécuter ?

Les commandes gtag s'exécutent dans l'ordre où vous les mettez en file, et trois d'entre elles ne fonctionnent que si elles précèdent le premier appel config ou event.

1. Indicateur d'opt-out. window['ga-disable-MEASUREMENT_ID'] = true "must be set before any calls to gtag() are made, and it must be set on each page for which you want to turn off Analytics."
2. Valeurs de consentement par défaut. Google demande de définir la valeur par défaut de chaque type de consentement "on every page of your site before any commands that send measurement data (such as config or event)." Si votre outil de consentement se charge de façon asynchrone, ajoutez wait_for_update avec une valeur en millisecondes.
3. Paramètres globaux. Les appels set comme allow_google_signals: false passent avant config, pour que le premier hit les porte déjà.
4. config. Un appel par ID de balise.
5. event. Tout le reste ensuite.

Une valeur de consentement par défaut placée après config arrive trop tard pour la première page vue, et c'est l'une des façons les plus discrètes dont un site finit par envoyer des hits qu'il voulait retenir.

Quel est le lien entre gtag, la balise Google et Google Tag Manager ?

gtag.js et Google Tag Manager sont deux façons de déployer la même balise Google : avec gtag.js, vous écrivez les commandes dans le code de la page, et avec Tag Manager, vous les configurez dans une interface web et le script du conteneur, gtm.js, les charge pour vous. Le guide gtag.js de Google indique que "if you're unfamiliar with JavaScript, we recommend using Google Tag Manager instead of gtag.js."

Les deux partagent le dataLayer, donc un site peut faire tourner les deux. Le risque est de tout compter deux fois. Google prévient par exemple que si vous configurez vos balises via Tag Manager, vous ne devez pas activer en plus le suivi automatique de l'historique dans Google Analytics, "as this can lead to double-counting page views." La même logique s'applique à un extrait gtag codé en dur et à une balise Google GTM qui pointent vers le même ID de mesure : chacun envoie son propre page_view. Le guide sur l'impact de Google Tag Manager sur la confidentialité traite l'autre versant de ce choix, à savoir la quantité de code qu'un conteneur permet à d'autres personnes d'ajouter à vos pages.

Pourquoi les bloqueurs de publicité arrêtent-ils gtag ?

Les bloqueurs de publicité arrêtent gtag en bloquant la requête de la bibliothèque sur www.googletagmanager.com ou les hits qu'elle envoie aux points de collecte de Google. Quand la requête du script échoue, gtag() existe toujours, puisque l'extrait en ligne l'a défini, mais rien ne lit jamais la file dataLayer, donc aucune donnée ne quitte la page. Le guide sur les bloqueurs de publicité et la précision des données explique comment cet écart apparaît dans les rapports. Google tag gateway for advertisers sert la balise depuis votre propre domaine, mais la documentation de Google sur la passerelle ne mentionne pas les bloqueurs de publicité.

Comment vérifier ce que gtag envoie ?

Vous vérifiez ce que gtag envoie en observant les requêtes réseau et les outils de débogage de Google, pas en lisant l'extrait. Les guides de Google en utilisent deux : Tag Assistant, qui montre les commandes et les hits produits par chacune, et DebugView dans Google Analytics, qui affiche les événements à leur arrivée une fois le mode débogage activé. Dans le navigateur, filtrez le panneau Network sur les requêtes de collecte et vérifiez que chaque page vue ou événement n'apparaît qu'une fois, avec les paramètres attendus. La checklist de vérification de l'analytics reprend les mêmes contrôles pour n'importe quel tracker.

Comment le script de Flowsery se compare-t-il à gtag ?

Le tracker de Flowsery tient en une balise script avec un ID de site, donc il n'y a aucune file de commandes à configurer avant que les données circulent. Collez <script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script> dans le head et les pages vues sont suivies automatiquement. Les objectifs personnalisés utilisent un attribut data-fs-goal sur l'élément ou un appel comme window.flowsery('signup'), et la documentation de Flowsery montre une petite file d'attente, window.flowsery.q, qui conserve les appels faits avant le chargement du script, le même principe que gtag avec le dataLayer. Le script propose aussi une option sans cookies qui utilise un hash de visiteur renouvelé chaque jour et ne stocke aucune donnée personnelle. Le script léger pèse moins de 10 KB et se charge de façon asynchrone. Si votre équipe gère déjà ses balises dans Google Tag Manager, la documentation de Flowsery inclut une configuration par balise Custom HTML pour GTM, ce qui permet de faire cohabiter les deux pendant une migration.

Questions fréquentes

gtag est-il la même chose que Google Tag Manager ?

Non. gtag.js est la bibliothèque derrière la balise Google, et vous appelez gtag() depuis le code de votre page. Google Tag Manager est un conteneur distinct, chargé via gtm.js, dans lequel les balises se configurent dans une interface web. Les deux peuvent déployer la même balise Google.

Puis-je appeler gtag() avant le chargement de gtag.js ?

Oui. L'extrait en ligne définit gtag() comme une fonction qui pousse ses arguments dans le tableau dataLayer. Les appels faits avant l'arrivée de la bibliothèque attendent dans cette file, et gtag.js les traite dans l'ordre une fois chargé.

Un seul extrait gtag peut-il envoyer des données à Google Analytics et à Google Ads ?

Oui. Une seule balise Google peut se connecter à plusieurs destinations, comme une propriété Google Analytics et un compte Google Ads. Une même balise peut porter plusieurs ID de balise, et Google précise que ces ID sont interchangeables lors de l'ajout de la balise à votre site.

Pourquoi gtag envoie-t-il un page_view sans appel event ?

L'appel config par défaut pour un ID Google Analytics envoie de lui-même un événement page_view. Définissez send_page_view: false si vous voulez envoyer les pages vues manuellement. Sur les sites avec la mesure améliorée, les pages vues basées sur l'historique se déclenchent quand même, sauf si vous désactivez aussi cette option dans le flux de données.

Où placer l'extrait gtag ?

Google demande de le placer juste après la balise <head> d'ouverture sur chaque page à mesurer. Un indicateur d'opt-out se place dans un script avant l'extrait, car Google indique qu'il doit être défini avant tout appel gtag(). Les valeurs de consentement par défaut se placent dans l'extrait, avant l'appel config, car Google indique qu'elles doivent s'exécuter avant toute commande qui envoie des données de mesure.

gtag fonctionne-t-il si le script est bloqué ?

Aucune donnée n'est envoyée. La partie en ligne de l'extrait définit toujours gtag() et remplit le dataLayer, mais sans la bibliothèque gtag.js, rien ne traite cette file. C'est pour cela que les visiteurs bloqués manquent dans Google Analytics au lieu d'y apparaître comme des erreurs.

Quelle est la différence entre gtag.js, gtag() et la balise Google ?

gtag.js est le fichier de la bibliothèque, chargé depuis googletagmanager.com. gtag() est la fonction que votre code appelle pour ajouter des commandes au dataLayer. La balise Google est le nom que Google donne à l'ensemble, une seule balise qui couvre des produits comme Google Ads et Google Analytics.

Quels formats d'ID de balise puis-je utiliser dans l'extrait gtag ?

Google donne GT-XXXXXXXXX, G-XXXXXXXXX et AW-XXXXXXXXX comme exemples et précise que les ID sont interchangeables lorsque vous ajoutez la balise Google à votre site. L'ID se place dans le paramètre id de l'URL du script et dans votre appel config. Une même balise Google peut porter plusieurs ID.

Quand utiliser gtag('set') ?

Utilisez set pour les paramètres qui doivent être associés à chaque événement suivant sur la page. Google recommande config ou event dès que c'est possible. Les valeurs au niveau de l'événement remplacent celles de config, et celles de config remplacent ce qui est défini globalement. Si vous utilisez set, placez-le avant config pour que le premier hit porte déjà ces valeurs.

Comment désactiver Google Analytics avec un indicateur de refus gtag ?

Définissez window['ga-disable-MEASUREMENT_ID'] = true sur la page. Selon Google, il doit être défini avant tout appel à gtag(), et sur chaque page où vous voulez désactiver Analytics.