Cette page explique comment utiliser des commandes gtag.js pour envoyer des données de votre site à Google Analytics.
Envoyer des données avec la commande event
Une fois que vous avez ajouté l'extrait global à une page Web, envoyez des données à Google Analytics à l'aide de la commande event. Par exemple, utilisez la commande event suivante pour indiquer qu'un utilisateur s'est connecté à l'aide de son compte Google:
gtag('event', 'login', {'method': 'Google'});
Pour en savoir plus sur la commande event, consultez la documentation de référence de l'API.
Acheminer des données vers des groupes et des propriétés
Vous pouvez envoyer un ensemble d'informations de mesure à un ou plusieurs ID de propriété Google Analytics, et un autre ensemble d'informations à d'autres ID de propriété. Vous pouvez organiser les propriétés en groupes et y acheminer les données.
Par exemple, l'exemple de code suivant montre comment acheminer un événement sign_in vers une "agence" de groupe qui inclut deux propriétés Google Analytics.
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
Découvrez comment regrouper et acheminer des données.
Savoir quand un événement a été envoyé
Dans certains cas, vous avez besoin de savoir quand un événement a bien été envoyé à Google Analytics afin de pouvoir agir immédiatement après. Cette situation est courante lorsque vous devez enregistrer une interaction particulière qui redirige l'utilisateur vers une autre page. De nombreux navigateurs cessent d'exécuter JavaScript dès que la page suivante commence à se charger. Par conséquent, vos commandes event gtag.js risquent de ne jamais s'exécuter.
Par exemple, vous pouvez envoyer un événement à Google Analytics pour enregistrer qu'un utilisateur a cliqué sur le bouton d'envoi d'un formulaire. Dans la plupart des cas, le fait de cliquer sur le bouton "Envoyer" lance immédiatement le chargement de la page suivante avant que les commandes event puissent s'exécuter.
La solution consiste à intercepter l'événement pour arrêter le chargement de la page suivante, afin de pouvoir envoyer l'événement à Google Analytics. Une fois l'événement envoyé, envoyez le formulaire par programmation.
Implémenter des fonctions de rappel d'événements
Vous pouvez implémenter une fonction de rappel d'événement qui est appelée dès qu'un événement a été envoyé avec succès.
L'exemple suivant montre comment annuler l'action d'envoi par défaut d'un formulaire, envoyer un événement à Google Analytics, puis renvoyer le formulaire à l'aide de la fonction de rappel d'événement:
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
Gérer les délais avant expiration
L'exemple ci-dessus présente un inconvénient: si la bibliothèque gtag.js ne se charge pas, la fonction de rappel d'événement ne s'exécutera jamais et les utilisateurs ne pourront jamais envoyer le formulaire.
Chaque fois que vous placez une fonctionnalité critique du site dans la fonction de rappel d'événement, vous devez toujours utiliser une fonction de délai avant expiration pour gérer les cas d'échec du chargement de la bibliothèque gtag.js.
L'exemple suivant améliore le code ci-dessus de manière à utiliser un délai avant expiration. Si une seconde s'écoule après que l'utilisateur a cliqué sur le bouton d'envoi et que la fonction de rappel d'événement n'a pas été exécutée, le formulaire est quand même renvoyé.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call submitForm after one second.
setTimeout(submitForm, 1000);
// Monitors whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where the event callback function fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': submitForm
});
});
Si vous utilisez le schéma ci-dessus sur l'ensemble de votre site, créez une fonction utilitaire pour gérer les délais d'inactivité.
La fonction utilitaire suivante accepte une fonction en entrée et en renvoie une nouvelle. Si la fonction renvoyée est appelée avant le délai d'expiration (le délai par défaut est d'une seconde), le délai est effacé et la fonction d'entrée est appelée. Si la fonction renvoyée n'est pas appelée avant le délai d'expiration, la fonction d'entrée est appelée indépendamment.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Vous pouvez désormais encapsuler toutes les fonctions de rappel d'événements avec un délai avant expiration afin de vous assurer que votre site fonctionne comme prévu, même si l'envoi de vos événements échoue ou si la bibliothèque gtag.js ne se charge jamais.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
Spécifier différents mécanismes de transport
Par défaut, gtag.js choisit la méthode HTTPS et le mécanisme de transport avec lesquels envoyer des appels de manière optimale. Les trois options sont les suivantes:
- "image" (avec un objet
Image) - "xhr" (utilise un objet
XMLHttpRequest) - "balise" (utilise la méthode
navigator.sendBeacon) ;
Les deux premières méthodes présentent le même problème que celui décrit dans la section précédente, à savoir que les appels ne sont pas envoyés lorsque la page est déchargée. La méthode navigator.sendBeacon résout ce problème en transmettant les appels de manière asynchrone au serveur Web sans avoir à définir un rappel d'appel.
Le code suivant définit le mécanisme de transport sur 'beacon' pour les navigateurs compatibles:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});