Ce guide explique comment mesurer des événements sur plusieurs domaines à l'aide d'analytics.js.
Présentation
La bibliothèque analytics.js utilise un ID client unique pour déterminer si un utilisateur est nouveau ou connu. Un utilisateur est considéré comme connu si un appel avec un ID client correspondant a déjà été envoyé à la même propriété.
Par défaut, l'ID client est stocké dans les cookies du navigateur, ce qui signifie qu'il n'est accessible qu'aux pages du même domaine. Pour effectuer le suivi du même Client-ID pour un utilisateur donné sur plusieurs domaines, utilisez le suivi de plusieurs domaines.
Pour partager un ID client entre plusieurs domaines, vous pouvez l'ajouter en tant que paramètre de requête aux URL qui pointent du domaine actuel (le domaine source) vers le domaine de destination que vous souhaitez mesurer. Lorsqu'un utilisateur clique sur un lien ou envoie un formulaire dans le domaine source et accède au domaine de destination, le code de la page de destination peut accéder à l'ID client en le lisant à partir de l'URL.
Obtenir l'ID client sur le domaine source
Pour récupérer un ID client sur le domaine source, utilisez la méthode get:
ga(function(tracker) {
var clientId = tracker.get('clientId');
});
Une fois que vous disposez de l'ID client sur le domaine source, vous pouvez l'ajouter aux liens qui pointent vers le domaine de destination.
<a href="https://destination.com/?clientId=XXXXXX">destination.com</a>
Définir l'ID client sur le domaine de destination
Vous pouvez indiquer à un objet de suivi du domaine de destination l'ID client à utiliser en spécifiant le champ "ID client" dans la commande create:
ga('create', 'UA-XXXXX-Y', 'auto', {
'clientId': getClientIdFromUrl()
});
Si un ID client existe déjà dans le domaine de destination, cette méthode l'écrasera.
Détecter le partage d'URL
La transmission de l'ID client dans une URL peut poser problème lorsque les utilisateurs partagent des URL. Il est donc possible qu'un utilisateur partage une URL contenant un ID client appartenant à quelqu'un d'autre.
Pour éviter ce problème, vous pouvez ajouter un code temporel à l'ID client. Cela vous permet de détecter la date de création initiale de l'URL et, si trop de temps s'est écoulé, de considérer l'ID client comme non valide. En plus de l'horodatage, vous pouvez ajouter la chaîne user-agent ou d'autres métadonnées spécifiques au navigateur ou à l'appareil. Ensuite, sur le domaine de destination, si les métadonnées ne correspondent pas, vous saurez que l'ID client provient d'une autre personne.
Ignorer la comptabilisation de votre site en tant que site référent
Une campagne de sites référents est créée chaque fois que l'URL de provenance du document d'une page provient d'un nom d'hôte qui ne correspond à aucune des entrées de la liste d'exclusion de sites référents pour votre propriété.
Par défaut, la liste d'exclusion de sites référents n'inclut que le domaine que vous avez indiqué lors de la création de la propriété. Pour empêcher la génération de nouvelles campagnes de sites référents lorsque les utilisateurs passent d'un domaine à l'autre, vous devez ajouter une entrée pour chaque domaine que vous souhaitez mesurer dans la liste d'exclusion de sites référents.
Cadres iFrame
La technique décrite ci-dessus nécessite un code JavaScript qui s'exécute après le chargement d'analytics.js. Étant donné que les éléments <iframe> existent généralement sur la page avant le chargement d'analytics.js, il n'est généralement pas possible d'ajouter l'ID client à l'URL dans le paramètre source de l'iFrame.
Pour résoudre ce problème, vous pouvez configurer la page dans l'iFrame de manière à retarder la création de son outil de suivi jusqu'à ce qu'elle ait reçu les données d'ID client de la page parente. Enfin, sur la page parente, vous le configurez pour envoyer l'ID client à la page iFrame avec postMessage.
Voici un exemple de code de la page parente sur source.com:
<iframe id="destination-frame" src="https://destination.com"></iframe>
<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga(function(tracker) {
// Gets the client ID of the default tracker.
var clientId = tracker.get('clientId');
// Gets a reference to the window object of the destionation iframe.
var frameWindow = document.getElementById('destination-frame').contentWindow;
// Sends the client ID to the window inside the destination frame.
frameWindow.postMessage(clientId, 'https://destination.com');
});
</script>
Et voici le code qui recevra le message dans l'iFrame hébergé sur destination.com:
window.addEventListener('message', function(event) {
// Ignores messages from untrusted domains.
if (event.origin != 'https://destination.com') return;
ga('create', 'UA-XXXXX-Y', 'auto', {
clientId: event.data
});
});
Il est possible que analytics.js ne se charge pas sur la page parente, et que la page dans l'iFrame ne reçoive jamais l'ID client. La gestion de ce cas dépend de l'importance que les ID client correspondent.
Si vous souhaitez ne capturer des données que lorsque vous savez que les ID client sont identiques, le code ci-dessus est suffisant. Si vous souhaitez capturer des données sur la page dans le cadre, qu'elle ait ou non reçu l'ID client de la page parente, vous devez ajouter une création de remplacement.
Le code suivant utilise un délai avant expiration sur la page dans l'iFrame pour gérer les cas où la page parente est lente ou ne parvient pas à envoyer l'ID client:
// Stores whether or not the tracker has been created.
var trackerCreated = false;
function createTracker(opt_clientId) {
if (!trackerCreated) {
var fields = {};
if (opt_clientId) {
fields.clientId = opt_clientId;
}
ga('create', 'UA-XXXXX-Y', 'auto', fields);
trackerCreated = true;
}
}
window.addEventListener('message', function(event) {
// Ignores messages from untrusted domains.
if (event.origin != 'https://destination.com') return;
// Creates the tracker with the data from the parent page.
createTracker(event.data);
});
// Waits for three seconds to receive the client ID from the parent page.
// If that doesn't happen, it creates the tracker as normal.
setTimeout(createTracker, 3000);