Derrière ce long titre se cache un problème que beaucoup de sites rencontrent, notamment chez les affiliés.
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).
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
