Suivi inter-domaines Iframe dans Google Tag Manager

REMARQUE! Cette solution a été mise à jour et la nouvelle approche peut être trouvée ici.

Si vous n’êtes pas familier avec le jargon, le suivi inter-domaines est un hack utilisé par Google Analytics pour contourner la politique de même origine du navigateur Web. Essentiellement, la politique stipule que les cookies du navigateur ne peuvent être partagés qu’avec un domaine parent et tous ses sous-domaines. En d’autres termes, domaineA.com et domaineB.com ne partagez pas les cookies.

Étant donné que Google Analytics calcule les sessions et les utilisateurs à l’aide d’un cookie, cela pose problème. Si l’utilisateur navigue de domaineA.com à domaineB.com, il parcourra par défaut domaineB.com dans une session différente (souvent un utilisateur différent également) de celle sur domaineA.com.

Il existe d’excellents guides pour la mise en œuvre du suivi inter-domaines, et je tiens à souligner l’article Bounteous ainsi que le didacticiel Knewledge. Tous deux ont une excellente couverture de ce sujet difficile, et Knewledge a consacré beaucoup de mots pour iframe suivi également.

Dans cet article, je souhaite revenir sur le suivi des iframes et mettre à jour la méthode vers GTM V2. Nous utiliserons le hitCallback pour décorer correctement l’iframe avec des paramètres de suivi inter-domaines, afin de garantir que tout suivi effectué à l’intérieur est attribué à la session (et à l’utilisateur) d’origine.

Note rapide sur le suivi des sous-domaines

N’oubliez pas que le suivi de plusieurs domaines s’applique uniquement pour séparer les domaines parents. Si vous souhaitez suivre le trafic sur les sous-domaines, vous pas besoin de suivi inter-domaines. Au lieu de cela, vous avez juste besoin du cookieDomain champ défini dans vos balises et vous êtes prêt à partir. Heureusement, un visionnaire a déjà écrit un guide simple à ce sujet.

Variable JavaScript personnalisée

Pour que tout fonctionne, tout ce dont vous aurez besoin est une variable JavaScript personnalisée. Eh bien, et un simple ajustement à votre balise de vue de page. Et quelques tests. Et bonne chance. Mais de toute façon, la variable JavaScript personnalisée est ce qui corrige tout ensemble.

Nous utiliserons la variable dans le hitCallback champ de la toute première balise qui se déclenche sur votre site (devrait être la balise de vue de page). Cette fonction de rappel rechargera n’importe quel iframe de votre choix avec les paramètres de l’éditeur de liens, ce qui signifie que les balises de l’iframe fonctionneront correctement dans le cadre de la session en cours.

Paramètre de l’éditeur de liens est essentiellement l’ID client unique de votre navigateur (avec quelques autres éléments), attaché en tant que paramètre de requête à l’iframe src évaluer. Ceci est ensuite récupéré par le tracker dans l’iframe et utilisé pour recréer le _Géorgie cookie dans l’iframe. C’est ainsi que fonctionne le hack inter-domaines de Google Analytics !

Donc, pour commencer, créez une nouvelle variable JavaScript personnalisée et nommez-la intelligemment. j’ai utilisé {{JS – hitCallback pour X-Dom iframe}}, mais vous pouvez utiliser quelque chose de moins poétique si vous le souhaitez. Voici à quoi ça ressemble :

function() {   return function() {     try {        var gobj = window[window.GoogleAnalyticsObject];       var iframe = document.querySelector('#myIframe');       var tracker, linker;       if (gobj) {         tracker = gobj.getAll()[0];         linker = new window.gaplugins.Linker(tracker);         iframe.src = linker.decorate(iframe.src);       }     } catch(e) {}   } } 

Alors, il est temps pour une procédure pas à pas ligne par ligne.

function() { ... } 

Sur la première ligne, vous déclarez une fonction JavaScript GTM de base, qui doit être une fonction anonyme. Rien de spécial ici, passons à autre chose.

return function() { ... } 

Ensuite, vous êtes retour une autre fonction, comme hitCallback nécessite une fonction en tant que paramètre pour qu’il fonctionne correctement. De plus, en renvoyant une fonction, nous évitons les effets secondaires non sollicités qui se produiraient si vous venez d’exécuter des méthodes DOM globales dans la fonction externe. Puisque nous opérons dans une fermeture, nous restreignons l’exécution de cette fonction à la seule fois où elle est appelée, c’est-à-dire lorsque le hitCallback est exécuté à la fin du processus d’envoi de la charge utile de Google Analytics.

try { ... } catch(e) {} 

Nous enveloppons le code avec un try...catch parce que c’est simplement une bonne pratique. Vous pouvez ajouter du code de débogage dans le catch(e) {} bloquer si vous le souhaitez, mais je le laisse généralement grésiller en silence.

var gobj = window[window.GoogleAnalyticsObject]; var iframe = document.querySelector('#myIframe'); var tracker, linker; 

Les trois lignes suivantes configurent certaines variables. Tout d’abord, nous fixons gobj au nom global de la fonction Google Analytics. Ceci est encore une fois une bonne pratique, car il y a des cas où vous voulez changer le nom de la fonction de ga à autre chose. Avec ce one-liner, nous nous assurons que nous nous référons toujours au bon objet.

La ligne suivante est importante. C’est ici que vous allez récupérer l’élément iframe que vous souhaitez modifier. J’utilise un simple sélecteur CSS pour trouver mon iframe (un élément avec l’ID myIframe), alors n’oubliez pas de le modifier pour refléter ce que vous souhaitez cibler. Vous pouvez exécuter ce code sur plusieurs iframes si vous le souhaitez. Il vous suffit de parcourir chaque iframe et d’exécuter le linker.decorate() méthode sur chacun.

Nous déclarons également tracker et linker en tant que variables utilitaires, que nous utiliserons dans un instant.

if (gobj) {   tracker = gobj.getAll()[0];   linker = new window.gaplugins.Linker(tracker);   iframe.src = linker.decorate(iframe.src); } 

La dernière partie du code est l’endroit où la magie opère. La vérification de l’existence de l’objet global Google Analytics n’est qu’une autre bonne pratique que vous voudrez peut-être utiliser.

Ensuite, nous initialisons tracker avec le premier tracker Google Analytics créé sur la page. Comme je l’ai mentionné précédemment, cela devrait idéalement être le tracker créé par votre balise de vue de page. Nous utilisons le getAll() appel de fonction pour récupérer tous les trackers créés sur la page, puis choisissez le premier avec [0].

Sur la ligne suivante, nous utilisons Google Analytics Linker plugin, en l’initialisant avec le tracker récupéré. Ce plugin est ce que nous allons utiliser pour décorer l’iframe src avec les paramètres inter-domaines corrects. Le plugin a une méthode utilitaire decoratequi prend une chaîne d’URL comme paramètre.

En d’autres termes, vous mettez à jour l’iframe src valeur avec un décoré URL, et cette décoration ajoute en fait les paramètres interdomaines corrects à l’URL.

Une fois que vous avez écrit tout ce code, n’oubliez pas de sauvegarder la Variable.

Enfin, vous devez ajouter cette nouvelle variable dans le hitCallback champ de votre balise de vue de page.

Alors, ouvrez le tag, naviguez jusqu’à Plus de réglages -> Champs à définiret ajoutez un nouveau champ :

On y va ! Nous avons maintenant réussi à préparer le terrain pour l’un des événements les plus spectaculaires de la nature… Désolé, j’ai trop regardé la planète Terre.

Que va-t-il se passer

Voici le processus de ce qui se passe lors de votre prochaine navigation sur le site :

1. La balise de vue de page se déclenche et, une fois terminée, sa hitCallback le champ est exécuté

2. Étant donné que ce champ a renvoyé notre fonction personnalisée, le code qu’il contient est exécuté

3. Ce code prend le tracker qui vient d’être créé, et décore la ou les iframe(s) de votre choix avec des paramètres de suivi inter-domaines

4. L’iframe se rechargera (parce que son src valeur modifiée) avec les paramètres de suivi inter-domaines

De quoi d’autre aurez-vous besoin

Désormais, toutes les balises qui se déclenchent dans l’iframe doivent avoir le allowLinker : vrai ensemble de champs. Vous pouvez trouver des instructions à ce sujet dans le guide Bounteous, par exemple. Ce petit champ simple garantira que la bibliothèque Universal Analytics recherche les paramètres de suivi inter-domaines dans l’URL et les utilise pour configurer le suivi dans l’iframe.

En d’autres termes, nous avons contourné l’effet paralysant de la politique de même origine sur le partage des cookies en, eh bien, en partageant un cookie évaluer comme paramètre d’URL. La bibliothèque Universal Analytics merveilleusement robuste s’occupe du reste.

Aussi, vous voudrez reporter la balise de vue de page ne se déclenche pas sur la page de destination de l’iframe. Pourquoi? Parce que si vous ne l’avez pas fait, l’iframe pourrait envoyer une vue de page lors de son premier chargement, puis à nouveau lorsque l’iframe est rechargé avec le hack. En empêchant l’iframe de se déclencher sur toute page dont le référent est ne pas l’URL de l’iframe et lorsque la page est dans un iframe, vous éviterez le double ou le triple comptage de vos pages vues dans l’iframe. Pour les vues de page suivantes, vous souhaiterez déclencher la balise, car elle reflète le comportement de navigation réel.

De plus, si vous regardez le didacticiel Knewledge, ils ont une bonne solution pour ne pas charger l’iframe en premier lieu, et ne le charger que lorsque le hitCallback est exécuté (ou s’il y a un problème avec le chargement du JavaScript).

Tout dépend de vous, bien sûr. Le comptage double ou triple n’est pas toujours un problème.

Si vous avez une situation où l’iframe n’est pas dans le DOM à temps, vous devrez peut-être également ajouter un setTimeout dans le hitCallback pour laisser le temps au DOM de se terminer. Cependant, c’est très rare dans mon expérience.

Quoi qu’il en soit, travailler avec des iframes est assez difficile, comme vous pouvez probablement le deviner. Beaucoup de choses auxquelles faire attention.

C’était une transition parfaite vers le dernier chapitre et une diatribe bien méritée.

Résumé

Il s’agissait d’un guide assez simple pour configurer le suivi iframe avec des paramètres inter-domaines. Permettez-moi d’être clair et officiel à propos de quelque chose :

IFRAME SUCK !

Ce sont d’horribles êtres d’horreur souterrains Lovecraftiens qui rampent depuis les profondeurs des ténèbres après le son de la cloche de minuit. Ce sont des tyrans de terrain de jeu; intitulés petits marmots qui font des ravages sur le balisage innocent. Ce sont des artefacts de la paresse humaine, de véritables exemples de la loi de Conway en mouvement. Ce sont, par essence, de petits monstres de merde introuvables qui existent dans le vide entre les sites Web, qui n’ont de compte à rendre à personne et qui sont dangereux pour tous.

Personnellement, je peux attribuer environ 45% de ma perte de cheveux au travail avec des iframes, et ils ont gâché ma journée bien trop de fois pour appeler cela une coïncidence.

Si vous êtes obligé de travailler avec des iframes, le suivi inter-domaines pourrait être le cadet de vos soucis.