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 fichier 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é.
Présentation
Le principe fondamental de cette méthode est de générer de manière dynamique un tag Iframe ou d'image (dans le cas de tags d'image Floodlight) en utilisant JavaScript, avec tous les paramètres nécessaires, tels que les variables personnalisées, les variables liées à la vente et les contournements du 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-dessous peuvent être appelées à l'aide d'une fonction onclick() ou onsubmit() dans le corps du fichier HTML. Pour les événements onclick qui redirigent vers une page de destination ou un téléchargement de fichiers, vous devez utiliser l'attribut target="_blank", sinon la redirection vers le même onglet du navigateur empêchera la balise de se déclencher correctement.
Vous trouverez d'autres exemples similaires d'intégration de code dans la page de démonstration suivante (l'administrateur du site Web peut consulter le code source) : https://storage.googleapis.com/dcm-floodlight/Floodlight_on_Click_EXAMPLE.html.
Nous vous recommandons d'insérer les déclarations de fonction JavaScript dans la section <head> de la page Web.
L'exemple suivant utilise la variable personnalisée u1.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD1('testtype', 'testcat', 'testu1');" target="_blank">Click here to test the tag</a>
</body>
Notez que l'utilisation d'une tag d'image empêche le déclenchement ultérieur des tags d'éditeur et des tags par défaut.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD2('testtype', 'testcat', 'testu1');" target="_blank">Click here to test the tag</a>
</body>
Dans cet exemple, l'appel d'une fonction en attribuant la valeur 1 (ou une valeur générique) à isUnique provoque l'appel de la balise 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 de la balise compteur standard.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD3('testtype', 'testcat', 1);" target="_blank">Click here to test the tag</a>
</body>
Utilisez le code suivant pour créer les balises définissant les paramètres qty (décompte des activités), cost et ord, ainsi que la variable personnalisée u1.
<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>
<!-- This is an example of a "onclick" call on a anchor tag -->
<a href="http://address_of_page_to_load_or_file_to_download" onclick="FLOOD4(2, 100.34, 'testu1', 'testorderid');" target="_blank">Click here to test the tag</a>
</body>
