Floodlight conversion tracking

Implement Floodlight in Flash pages

This article provides guidelines on how to implement Floodlight tags inside a Flash website. We assume you've got a working knowledge of both Flash and HTML, as well as a basic understanding of Floodlight tags.

The implementation techniques discussed in this document do not require any code in the HTML container, as all the code will be implemented within the Flash movie.

The following scenarios will be covered:

  • Floodlight standard (Iframe) tag implementation in ActionScript 2 and ActionScript 3

  • Floodlight image tag implementation in ActionScript 2 and ActionScript 3

For alternative implementations that require you to define a dynamic JavaScript function in the HTML container as called by ActionScript, see Call a Floodlight tag after a JavaScript event.

 

Why is the implementation different for Iframe (fls) tags and image tags?

A Floodlight image tag is just a standard HTML image tag that requests a 1x1 pixel image. Because Flash can perform external calls and load external images hosted on a different server, implementing image tags in Flash movies is as simple as loading any other external image into your movie.

By contrast, Iframe tags request and load HTML code that can call mutiple pixels. This HTML code can't be loaded and processed directly inside the Flash movie. Instead, we'll take advantage of Flash's ability to communicate with the webpage's HTML and dynamically manipulate the document object model (DOM), appending the Iframe to the page's HTML when the user interacts with the Flash movie.

Even though you'll dynamically append the Iframe to the HTML page where the Flash movie resides, there is no need to add any extra code to the HTML page; everything will be handled from the Flash movie. For this method to work, the Flash Player needs to be granted outbound script access. To do so, make sure the Flash Player AllowScriptAccess parameter is set to either always or samedomain. This parameter is set within the <object> and <embed> tags used to place the Flash movie on the webpage. In the examples below, the AllowScriptAccess value is set to always in both the <object> and <embed> tags.

 

Implementation steps

In this scenario, a set of tags must be implemented within a Flash site. Each tag (Iframe or image) needs to be triggered upon a certain event (for example, a user click on a button, the movie reaching certain frame, and so on).

To implement your Floodlight tags in a Flash site:

1. Determine whether the tags are Iframe or image tags

Because the implementation is different, you need to determine whether you're dealing with Iframe or image tags.

  • An Iframe tag contains an <iframe...> with a call to the Floodlight servers (fls) and an activityi label: <iframe src=http://1234567.fls.doubleclick.net/activityi...>

  • An image tag contains an <img...> call to the DoubleClick ad servers (ad) and an activity label: <img src=http://ad-region.doubleclick.net/activity...>

2. Retrieve the URL for use in the Flash implementation

Now that you know which type of tags you're working with, you need to retrieve the URL that you'll use in the Flash implementation. The URL is simply the value of the src= parameter in the tags. However, be sure to delete from the URL the value of any parameter used for the insertion of a random number. Because a random number will be generated by the Flash code, there is no need to use a random number generated in the Floodlight tags. In the example tags in this article, the variable for the random number is represented by '+a+'"?", as the variable a is assigned to the math.random() JavaScript function.

  • If the tag contains both ord= and num= key-values, delete the value of the num= parameter.

  • If the tag contains an ord= key-value but no num= key-value, check the value of the ord= parameter. If the key-value is ord=[SessionID] or ord=[OrderID], implement the key-value as necessary to insert the correct value. Delete any other value of the ord= parameter for tags without num= key-values.

To learn more about these key-values, see Floodlight tags.

Examples of the URLs needed for Flash implementation:

  • 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-region.doubleclick.net/activity;src=1234567;type=abcde123;cat=fghij456;u1=[friendlyname1];u2=[friendlyname2];ord=1;num=[Random Number]

3. Implement the code

If you followed Step 1 and Step 2, you should have all the information you need to implement the Floodlight tag in your Flash movie. The examples presented here assume that the tag will be triggered when a user clicks a Flash button, but the same logic can be applied to any other Flash event.

 

Examples

Iframe (fls) implementation examples

In these examples:

  • The URL you retrieved in Step 2 is the value of the flood_url variable.

  • There's a button on the stage with the instance name mybutton_btn.

For Iframe tag implementation in ActionScript 2, we strongly recommend using the External Interface approach, becuase getURL might not work properly in Internet Explorer (IE) due to character limits on URLs — as low as 1,024 characters for older versions of the browser — that might be exceeded by the string generated by the getURL method. If you choose to use the getURL method, we recommend thorough testing with an HTTP tracer to make sure the implementation works and the Floodlight is being called properly.
 

ActionScript 2, External Interface method

The External Interface method is the recommended method for implementing Floodlight tags with ActionScript 2. It requires Flash 8 or higher.

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, getURL method

Because of character limits on URLs, this method is not recommended, and should only be used when no other method is feasible.

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

  • The URL should be added to the flood_url variable.

  • The below code assumes a button on the stage with the instance name 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);
   }
}

Image tag implementation examples

ActionScript 2

In this example:

  • The URL you retrieved in Step 2 is the value of the flood_url variable.

  • The u1 and u2 variables have been populated with dummy values (u1=value1 and 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

In this example:

  • The URL you retrieved in Step 2 is the value of the flood_url variable.

  • The u1 and u2 variables have been populated with dummy values (u1=value1 and u2=value2).

  • There's a button on the stage with the instance name mybutton_btn.

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");
   }
}

Your advertiser can also download Flash examples that implement dynamic or image Floodlight tags using ActionScript 2 and ActionScript 3 from our Creative Repository.

The code provided is only examples, based on the assumption that the Floodlight tag will be triggered by a user click on a Flash button. You'll need to substitute your own Floodlight URL and your own variable values. You can also adapt the code to work with other Flash events and to meet your own coding standards and needs. Keep in mind, however, that the URL you retrieve in Step 2 can't be modified.