Suivi des conversions Floodlight

Mettre en œuvre Floodlight sur des pages Flash

Cet article explique comment mettre en œuvre des tags Floodlight sur un site Web Flash. Nous supposons que vous maîtrisez Flash et le langage HTML, et que vous connaissez les principes de base des tags Floodlight.

Les techniques de mise en œuvre abordées dans ce document ne requièrent pas l'ajout de code dans le conteneur HTML, car tout le code sera mis en œuvre dans l'animation Flash.

Les scénarios suivants sont traités :

  • Mise en œuvre de tags Floodlight standards (iFrame) dans ActionScript 2 et ActionScript 3

  • Mise en œuvre de tags d'image Floodlight dans ActionScript 2 et ActionScript 3

Pour obtenir d'autres scénarios de mise en œuvre où vous devez définir une fonction JavaScript dynamique dans le conteneur HTML appelé par ActionScript, consultez l'article Appeler un tag Floodlight après un événement JavaScript.

 

Pourquoi les procédures de mise en œuvre des tags iFrame (fls) et des tags d'image diffèrent-elles ?

Le tag d'image Floodlight n'est ni plus ni moins un tag d'image HTML standard utilisant une image de 1 x 1 pixel. Étant donné que Flash peut effectuer des appels externes et charger des images externes hébergées sur un autre serveur, la mise en œuvre des tags d'image dans des animations Flash est aussi facile que le chargement de toute autre image externe dans votre animation.

A contrario, les tags iFrame demandent et chargent un code HTML pouvant appeler plusieurs pixels. Ce code HTML ne peut être chargé et traité directement dans l'animation Flash. Nous devons utiliser la capacité de Flash à communiquer avec le code HTML de la page Web et de manipuler de façon dynamique le DOM (Document Object Model), en associant l’Iframe au code HTML de la page lorsque l’utilisateur interagit avec l’animation Flash.

Même si vous attachez de façon dynamique l’Iframe à la page HTML qui héberge l’animation Flash, il n’est pas nécessaire d’ajouter du code à la page HTML ; tout est géré à partir de l’animation Flash. Pour que cette méthode fonctionne, le lecteur Flash doit avoir accès illimité au script. Pour cela, assurez-vous que le paramètre AllowScriptAccess du lecteur Flash est défini sur always ou samedomain. Ce paramètre est défini dans les tags <object> et <embed> utilisés pour placer l’animation Flash dans la page Web. Dans les exemples ci-dessous, la valeur AllowScriptAccess est définie sur always dans les tags <object> et <embed>.

 

Étapes de mise en œuvre

Dans ce scénario, un ensemble de tags doit être mis en œuvre sur un site Flash. Chaque tag (iFrame ou image) doit être déclenchée par un événement donné (par exemple, un clic d'internaute sur un bouton, l'affichage d'un cadre spécifique au sein de l'animation, etc.).

Pour mettre en œuvre vos tags Floodlight sur un site Flash, procédez comme suit :

1. Déterminez s'il s'agit de tags iFrame ou d'image

La procédure de mise en œuvre des deux types de tags étant différente, vous devez déterminer si vous travaillez avec des tags d'image ou iFrame.

  • Un tag iFrame contient <iframe...> avec un appel aux serveurs Floodlight (fls) et un libellé activityi : <iframe src=http://1234567.fls.doubleclick.net/activityi...>.

  • Un tag d'image contient un appel <img...> vers les serveurs publicitaires DoubleClick (ad) et un libellé activity : <img src=http://ad-region.doubleclick.net/activity...>.

2. Récupérez l'URL à utiliser dans la mise en œuvre Flash

Maintenant que vous connaissez le type de tag avec lequel vous travaillez, vous devez récupérer l'URL que vous utiliserez dans la mise en œuvre Flash. L'URL correspond simplement à la valeur du paramètre src= dans les tags. Cependant, assurez-vous de supprimer de l’URL la valeur de tout paramètre utilisé pour l’insertion d’un nombre aléatoire. Étant donné que le code Flash génère un nombre aléatoire, il n'est pas nécessaire d'en utiliser un dans les tags Floodlight. Dans les exemples de tags de cet article, la variable de nombre aléatoire est représentée par '+a+'"?", la variable a étant attribuée à la fonction JavaScript math.random().

  • Si le tag contient les deux paires valeur/clé ord= et num=, supprimez la valeur du paramètre num=.

  • Si le tag contient une valeur/clé ord= mais pas de valeur/clé num=, vérifiez la valeur du paramètre ord=. Si la valeur clé est ord=[SessionID] ou ord=[OrderID], implémentez la valeur/clé tel que nécessaire pour insérer la valeur correcte. Supprimez toute autre valeur de paramètre ord= pour les tags sans paire valeur/clé num=.

Pour en savoir plus sur ces paires valeur/clé, consultez l'article Tags Floodlight.

Exemples d'URL requises pour la mise en œuvre Flash :

  • iFrame (fls) :

    http://1234567.fls.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2];ord=1;num=[Random Number]
  • Image:

    http://ad-région.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2];ord=1;num=[Random Number]

3. Mettez en œuvre le code

Si vous avez suivi les étapes 1 et 2, vous disposez normalement de l'ensemble des informations requises pour mettre en œuvre le tag Floodlight dans votre animation Flash. Dans les exemples présentés ici, on suppose que le tag est déclenché lorsqu'un internaute clique sur un bouton Flash, mais la même logique peut être appliquée à tout autre événement Flash.

 

Exemples

Exemples de mise en œuvre d'un tag iFrame (fls)

Dans ces exemples :

  • L'URL récupérée à l'étape 2 correspond à la valeur de la variable flood_url.

  • Un bouton portant le nom d'instance mybutton_btn s'affiche dans l'espace de création.

Si vous mettez en œuvre un tag iFrame dans ActionScript 2, nous vous recommandons vivement d'utiliser l'approche "interface externe". Il est possible, en effet, que la méthode getURL ne fonctionne pas correctement dans Internet Explorer (IE), la chaîne générée par cette méthode pouvant dépasser les limites de caractères imposées pour les URL (1 024 caractères dans les versions les plus anciennes du navigateur). Si vous sélectionnez la méthode getURL, nous vous recommandons de réaliser des tests approfondis avec un HTTP tracer pour vous assurer que la mise en œuvre fonctionne et que le tag Floodlight est appelé correctement.
 

ActionScript 2 – Méthode "interface externe"

La méthode "interface externe" est recommandée pour la mise en œuvre de tags Floodlight avec ActionScript 2. Elle nécessite Flash 8 ou version ultérieure.

import flash.external.*;
mybutton_btn.onRelease = function() {
   var rand:String = Math.floor(Math.random()*100000000) + "?";
   var flood_url:String = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url:String = flood_url + rand;
   var dclk_flood = 'f = function() { if (document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else{var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id = "DCLK_FLDiv"); void(flDiv.style.display= "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src="' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe)); }';

;   if (ExternalInterface.available) {
        ExternalInterface.call(dclk_flood);
   }
};

ActionScript 2 – Méthode getURL

En raison de la limitation des caractères dans les URL, cette méthode n'est pas recommandée, et ne doit être utilisée que si aucune autre méthode n'est applicable.

on (release) {
   var rand = Math.floor(Math.random() * 1000000) + "?";
   var flood_url = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url = flood_url + rand;
   var dclk_flood = 'javascript:if(document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else { var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id = "DCLK_FLDiv"); void(flDiv.style.display = "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src = "' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe));';
   getURL(dclk_flood, "_self");
}

ActionScript 3

  • L'URL doit être ajoutée à la variable flood_url.

  • Le code ci-dessous suppose qu'un bouton s'affiche dans l'espace de création avec le nom d'instance mybutton_btn.

import flash.display.*;
import flash.events.*;
import flash.external.*;
import flash.net.URLRequest;

mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);

function onButtonClick( Event:MouseEvent ):void {
   var rand:String = Math.floor(Math.random()*100000000) + "?";
   var flood_url:String = "http://1234567.fls.co.doubleclick.net/activityi;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url:String = flood_url + rand;
   var dclk_flood = 'f = function() { if (document.getElementById("DCLK_FLDiv")) { var flDiv = document.getElementById("DCLK_FLDiv"); }';
   dclk_flood += 'else { var flDiv = document.body.appendChild(document.createElement("div"));';
   dclk_flood += 'void(flDiv.id="DCLK_FLDiv"); void(flDiv.style.display = "none"); }';
   dclk_flood += 'var DCLK_FLIframe = document.createElement("iframe"); void(DCLK_FLIframe.id = "DCLK_FLIframe_' + Math.floor(Math.random() * 10000) + '");';
   dclk_flood += 'void(DCLK_FLIframe.src = "' + tag_url + '"); void(flDiv.appendChild(DCLK_FLIframe)); }';

;   if (ExternalInterface.available) {
;       ExternalInterface.call(dclk_flood);
   }
}

Exemples de mise en œuvre d'un tag d'image

ActionScript 2

Dans cet exemple :

  • L'URL récupérée à l'étape 2 correspond à la valeur de la variable flood_url.

  • Les variables u1 et u2 ont été renseignées par des valeurs factices (u1=value1 et u2=value2).

on(release) {
   var rand = Math.floor(Math.random() * 1000000) + "?";
   var flood_url = "http://ad-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
   var tag_url = flood_url + rand;
   loadMovieNum(tag_url, 2);
}

ActionScript 3

Dans cet exemple :

  • L'URL récupérée à l'étape 2 correspond à la valeur de la variable flood_url.

  • Les variables u1 et u2 ont été renseignées par des valeurs factices (u1=value1 et u2=value2).

  • Un bouton portant le nom d'instance mybutton_btn s'affiche dans l'espace de création.

import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
;   try {
;       var ldr:Loader = new Loader();
       var rand:String = Math.floor(Math.random() * 100000000) + "?";
       var flood_url:String = "http://ad-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2]
;ord=1;num=";
       var tag_url:String = flood_url + rand;
       var urlReq:URLRequest = new URLRequest(tag_url);
;       ldr.load(urlReq);
   } catch (e:Error) {
       trace("error");
   }
}

Votre annonceur peut également télécharger des exemples Flash mettant en œuvre des tags d'image ou des tags dynamiques Floodlight dans ActionScript 2 et ActionScript 3, à partir de notre outil Creative Repository.

Fourni à titre d'exemple, ce code s'appuie sur l'hypothèse que le tag Floodlight est déclenché par un clic d'internaute sur un bouton Flash. Fourni à titre d'exemple, ce code s'appuie sur l'hypothèse que le tag Floodlight est déclenché par un clic d'internaute sur un bouton Flash. Vous devrez remplacer les URL Floodlight et autres variables par vos propres valeurs. Vous pouvez également adapter le code de façon qu’il traite d’autres événements Flash, et qu'il réponde à vos directives et besoins en termes de code. Rappelez-vous toutefois que l'URL récupérée à l'étape 2 ne peut pas être modifiée.