**Dernière mise à jour 18 septembre 2020: En raison de la façon dont la plupart des navigateurs disposent désormais de protections contre les cookies tiers, cette solution sera très inefficace à l’avenir. Vous devriez plutôt jeter un œil à une solution sans cookie.
Il y a quelques années, j’ai écrit un article sur la façon de suivre les iframes inter-domaines lors de l’utilisation de Google Tag Manager et de Google Analytics. Cette solution reposait sur hitCallback pour décorer l’iframe, et maintenant que j’y repense, il a ses défauts.
D’une part, l’ancienne solution utilisée hitCallback qui, tout en étant fiable dans la mesure où Google Analytics a définitivement chargé le plug-in de l’éditeur de liens lorsque la méthode est appelée, ne prend pas en compte la condition de concurrence possible du script exécuté avant le chargement de l’iframe.
Un problème supplémentaire était que l’ancienne solution récupérait simplement l’éditeur de liens du premier objet de suivi Google Analytics sur la page. Mais ce n’est peut-être pas celui que nous voulons utiliser pour le suivi inter-domaines.
Dans cette solution, nous utiliserons le merveilleux customTask pour décorer l’iframe cible. Les customTask tire parti d’un setInterval() script qui interroge la page périodiquement jusqu’à ce que l’iframe cible soit trouvé ou qu’un délai d’attente soit atteint.
Naturellement, ce script a été ajouté à mon outil customTask Builder.
La customTask elle-même
C’est ce que le customTask ressemble à. Pour le déployer, assurez-vous de lire les instructions de l’outil customTask Builder avant de copier-coller le code requis dans votre page JavaScript (si vous utilisez l’extrait de page Universal Analytics) ou une variable JavaScript personnalisée (si vous utilisez Google Tag Manager).
function() { var iframeDecorator = { selector: 'iframe#decorateMe', attempts: 10, intervalMs: 1000, useAnchor: false }; // DO NOT EDIT ANYTHING BELOW THIS LINE var globalSendHitTaskName = '_ga_originalSendHitTask'; return function(customTaskModel) { window[globalSendHitTaskName] = window[globalSendHitTaskName] || customTaskModel.get('sendHitTask'); var tempFieldObject, dimensionIndex, count, ga, tracker, decorateTimer, decorateIframe, iframe; if (typeof iframeDecorator === 'object' && typeof iframeDecorator.selector === 'string' && typeof iframeDecorator.attempts === 'number' && typeof iframeDecorator.intervalMs === 'number') { count = 0; ga = window[window['GoogleAnalyticsObject']]; tracker = ga.getByName(customTaskModel.get('name')); decorateIframe = function() { iframe = document.querySelector(iframeDecorator.selector); if (iframe !== null && /[?&]_ga=/.test(iframe.src)) { window.clearInterval(decorateTimer); return; } if (iframe === null) { count += 1; if (count === iframeDecorator.attempts) { window.clearInterval(decorateTimer); } return; } window.clearInterval(decorateTimer); iframe.src = (new window.gaplugins.Linker(tracker)).decorate(iframe.src, iframeDecorator.useAnchor); }; decorateTimer = window.setInterval(decorateIframe, iframeDecorator.intervalMs); } }; } Pour commencer, assurez-vous de modifier l’objet de configuration iframeDecorator. Réglez les paramètres sur leurs valeurs correctes.
| Paramètre | Exemple de valeur | La description |
|---|---|---|
| sélecteur | "#decorateMe" | Chaîne avec le sélecteur CSS qui correspond à l’iframe que vous souhaitez décorer. |
| tentatives | 10 | Nombre indiquant combien de fois la page est interrogée pour l’iframe jusqu’à ce que le script arrête d’essayer. |
| intervalleMs | 1000 | Millisecondes entre chaque tentative de recherche de l’iframe sur la page. |
| utiliserAncre | false | S’il faut utiliser un hachage (#) au lieu d’un paramètre de requête d’URL pour ajouter le paramètre de l’éditeur de liens à l’iframe src. |
Une fois que vous les avez modifiés, vous devrez ajouter ceci customTask à vos trackers ou tags.
Assurez-vous d’ajouter ceci customTask à un hit ou à une balise qui se déclenche après (ou peu avant) l’ajout de l’élément iframe à la page. Le script a un délai d’attente qui est attempts * intervalMs millisecondes, donc si le script ne trouve pas l’iframe dans ce délai, le script n’interrogera plus la page et l’iframe restera non décoré.
Par examplesi l’iframe se trouve dans le modèle HTML de page lui-même, il suffit généralement d’ajouter ceci customTask au hit Page View qui se déclenche dès que la page commence à se charger (donc Toutes les pages déclencheur dans GTM, ou l’extrait de page si vous utilisez Universal Analytics).
Mais si l’iframe est ajouté dans un modal lors d’un clic sur un bouton, par exemple, vous souhaiterez déclencher un hit Google Analytics avec ce clic, puis assurez-vous d’inclure ceci customTask dans le coup.
Comment ça fonctionne
Lorsque l’appel à Google Analytics est généré, cela customTask demande à plusieurs reprises à la page : “Y a-t-il une iframe qui correspond au sélecteur CSS donné ?”. Si cette iframe est trouvée avant le timeout (attempts * intervalMs), le chemin de l’iframe est décoré avec le paramètre de l’éditeur de liens inter-domaines.
Ceci, à son tour, signifie que lorsque la page dans l’iframe se charge, l’URL de la page aura le _ga= paramètre de l’éditeur de liens inter-domaines, qui est ensuite utilisé par la première balise qui se déclenche dans l’iframe avec le allowLinker drapeau défini sur true.
Mises en garde
Notez que cela ne décore que l’iframe src chemin. C’est la seule chose que vous pouvez faire à partir du site source, donc si cela ne fonctionne pas, vous n’avez pas de chance avec cette solution. Certaines iframes peuvent introduire une redirection lorsque l’original src est chargé, ce qui élimine souvent le paramètre de requête de l’URL. Si tel est le cas, vous pouvez essayer de régler le useAnchor paramètre à truequi pourraient être plus résistants aux redirections.
Si vous êtes intéressé par une alternative viable au paramètre de l’éditeur de liens, jetez un œil au
postMessage APIprésenté dans cet excellent article de Dan Wilkerson de Bounteous.
Méfiez-vous également que cela customTask utilise la configuration de cookie du hit que le customTask a été ajouté à. Donc, si ce hit a une configuration de cookie exceptionnelle, il est possible que l’éditeur de liens soit construit avec le mauvais ID client.
En d’autres termes, assurez-vous d’être au courant de toute modification des paramètres de cookie par défaut dans le tracker, le hit ou le tag auquel le customTask est ajouté.
Il n’y a pas de réelle pénalité à ajouter ceci customTask directement au tracker ou à toutes vos balises Universal Analytics. Si l’iframe a déjà un paramètre interdomaine dans le src valeur, le script arrête simplement de tenter de décorer l’iframe.
Résumé
Il s’agit d’une approche alternative à ma solution originale d’utilisation hitCallback pour décorer l’iframe. A mon humble avis, je pense que cela customTask essuie le sol avec mon idée originale, donc je recommande vivement de l’utiliser à la place.
Mes sentiments sur les iframes n’ont pas vraiment changé depuis la rédaction de l’article original, je vais donc simplement inclure l’extrait pertinent ici pour que vous puissiez sympathiser.
Si vous voulez vous défouler, faites-moi savoir ce que vous pensez des iframes dans les commentaires de cet article.
