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.

Overview

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 file. 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 website administrator can look at the source code).

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

This custom 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>

<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.

<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>

<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>

<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>

<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>

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.

Was this helpful?

How can we improve it?

Fire a Floodlight tag on a click

Overview

Was this helpful?

Need more help?

Try these next steps: