jakebellacera/floodlight-click-handler.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Floodlight click handler

This gist solves the common problem of firing a floodlight tag when you click a link. Most examples don't take into account that you can't simply fire the floodlight tag by creating a tag during the click event. If you go with that approach, you will have a race condition where the floodlight tag may not fire successfully before the browser changes pages. To work around this issue, you have to do the following:

Prevent the default click action of the link.
Fire the floodlight tag, which is just a process of creating an iframe with a special URL.
Once the floodlight tag successfully fires (iframe.onload), resume the normal click action.

I've done the work for you and put it into a snippet that you can insert on your page. This snippet requires no external dependencies, so it's 100% plug-and-play. The entire process takes fractions of a second, so the user shouldn't notice any lag while this is happening.
How to use


Copy the JS above into your project.
Change the button's ID in line #1
Change the placeholder strings on line #5 to the floodlight tag's source, type and cat attributes found in the original floodlight tag snippet's src attribute.

Demo

View the jsfiddle demo.

  
## floodlight-click-handler.js
document.getElementById("button").addEventListener("click", function(e) {
  e.preventDefault();
  var url = this.getAttribute("href", 2);

  createFloodlightTag("source", "type", "cat", function() {
    window.location = url; // Redirect the user after the tag successfully fires
  });
});

function createFloodlightTag(source, type, cat, callback) {
  var axel = Math.random()+'';
  var a = axel * 10000000000000000;
  var tagUrl = "http://fls.doubleclick.net/activityi;src=" + source + ";type=" + type + ";cat=" + cat + ";ord=" + a + "?";
  var tag = document.createElement('iframe');
  tag.setAttribute('src', tagUrl);
  tag.height = '1';
  tag.width = '1';
  tag.frameborder = '0';

  if (callback) tag.onload = callback;
  document.body.appendChild(tag);
}
	document.getElementById("button").addEventListener("click", function(e) {
	e.preventDefault();
	var url = this.getAttribute("href", 2);

	createFloodlightTag("source", "type", "cat", function() {
	window.location = url; // Redirect the user after the tag successfully fires
	});
	});

	function createFloodlightTag(source, type, cat, callback) {
	var axel = Math.random()+'';
	var a = axel * 10000000000000000;
	var tagUrl = "http://fls.doubleclick.net/activityi;src=" + source + ";type=" + type + ";cat=" + cat + ";ord=" + a + "?";
	var tag = document.createElement('iframe');
	tag.setAttribute('src', tagUrl);
	tag.height = '1';
	tag.width = '1';
	tag.frameborder = '0';

	if (callback) tag.onload = callback;
	document.body.appendChild(tag);
	}