Floodlight conversion tracking

Fire a Floodlight tag on a click

You can use a JavaScript event handler to initiate a Floodlight call when users take some action such as a click, downloading a PDF, selecting an item from a menu, or submitting a form.

The method described below requires that the user's browser have JavaScript enabled. If JavaScript is turned off, then the Floodlight call will not be made.

The basic premise of this method is to build an Iframe or image tag (in the case of Image Floodlight tags) dynamically using JavaScript, with all the required parameters such as custom variables, sales-related variables, and cache-busters.

Since the parameters used to define the Floodlight activity itself (type and cat) are also present in the URL, it’s also possible to use this method to call different Floodlight activities dynamically from the same page. This is useful for AJAX-based pages.

The functions described below can be called using an onclick() or onsubmit() function inside the body of the HTML or by a JavaScript call from a Flash file, and can also be used as an alternative method to call Floodlight tags from Flash websites. See the "Flash Implementation Additional Example" below for some ActionScript code examples.

For onclick events that redirect to a landing page or a file download, you must use the attribute target="_blank", otherwise the redirection to the same browser tab will prevent the tag from firing properly.

You can find additional similar examples of working code implemented in this demo page (the webmaster can look at the source code). http://commondatastorage.googleapis.com/floodlight/on_click_examples.html

We recommend that you implement any JavaScript function declarations in the section of the webpage.

This method should only be used when no other option is available, as it can have unpredictable effects on the counting of click-through conversions. Because the Floodlight tag is not placed on a true landing page, there might be overcounting, but because the tag depends upon JavaScript being enabled, there could also be undercounting. A scenario in which you could consider this method would be an ad that clicks through to a PDF file. However, even in this instance, it is still possible to place the PDF file on a landing page as an embedded object and to place the Floodlight tag on the landing page. Embedding objects in landing pages will result in more accurate counts.
Example 1 - Call a standard counter tag that passes a custom variable

The following example uses a custom variable, 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>
<!-- 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>
Example 2 - Use an image Floodlight tag

Note that using an image tag will prevent default and publisher tags from being fired. Learn more

<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>
<!-- 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>
Example 3 - Call a counter tag and specify its type

In this case, calling a function with the value 1 (or a generic value) for isUnique will call the tag as a Unique Users 24 Hours counter type, while passing a value of 0 or omitting the value will call the tag as a standard counter type.

<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>
<!-- 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>
Example 4 - Call a tag for sales-related variables

Use the following code to create tags specifying qty (activity count), cost, and ord parameters, plus a custom variable, 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>
<!-- 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>

Flash implementation additional example

To call JavaScript functions from a Flash website, see the examples for ActionScript 2 and ActionScript 3 below. This provides an alternative to fully embedding the Floodlight call into the ActionScript as explained in Implement Floodlight in Flash pages.

Define the JavaScript function in the <head> tag as per the examples above, then use the following code to call the Floodlight tag from the SWF file:

  • ActionScript 2 code for example 1 above:

    // apply this to a button in the swf file
    on (release) {
    getURL("javascript: FLOOD1(type, cat, u1);");
    }

  • ActionScript 3 code for example 1 above:

    //name of the button in Flash would be “button1”
    import flash.external.ExternalInterface;
    function clickedbutton1(e:MouseEvent):void {
        if (ExternalInterface.available) {
        ExternalInterface.call("FLOOD1", type, cat, u1);
        }
    }
    button1.addEventListener(MouseEvent.CLICK, clickedbutton1);

  • Make sure that you have set the allowScriptAccess setting in the Flash site so it can execute JavaScript. For older versions of Flash, this should be set correctly for you, but with Flash 8 and higher, you'll need to set the value explicitly. The benefit is that the Floodlight tags does not need to be modified, and it can actually be called without having to take into consideration the cross-domain security functions that are built into Flash 7 and higher.

    Important: The actual code used is the responsibility of the site that will be implementing the Floodlight tag. This includes fully testing the functionality prior to launch.