Dans la série « c’est vite fait, ça dépanne et ça augmente votre karma », je souhaitais partager cette petite astuce que je pratique depuis un moment, mais que je ne crois pas avoir vue sur d’autres implémentations.
Il n’est pas rare que certains sites puissent être appelés à la fois de façon autonome, mais aussi embeddés dans un autre site, en utilisant une technique que d’aucun qualifieront de « JS de gitan » (no offense), à savoir la bonne vieille iframe.
Prenons l’exemple d’une publication de qualité : l’Edition du Soir de Ouest France, qui, comme son nom l’indique, est un ensemble d’articles, qui sort plutôt en fin de journée (sans déconner). Bon, comme vous pouvez le voir, il s’agit d’une liseuse tout ce qu’il y a de plus classique, qui peut être consommée « telle quelle », mais pas que. Le site https://journal.ouest-france.fr/, aussi appelé par les puristes « le kiosque », peut appeler différents « titres », dont l’Edition du Soir, en iframe.
Et si jamais vous n’avez pas encore un pack numérique Ouest France (abonnez-vous, bande de radins), voici à quoi ça ressemble :
Il s’agit strictement du même contenu HTML/CSS/JS, appelé dans une lightbox, qui elle-même appelle une iframe :
Donc, concrètement, il serait intéressant de savoir, sur 100 pages vues dans l’Édition du soir, combien sont faites en « pleine page », combien en iframe. Et tant qu’à faire, dans ce dernier cas, sur quel domaine est exécutée ladite iframe.
Bien évidemment, l’idée est de mettre tout ceci dans une custom dimension GA, ou feature équivalente (eVar dans Adobe si ma mémoire est bonne).
(si je touchais 1€ à chaque fois que je disais « Custom Dimension », je pense que j’aurais pu racheter le PSG aux quataris (en ayant bien entendu recruté Benjamin Bourigeaud au préalable)).
Rien de plus simple, puisque, vous allez le voir, une simple variable JS va faire le job dans GTM :
function(){
var parentDomain = {{URL - Nom hôte}};
if ( window.location !== window.parent.location ) {
parentDomain = window.parent.location;
}
return parentDomain;
}Eh oui, c’est d’une simplicité enfantine, il s’agit simplement de vérifier si le nom d’hôte de l’URL courante est le même que celui d’un éventuel parent qui hébergerait la page en iframe.
Il faudra bien sûr, au préalable, disposer de la variable {{URL – Nom hôte}}, native à GTM, que l’on récupère comme ceci si jamais vous avez oublié :
Enfin, on va caller bien tranquillement cette variable dans une des custom dimensions (scope hit) via notre variable GA Settings :
En fin de compte, vous pourrez donc sortir un joli petit custom report qui vous permettra de voir, pour une page donnée, le pourcentage de pages vues en iframe vs en pleine page.
Conclusion
Voilà, c’est tout. L’implémentation est tout ce qu’il y a de plus simple, mais ce que l’on peut en tirer en termes d’analyse est intéressant : l’intégration d’une iframe n’est pas ce qu’il y a de plus simple (ni de plus moderne, d’ailleurs) pour avoir une UX super smooth, mais il est encore courant de les utiliser pour exécuter un site entier en mode marque blanche. Si vous êtes dans ce cas, avoir des informations d’engagement domaine parent par domaine parent peut être très précieux.
Envie de partager vos expériences sur la gestion des iframes (je pense qu’il y a pas mal d’anecdotes épiques)? N’hésitez pas à rebondir dans les commentaires ou sur Twitter, ce réseau social plein de bienséance.