Suivi des conversions Floodlight

Déclencher un tag Floodlight lors d'un clic

Vous pouvez utiliser un gestionnaire d'événements JavaScript pour initier un appel Floodlight lorsque les internautes effectuent une action, comme un clic, le téléchargement d'un PDF, la sélection d'un élément de menu ou l'envoi d'un formulaire.

La méthode décrite ci-dessous requiert l'activation de JavaScript dans le navigateur de l'utilisateur. Si JavaScript est désactivé, l'appel Floodlight ne sera pas déclenché.

Le principe de base de cette méthode consiste à créer un tag iFrame ou un tag d'image (dans le cas de tags d'image Floodlight) de façon dynamique avec JavaScript, puis d'attribuer à ce tag tous les paramètres nécessaires, tels que les variables personnalisées, les variables de ventes et les contournements de cache.

Étant donné que les paramètres définissant l'activité Floodlight ("type" et "cat") figurent également dans l'URL, vous pouvez aussi utiliser cette méthode pour appeler de manière dynamique différentes activités Floodlight à partir de la même page. Cette méthode est utile pour les pages basées sur la technologie AJAX.

Les fonctions décrites ci-après peuvent être appelées à l'aide d'une fonction onclick() ou onsubmit() placée dans le corps du code HTML ou par le biais d'un appel JavaScript à partir d'un fichier Flash. Elles constituent également une autre méthode possible pour appeler des tags Floodlight à partir de sites Web Flash. Pour obtenir des exemples de code ActionScript, consultez la section "Autres exemples de mise en œuvre Flash" ci-dessous.

Pour les événements onclick qui redirigent vers une page de destination ou une page de téléchargement de fichier, vous devez utiliser l'attribut target="_blank" ; sinon, la redirection vers le même onglet de navigateur empêchera le tag de se déclencher correctement.

Vous trouverez d'autres exemples similaires de mise en œuvre de code dans cette page de démonstration (le webmaster peut consulter le code source). http://commondatastorage.googleapis.com/floodlight/on_click_examples.html

Nous vous recommandons de mettre en œuvre les déclarations de fonctions JavaScript dans la section <head> de la page Web.

Cette méthode ne doit être employée qu'en dernier recours, car elle peut avoir des effets imprévisibles sur le décompte des conversions après clic. En effet, le nombre de conversions peut être surévalué du fait que le tag Floodlight n'est pas placé sur une vraie page de destination. Il peut également être sous-évalué, car le tag dépend de l'activation de JavaScript. Vous pouvez envisager d'utiliser cette méthode lorsqu'une annonce redirige vers un fichier PDF, par exemple. Cependant, même dans ce cas, il est toujours possible de placer, sur une même page de destination, le fichier PDF sous forme d'objet intégré et le tag Floodlight. L'intégration d'objets dans les pages de destination permet d'obtenir des décomptes plus précis.
Exemple 1 : appel d'un tag de compteur standard qui transmet une variable personnalisée

L'exemple suivant utilise la variable personnalisée u1.

<head>
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD1(type, cat, u1) {
        var axel = Math.random()+"";
        var a = axel * 10000000000000000;
        var flDiv=document.body.appendChild(document.createElement("div"));
        flDiv.setAttribute("id","DCLK_FLDiv1");
        flDiv.style.position="absolute";
        flDiv.style.top="0";
        flDiv.style.left="0";
        flDiv.style.width="1px";
        flDiv.style.height="1px";
        flDiv.style.display="none";
        flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=' + type + ';cat=' + cat + ';u1=' + u1 + ';ord=' + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Ceci est un exemple d'un appel "onclick" sur un tag d'ancrage -->
 <a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD1('testtype', 'testcat', 'testu1');" target="_blank">Cliquez ici pour tester le tag</a>
</body>
Exemple 2 : utilisation d'un tag d'image Floodlight

Notez que l'utilisation d'un tag d'image empêche le déclenchement ultérieur des tags d'éditeur et des tags par défaut. En savoir plus

<head>
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD2(type, cat, u1) {
        var axel = Math.random()+"";
        var a = axel * 10000000000000000;
        var spotpix = new Image();
        spotpix.src="http://ad.doubleclick.net/activity;src=12345678;type=" + type + ";cat=" + cat + ";u1=" + u1 + ";ord=" + a + "?";
}
//]]>
</script>
</head>
<body>
<!-- Ceci est un exemple d'un appel "onclick" sur un tag d'ancrage -->
 <a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD2('testtype', 'testcat', 'testu1');" target="_blank">Cliquez ici pour tester le tag</a>
</body>
Exemple 3 : appel d'un tag de compteur et définition de son type

Dans cet exemple, l'appel d'une fonction en attribuant la valeur 1 (ou une valeur générique) à isUnique provoque l'appel du tag de compteur de type "utilisateurs uniques sur 24 heures", alors que l'appel de la fonction avec une valeur 0 ou sans valeur provoque l'appel du tag de compteur standard.

<head>
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD3(type, cat, isUnique) {
        var axel = Math.random()+"";
        var a = axel * 10000000000000000;
        var flDiv=document.body.appendChild(document.createElement("div"));
        var cachebust = (isUnique)?';ord=1;num=':';ord=';
        flDiv.setAttribute("id","DCLK_FLDiv1");
        flDiv.style.position="absolute";
        flDiv.style.top="0";
        flDiv.style.left="0";
        flDiv.style.width="1px";
        flDiv.style.height="1px";
        flDiv.style.display="none";
        flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=' + type + ';cat=' + cat + cachebust + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Ceci est un exemple d'un appel "onclick" sur un tag d'ancrage -->
 <a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD3('testtype', 'testcat', 1);" target="_blank">Cliquez ici pour tester le tag</a>
</body>
Exemple 4 : appel d'un tag pour les variables de ventes

Utilisez le code suivant pour créer les tags définissant les paramètres qty (décompte des activités), cost et ord , ainsi que la variable personnalisée u1.

<head>
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD4(qty, cost, u1, ord) {
        var flDiv=document.body.appendChild(document.createElement("div"));
        flDiv.setAttribute("id","DCLK_FLDiv1");
        flDiv.style.position="absolute";
        flDiv.style.top="0";
        flDiv.style.left="0";
        flDiv.style.width="1px";
        flDiv.style.height="1px";
        flDiv.style.display="none";
        flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="http://12345678.fls.doubleclick.net/activityi;src=12345678;type=123;cat=456;qty=' + qty + ';cost=' + cost + ';u1=' + u1 + ';ord='+ ord + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
</head>
<body>
<!-- Ceci est un exemple d'un appel "onclick" sur un tag d'ancrage -->
 <a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD4(2, 100.34, 'testu1', 'testorderid');" target="_blank">Cliquez ici pour tester le tag</a>
</body>

Autres exemples de mise en œuvre Flash

Pour appeler des fonctions JavaScript à partir d'un site Web Flash, consultez les exemples ActionScript 2 et ActionScript 3 ci-dessous. Ces exemples présentent une autre méthode que celle consistant à incorporer complètement l'appel Floodlight dans ActionScript, comme expliqué dans l'article Mettre en œuvre Floodlight sur des pages Flash.

Définissez la fonction JavaScript dans le tag <head> , comme décrit dans les exemples ci-dessus, puis utilisez le code suivant pour appeler le tag Floodlight à partir du fichier SWF :

  • Code ActionScript 2 pour l'exemple 1 ci-dessus :

    // Appliquer à un bouton dans le fichier swf
    on (release) {
    getURL("javascript: FLOOD1(type, cat, u1);");
    }

  • Code ActionScript 3 pour l'exemple 1 ci-dessus :

    // Nom du bouton dans Flash appelé “button1”
    import flash.external.ExternalInterface;
    function clickedbutton1(e:MouseEvent):void {
        if (ExternalInterface.available) {
        ExternalInterface.call("FLOOD1", type, cat, u1);
        }
    }
    button1.addEventListener(MouseEvent.CLICK, clickedbutton1);

  • Assurez-vous que vous avez défini le paramètre allowScriptAccess du site Flash, afin qu'il puisse exécuter JavaScript. Dans les versions antérieures de Flash, normalement, ce paramètre est correctement défini. En revanche, dans Flash 8 et les versions ultérieures, vous devez indiquer cette valeur de façon explicite. L'avantage est que le tag Floodlight n'a pas besoin d'être modifié. En effet, il peut être appelé sans tenir compte des fonctions de sécurité inter-domaines qui sont intégrées dans Flash 7 et les versions ultérieures.

    Important : Le code réellement utilisé relève de la responsabilité du site qui est chargé de mettre en œuvre le tag Floodlight. Le test des fonctionnalités avant le lancement lui incombe également.