Catégories
Developper Gestion de la qualité

Mesurer son trafic sur plusieurs domaines au travers d’un iframe avec Google Analytics

Derrière ce long titre se cache un problème que beaucoup de sites rencontrent, notamment chez les affiliés.

Principe de l'affiliation

Imaginons que vous ayez un site de contenu et un site de ecommerce en marque blanche, typiquement vous êtes affiliés à un service proposé par les nombreuses plateformes d’affiliation (Zanox, Commission Junction, …). Votre site de contenu est correctement tagué ce qui vous permet d’en faire le suivi statistique via l’interface de Google Analytics. Le site de ecommerce vers lequel vous envoyez du trafic comporte aussi le même marqueur Google Analytics et vous voyez aussi les visites dans votre rapport.

D’un point de vue code, le marqueur en question doit probablement ressembler à ca ou a une version plus récente:

<script type="text/javascript">
// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "https://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS");
pageTracker._trackPageview();
} catch(err) {}
</script>

Si vous n’arrivez pas à ce niveau de suivi, il y a de fabuleuses ressources pour vous aider à mettre en place le code GA en fonction de milliers de cas bien précis. Une fois que vous aurez fini l’implémentation et que vous verrez des stats de trafic dans votre tableau de bord, revenez sur cette page pour la suite !

Si vous êtes dans ce cas là, c’est déjà bien. Pour autant, vous passez à côté d’un trésor inestimable sans même le savoir. Pour cela il va falloir faire une petite modification sur votre code, mais avant de se lancer là-dedans, voyons les raisons pour lesquelles il faut faire cet effort.

Customiser le code recommandé par Google ?

Le tracker fournit par défaut par Google est une version de base, simplifiée, d’un script bien plus long. Basé sur du Javascript, il y a de nombreuses fonctionnalités qu’il suffit de rajouter afin d’obtenir un comportement différent, plus en phase avec ce que vous cherchez à faire.

Parmi ces fonctions, on va s’intéresser à un cas pas tellement détaillé dans les pages de support de Google et qui génère de nombreuses questions sans réponse dans les forums d’utilisateurs. Par défaut, une session de GA se définit selon une durée et un emplacement (nom de domaine); si on dépasse cette durée ou si l’on change de périmètre, on crée une nouvelle session. Pour étendre le périmètre de notre site de contenu à notre site de ecommerce appelé par iframe, on va utiliser les fonctions suivantes :


pageTracker._setDomainName('NOM-DE-DOMAINE-A-OU-B');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-A-OU-B');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);

Ces quatre lignes vont indiquer plusieurs choses à l’outil de collection d’information. Tout en déclarant que l’on est sur le domaine A (ou B), on va dire à GA de ne pas se soucier du nom de domaine en question tant qu’on utilise un code spécifique pour lier d’un nom de domaine à un autre. En clair, on ne veut pas avoir de distingo pour nos pages correctement taguées mais on veut aussi se laisser l’opportunité de remarquer toutes les sources et fuites possibles de trafic en dehors de ça.

Il y a de nombreuses autres options à découvrir, mais pour notre problème, on a maintenant tout ce qui nous faut. Il nous reste donc qu’a implementer le code ET le système qui va nous permettre de passer les informations de session d’un nom de domaine à un autre. Vous devrez donc mettre à jour toutes vos pages (sur les multiples domaines), voire tout ou partie de vos liens. La bonne nouvelle, c’est que je détaille tout ici.

Étape 1: code analytics pour le site principal

Commençons par le plus simple en mettant à jour notre code sur le site principal. S’il s’agit d’un blog WordPress, de nombreux plugins vous permettent de faire ca en quelques clics. Si vous ne trouvez pas votre bonheur, vous pourrez toujours éditer le thème de votre blog pour ajouter au pied-de-page (footer.php) le code en question. Si vous avez monté le site vous-même, vous devez mieux que personne savoir comment faire. Le cas échéant, je vous souhaite juste d’avoir isolé le code analytics dans un fichier à part et d’y faire appel pour toutes les pages que vous souhaiter tracker.

Code pour le site A:

<!-- Code Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker('VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS');
pageTracker._setDomainName('NOM-DE-DOMAINE-A');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-A');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- Fin : Code Google analytics -->

Bien entendu, n’oubliez pas de remplacer « VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS » par votre code GA et le « NOM-DE-DOMAINE-A » par votre nom de domaine sans son prefixe (exemple: « emarketeur.fr »). Mettez tout ca en ligne et assurez vous que les données soient encore visibles sur votre tableau de bord GA les jours suivants.

Étape 2: code analytics pour le site appelé en iframe

Dans le cas d’école ou le second site est appelé en iframe, il s’agit bien souvent d’un site affilié et par conséquent, un site dont on maîtrise pas ou peu l’intégration html. Dans certains cas, comme avec Availpro.com, vous trouverez un interface d’administration vous permettant de changer le code en ligne, rien de plus simple. Dans d’autres cas, comme avec booking.com, il faudra passer par le responsable partenariat pour demander aux équipes techniques de mettre à jour le code, ce qui peut prendre plus de temps. Enfin, si vous ne pouvez pas ajouter / editer le code sur le site appelé en iframe, il n’y a pas grand chose à faire si ce n’est envoyé un email supplicateur aux administrateurs.

Code pour le site B:

<!-- Code Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker('VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS');
pageTracker._setDomainName('NOM-DE-DOMAINE-B');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-B');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- Fin : Code Google analytics -->

Là encore, n’oubliez pas de remplacer les valeurs par votre identifiant GA et votre second nom de domaine (exemple: « booking.com »). Si vous constatez que le code est bien en ligne et que vous comptabilisez toujours du trafic dans les rapports de GA, passez à l’étape 3.

Étape 3: mettre en place le système de liens entre les deux sites

Cette étape est absolument nécessaire pour faire comprendre à GA que vos sites font partie du même compte. Dans sa documentation, Google explique clairement comment écrire les liens hypertextes, les formulaires mais il est plus hasardeux de trouver de l’information pratique et réutilisable autour des iframes. Heureusement, après plusieurs semaines de recherches et de tests, j’ai trouvé le moyen simple et propre de mettre en place les recommandations conceptuelles de l’ami Google.

Pour la page qui va charger l’iframe, ajoutez ce code pour ouvrir le body:

<body onload="loadPage()">

Au sein de la page, utilisez ce code pour charger votre iframe:

<script language="JavaScript" type="text/javascript">
function loadPage(){
	document.getElementById('myIframe').contentWindow.document.location.href = pageTracker._getLinkerUrl('url-de-destination-sur-site-B.html');
}
</script>
<iframe id="myIframe"></iframe>

Bien entendu, si vous avez plusieurs iframes sur une même page, il vous suffit de créer une « id » unique pour chaque au sein de la fonction LoadPage() et dans votre html. Je n’ai d’ailleurs pas appliqué de style en particulier sur cette iframe mais rien ne vous empeche d’appeler la class ou le style qui vous plairont.

Ca marche vraiment ?

A l’étape 3 plus qu’aux précédentes, il est vital d’effectuer une série de tests pour s’assurer qu’à aucun endroit vous auriez oublié d’éditer vos liens, formulaires ou iframes. Si tout est mis à jour, vous allez voir le changement dans vos rapports GA. Les changements ne sont pas rétro-actifs, vous pourrez donc comparer l’avant / après… et vous désespérer de ne pas l’avoir fait plus tôt.

Si vous avez un doute, n’hésitez pas à télécharger le fichier de démo. Vous y trouverez 2 fichiers html très simples. L’un appele l’aurte via l’exemple d’une iframe. Les deux fichiers comportent le tag Google Analytics que vous devrez utiliser.

Grâce à cette nouvelle configuration, vous allez pouvoir faire le suivi de vos visiteurs depuis leur point d’entrée jusqu’à la fin de session au travers de toutes vos pages. Concretement, vous allez pouvoir dire quel mot clef, quelle campagne AdWords vous rapporte le plus de succès. Vous pouviez avoir une vague idée mais votre analyse ne portait qu’à un seul nom de domaine, avec l’astuce décrite plus haut, vous allez réellement controler ce qui se passe sur votre site : quels visiteurs vous rapportent de l’argent, quels visiteurs ne sont intéressés que par le contenu et enfin vous allez pouvoir laisser tomber tous les mots clefs qui ne vous rapporte rien (et qui vous coûtent donc de l’argent).

Cercle vertueux de la Business intelligence

J’ai mis en place ce système sur quelques sites déjà. Une fois les rapports bien configurés dans Google Analytics (en utilisant les segments avancés par exemple), vous avez la plus simple et efficace arme pour piloter votre business online, rien que ça.

Bonne mise en place et bonne étude de vos stats !

Grégory Raby

12 réponses sur « Mesurer son trafic sur plusieurs domaines au travers d’un iframe avec Google Analytics »

bonjour,

je ne vois pas comment avec cette configuration analytics peut faire remonter les information de type montant de la transaction, Id de la transaction, produits acheté, catégorie des produits achetés etc….

Je travaille sur la problématique d’un camping pour tracer les réservations qui sont réalisées via une centrale de réservation appelée en Iframe et je galère sévère !
De plus google encourage vivement à utiliser le nouveau code (pas si nouveau que ça d’ailleurs) asynchrone.

Et il faut dire que Google est bien avare en information… peut être n’est-il pas l’outil d’analytique le plus approprié pour mesurer ce type d’information ?

Je pense que je vais passer une bonne nuit !

Bonjour Mathieu,

Cet exemple fournit le schema de la configuration du code pour que la session se poursuive d’un site (domaine A) à un autre (domaine B). La documentation, certes avare, de google référence les options complémentaires permettant de capturer les variables dont vous parlez plus haut, notamment dans le cas classique d’une affiliation à une centrale de réservation.

Effectivement, un nouveau code a été publié il y a quelques mois mais celui-ci marche toujours parfaitement bien et je n’ai pas vu de comparatif me poussant à le mettre à jour.

Bonnes fins de recherches !
Grégory

Bonjour
Super article. Question: est-ce que votre méthode avec le iframe fonctionne aussi avec IE? Parce que la documentation de Google fait état d’un truc avec P3P.
merci

Hey Alex, thanks for your note. I haven’t looked at the updated code for a while. Is it any different from simply replacing the js lines ? The iframe part should be essentially untouched. Greg

hi, used your tutorial, but didn’t work for me. i see no errors and no data from google analytics. help me please

thanks in advance

Hello Amrit,
That’s a little scarce for me to get what’s not working. Let me start with a couple basic question : Did you change the parameters to your own GA code ? Did you host it on your domain ? Cheers. Greg

I’m in the process of testing this. My question is about the JavaScript arguments, in the parent page should they look like this:

pageTracker._setDomainName(‘subdomain.domain.country’);
pageTracker._addIgnoredOrganic(‘subdomain.domain.country’);

Do I have to specify http or https? Can I have a subdomain like secure.domain.ca?

For the iFrame page I’m trying the same subdomain.domain.country, do I even need the subdomain can I just drop www?

Cheers,

PS I tried to leave this comment in IE 8 and it said your webpage has an error…

Hey Andrew, you need to declare your subdomain and the tracking will apply to that prefix. AFAIK, HTTP/S doesn’t make any difference. Thanks for the note on the IE8 thing, I’ll have a look. Good luck with your tests and feel free to comment on your findings ! Greg

We still don’t see anything in Google Analytics, it has been more than 24 hours we expected some data. This is the url to the test page:
https://secure.carlsonwagonlit.ca/teammateplus/site-principal.html

I’ve visited the page many times in multiple browsers on multiple computers. I also put an additional tracking script on the just the iFrame using Mint and that is working fine, but no data for either the parent or the iFrame is showing up in Google Analytics.

Bonjour. J’ai lu avec grand intérêt votre article. Je suis confrontée à un problème presque semblable, que je veux vous soumettre, histoire de savoir si oui ou non c’est exactement le même souci et qu’il faille le résoudre avec la même procédure.
Supposons que j’ai un site web dont une application est disponible (via iframe sur le même domaine que le site) et est utilisée sur d’autres sites web.
comment puis-je obtenir les « analytics » de mon iframe avec ceux de mon site web?
Je demande parce que, vu que mon iframe est hébergé sur un domaine différent des sites qui le « consultent », les « analytics » ne sont pas récupérés. Merci d’avance pour vos éventuelles réponses.

Bonjour, il s’agit bien du sujet traité par cet article. Suivez les étapes et tout devrait marcher. N’hésitez pas à utiliser le fichier de démo pour vous en inspirer. Le code de Google Analytics a été mis à jours plusieurs fois depuis, mais le concept reste le même.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *