Imaginons que vous ayez une page Facebook, avec une application en onglet, un jeu concours par exemple. Imaginons que vous ayez un plan media renvoyant directement vers cet onglet, et vous souhaitez mesurer, avec Google Analytics, la performance des différentes campagnes.

Classiquement, vous allez générer des URLs trackées pour les campagnes Google Analytics, qui auront cette structure : https://www.facebook.com/LesMainsDansLeCode/app_123456789?utm_source=twitter&utm_medium=tweet&utm_campaign=gogogo

Et vous allez poser votre tag Google Analytics dans le code HTML de votre application.

Le problème

En trackant ainsi vos compagnes, vous aurez bien le décompte des visites, mais aucune statistique de campagne ne remote dans votre Google Analytics ! La raison est que les paramètres de campagnes renseignés dans l’URL (utm_source, utm_medium, …) ne sont pas passé à l’iframe contenant l’application, donc notre Google Analytics ne peut pas différencier les campagnes.

La solution

Premièrement, il faut pouvoir récuperer nos paramètres dans notre application.

Pour cela, on va encapsuler les paramètres de campagne dans une unique variable app_data, encodés par exemple en JSON : https://www.facebook.com/LesMainsDansLeCode/app_123456789?app_data={« utm_source »: »twitter », »utm_medium »: »tweet », »utm_campaign »: »gogogo »}

Ensuite, on va récuperer ces valeurs via le signedRequest que Facebook passe à l’application.
<?php
    // Exemple en PHP avec le SDK PHP Facebook
    require_once('facebook.php');

    // Les paramètres de votre application
    $facebookConfig = array(
        'appId'     => '1234567890',
        'secret'    => 'abcdefghij',
    );

    // La création de l'object Facebook
    $facebook = new Facebook($facebookConfig);
    
    // Récupération de la signedRequest
    $signedRequest = $facebook->getSignedRequest();

    // Récupération des variables passées via app_data
    if (!empty($signedRequest['app_data'])) {
        $app_data = (array) json_decode($signedRequest['app_data']);
    }
?>
On va ensuite injecter ces valeurs directement dans le tag de tracking Google Analytics Javascript, via les paramètres campaignSource du tag Universal Analytics :
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');

// Insertion des paramètres de campagne
<?php if (!empty($app_data['utm_source']))   echo "ga('set', 'campaignSource',  '".$app_data['utm_source']."');\n"; ?>
<?php if (!empty($app_data['utm_medium']))   echo "ga('set', 'campaignMedium',  '".$app_data['utm_medium']."');\n"; ?>
<?php if (!empty($app_data['utm_campaign'])) echo "ga('set', 'campaignName',    '".$app_data['utm_campaign']."');\n"; ?>
<?php if (!empty($app_data['utm_term']))     echo "ga('set', 'campaignKeyword', '".$app_data['utm_term']."');\n"; ?>
<?php if (!empty($app_data['utm_content']))  echo "ga('set', 'campaignContent', '".$app_data['utm_content']."');\n"; ?>

ga('send', 'pageview');

</script>
<!-- End Google Analytics -->

Un outil pour générer ces URLs

A savoir

  • Si vous faites la promotion d’une URL d’application et pas d’onglet de page, pas besoin de faire tout cela, les paramètres de campagne sont passés directement à l’iframe.
  • Pour tracker correctement Internet Explorer, vous devez aussi envoyer un header P3P
  • On est obligé de faire tout ça car les applications Facebook sont chargées via un proxy dont le but est justement d’empêcher l’iframe d’accéder à l’URL de la fenêtre, que ce soit par top.location.href ou par le referer. Plus de détails sur le proxy Facebook

Les commentaires sont fermés.