Comment tracker vos applications Facebook ?

Depuis quelques mois, Facebook a délaissé le format FBML au profit des iFrames afin de faciliter le développement des applications. Celles-ci sont de plus en plus avancées et on retrouve des portages de site e-commerce au sein même du réseau social. Comme tout site Internet, on doit pouvoir utiliser un outil de web analyse au sein de l’application afin d’analyser son utilisabilité et son audience. Le service Facebook Insights ne pourra combler ce besoin puisque celui-ci se limite à la mesure du partage d’information et l’interaction des utilisateurs avec son contenu.

Comment faire alors pour traquer les iFrames?

Mon outil de web analyse directement dans Facebook ?

Comme il s’agit d’une iFrame, on peut insérer n'importe quel tracking code. Cependant deux problèmes intrinsèques aux iFrames Facebook existent :

  • Cookies et Internet Explorer :

    Internet Explorer (6 à 9), l’ami de tous les intégrateurs, ne déposera pas son cookie chez l’internaute.

    Effet direct : augmentation du nombre de visiteurs sous IE.

    Ce problème peut-être surmonté en utilisant le protocole P3P. Une simple ligne de code corrige cela :

    <!--?php header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'); ?-->

    A placer en haut de page

 

Récupération des sources de trafic :

En regardant les sources de trafic de votre application, vous vous apercevrez que la seule source qui apparait vient de « apps.facebook.com ». Il ne sera pas possible de récupérer les sources de trafic car la page est appelée depuis Facebook. Deux solutions s’offrent à vous pour contourner cette difficulté :

-    Utiliser une page passerelle : tous les liens que vous allez faire vers votre application vont d’abord passer par une page hébergée sur votre propre serveur puis rediriger vers l’application. Vous aurez donc toutes vos sources de trafic.

-    Utiliser les paramètres de campagne de votre outil d’analyse dans vos liens. L’application Facebook aura ces paramètres dans l’URL et vous pourrez les récupérer à l’intérieur de l’iFrame. Vous retrouverez ainsi les sources de trafic venant de vos campagnes. On présentera ici un exemple de scénario avec Google Analytics, outil connu de tout le monde.

  1. A partir de l'envoi d'un emailing, on place ce type de lien à l'intérieur du mail : http://apps.facebook.com/monapplication?utm_source=customer-service-email&utm_medium=emailing&utm_campaign=solde qui appelle l’iFrame http://monsite.com/
  2. On récupère dans l’iFrame en PHP les valeurs sources, medium, campaign.
  3. On ajoute à l’URL de l’iFrame ces valeurs avec l'attribut Javascript document.location.href. L’URL de l’iFrame devient  http://monsite.com/#utm_source=customer-service-email&utm_medium=emailing&utm_campaign=solde
  4. Avec _trackPageview, Google Analytics va récupérer l’URL présente dans document.location.href. On pourra ainsi récupérer dans nos rapports les sources de trafic de nos campagnes.

Pour plus de détails, voici un exemple de code à mettre en place :

<!-- Récupération des paramètres dans l'URL de la page appelant l'iframe et injection des paramètres dans l'URL de l'iframe -->
<?php
if(
isset($_GET["utm_source"])
&&isset($_GET["utm_medium"])
&&isset($_GET["utm_campaign"])
){
/*
vérification de la présence des paramètres obligatoires
utm_source, utm_medium et utm_campaign
*/
$campagne='utm_source='.$_GET["utm_source"].'&utm_medium='.$_GET["utm_medium"].'&utm_campaign='.$_GET["utm_campaign"];
//création d'une variable 'campagne' contenant les paramètres obligatoires

// ajout des paramètres term et content s'ils sont présents dans l'URL
if(isset($_GET["utm_term"])){$campagne.='&utm_term='.$_GET["utm_term"];}
if(isset($_GET["utm_content"])){$campagne.='&utm_content='.$_GET["utm_content"];}
?>
<script type="text/javascript">
document.location.href+="#<?php echo $campagne;?>";
/*
injection des paramètres de la campagne dans l'URL de l'iframe et
utilisation d'une ancre afin d'éviter la redirection avec un '?'
*/
</script>
<?php
}
?>
<!-- Fin de l'injection des paramètres de la campagne -->
<!-- Tag Google Analytics de base + setAllowAnchor -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-*']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowAnchor', true]); // permet de passer les paramètres en utilisant une ancre
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- fin du tag Google Analytics -->

C'est un simple exemple qui doit être adapté et optimisé en fonction de vos besoins.

Le choix entre ces deux solutions reste une question de goût. Je préfère la deuxième car elle évite une redirection qui peut être gênante pour l’utilisateur. Il devra charger deux pages au lieu d’une.

Besoin d'accompagnement pour le tracking d'une application Facebook ? Contactez-nous.

3 réponses

  1. “Effet direct : augmentation du nombre de visiteurs sous IE.” : ce n’est pas plutôt : “Effet direct : aucune visite provenant d’IE ne sera enregistrée.” ?

    • Damien Ousaci

      Bonjour Jean-Noël,

      Dans ce cas sous IE les cookies Google Analytics ne seront pas déposés chez l’utilisateur. Cela n’empêchera pas les fonctions JavaScript d’être appelées et de générer une visite. Il n’y aura pas d’historique de visite du fait de l’absence de cookies. L’internaute créera une nouvelle visite pour chaque page appelée.

  2. OK ! Je vais tester tout cela… Merci pour votre réponse 🙂

Ajouter un commentaire