Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Floodlight click handler

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:

  1. Prevent the default click action of the link.
  2. Fire the floodlight tag, which is just a process of creating an iframe with a special URL.
  3. 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

  1. Copy the JS above into your project.
  2. Change the button's ID in line #1
  3. 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.

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);
}
@Pcushing

This comment has been minimized.

Copy link

commented Oct 14, 2016

Thanks for sharing.

I had to deal with a PDF redirect, which wouldn't work with window.location without some other changes, browser inconsistencies, etc. If you're OK with a new window, you can handle PDF click tracking with this slight change:

  createFloodlightTag("source", "type", "cat", function() {
    window.open(url, '', ''); // Open the PDF in a new window after tag fires.
  });
@Dabalina

This comment has been minimized.

Copy link

commented Oct 20, 2016

Thank you for this code. I am using this on a primary menu with dropdowns in my wordpress site. The primary links scroll to anchors in a site and the dropdown links open new pages. When using window.location the primary link was redirecting to a 404 page and the url said /null instead of scrolling down the page.

By changing window.location to window.open the scroll link worked for the primary links but now all the submenu links which do load new pages no longer work. Do you have any ideas on how to fix that? It sort of appears that it is redirecting these submenu links to the same page.

The structure is:

<ul>
<li id="item6"><a href="#about">About</a>
<ul class="submenu">
<li id="item8"><a href="/somepage">Some Page</a></li>
</ul>
</li>
</ul>

Any insight would be greatly appreciated.

@cleo06

This comment has been minimized.

Copy link

commented Oct 6, 2017

Im trying to make a floodlight tag fire on form submission but I think its firing on page load. Could anyone give me some insight?
You can view it at www.broodmethod.com/formac/

<title>OW Form</title>
<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
<!--  If necessary, please modify the charset parameter to specify the        -->
<!--  character set of your HTML page.                                        -->
<!--  ----------------------------------------------------------------------  -->

<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <FORM> element to your page.             -->
<!--  ----------------------------------------------------------------------  -->


<style>
body{
  font-size: 18px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
}
.form-wrapper {
    min-width: 180px;
    max-width: 980px;
    position: absolute;
    width: 100%;
    text-align: center;
}
.row-wrapper{
  display:flex;
  margin: 0px;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;


}

.ow-input:hover{
  border-bottom: 1.1px solid  rgba(181, 156, 109, 1);
  transition: all 1s ease;
}

.ow-input{
  outline: none;
  -webkit-appearance:none ;
  border-bottom: 1px solid #333;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 10px;
  display: flex;
  font-family: sans-serif !important;
  font-size: 20px !important;

  font-weight: 400 !important;
  color: #5E5E5E !important;
  margin: 0 0 5px;
  margin-left: 0px;
  width: 100%;
  -webkit-transition: 0.5s ease all;
  transition: 0.5s ease all;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: normal normal normal 20px/1.4em proxima-n-w01-reg,sans-serif;
  -webkit-appearance: none;
  border-radius: 0;
  box-sizing: border-box;
}
.ow-input::placeholder {
    color: #000;
    font-size: 18px;
    font-weight: 400;
  }



.ow-label{
  display: flex;
  position: absolute;
  font-weight: 400;
  font-family: sans-serif;

}
.ow-label.last{
  margin-top: -20px;
  display: flex;
  position: absolute;
  font-weight: 400;
  font-family: sans-serif;
}

.row-wrapper.leadsource{
  display:flex;
  margin: 20px;
  margin-left: 0px !important;
  margin-right: 0px !important;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
.ow-input.leadsource{
  padding: 5px;
  cursor: pointer;
  font-weight: 400;
  display: flex;
  border: none;
  border-bottom: 1px solid rgba(94, 94, 94, 1);
  color: #5E5E5E;
  margin-top: 30px;
  width: 100%;
  -webkit-transition: 0.5s ease all;
  transition: 0.5s ease all;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: normal normal normal 20px/1.4em proxima-n-w01-reg,sans-serif;
  -webkit-appearance: none;
  border-radius: 0;
  box-sizing: border-box;
}

.ow-label.leadsource{
  display: flex;
  position: absolute;
  font-weight: 400;
  padding-left: 10px;
  font-family: sans-serif;
}
.ow-submit{
  font-family: sans-serif;
  text-transform: capitalize;
  letter-spacing: 1.3;
  font-size: 20px;
  font-weight: 400;
  padding:0px 15px;
  background:#fff;
  border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*---------------------*/
.dropdown {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 200px;
  margin-left: -100px;
}
.dropdown span {
  padding: 1em;
  font-size: 16px;
  background-color: #1c222a;
  color: #a9a9a9;
  display: block;
}
.dropdown span:after {
  content: '';
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.2);
}
.dropdown span:hover {
  cursor: pointer;
}
.dropdown span.active:after {
  content: '';
  display: block;
  float: right;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,0.2);
  border-top: 0px solid transparent;
}
.dropdown .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  z-index: 9999;
  max-height: 240px;
  overflow-y: scroll;
}
.dropdown .dropdown-list li {
  padding: 1em;
  font-size: 16px;
  background-color: rgba(28,34,42,0.8);
  color: #a9a9a9;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.dropdown .dropdown-list li:hover {
  color: #72d2ff;
  cursor: pointer;
}

</style>
<script type="text/javascript">


    function validate(e){
    	var userName = document.getElementById("last_name").value;
    	var email = document.getElementById("email").value;

    	if (userName.length === 0) {
    		alert("You must enter a last name.");
    		e.preventDefault();
    		return;
    	}

    	if (email.length === 0) {
    		alert("You must enter a email.");
    		e.preventDefault();
    		return;
    	}
      FLOOD1('onewi0', 'onewi0')
    }

    window.onload = function() {
    	document.getElementById("nl-form").addEventListener("submit", function(e){
        	validate(e);
    	});
    }
</script>


<script type="text/javascript" id="DoubleClickFloodlightTag">
    //<![CDATA[
    function FLOOD1(type, cat) {
    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="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=' + type +
    ';cat=' + cat + ';ord=' + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
    }
    //]]>
 </script>

<script type="text/javascript">
    function trackConv(google_conversion_id, google_conversion_label) {
        var image = new Image(1, 1);
        image.src = "//www.googleadservices.com/pagead/conversion/" + google_conversion_id + "/?label=" + google_conversion_label + "&script=0";

    }
</script>
<script type="text/javascript"> var axel = Math.random() + ""; var a = axel * 10000000000000; document.write('<iframe src="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=onewi0;cat=onewi0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>'); </script> <iframe src="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=onewi0;cat=onewi0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
      <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" name="myform" method="POST" id="nl-form" class="nl-form" >

      <input type=hidden name="oid" value="00D7F000000zUdT">



      <!--  +++++++++++++++++++++ Redirect URL ++++++++++++++++++++++++++++++++++++++++  -->
      <!-- ============================================================================
           Please change the URL ONLY, value= "URL" -->
       <input type=hidden name="retURL" value="https://www.onewinton.com.au/thank-you">
      <!-- ============================================================================  -->
      <!-- ============================================================================  -->
      <!-- ============================================================================  -->

      <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
      <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
      <!--  these lines if you wish to test in debug mode.                          -->
      <!--  <input type="hidden" name="debug" value=1>                              -->
      <!--  <input type="hidden" name="debugEmail" value="dev@prolytics.com.au">    -->
      <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
      <div class='form-wrapper'>

         <div class='row-wrapper'>
            <label class='ow-label' for="first_name"></label>
               <input  class='ow-input' id="first_name" placeholder="First Name" maxlength="40" name="first_name" size="20" type="text" required /><br>

            <label class='ow-label last' for="last_name"></label>
               <input  class='ow-input name' id="last_name" placeholder="Last Name" maxlength="80" name="last_name" name="name" size="20" type="text" required /><br>
         </div>

         <div class='row-wrapper'>
            <label class='ow-label' for="email"></label>
               <input  class='ow-input email' id="email" placeholder="Email" maxlength="80" name="email" size="20" type="email" required/><br>
         </div>

         <div class='row-wrapper'>
            <label class='ow-label' for="phone"></label>
               <input class='ow-input'  id="phone" placeholder="Phone" maxlength="20" name="phone" size="20" type="tel" /><br>

            <label class='ow-label last' for="mobile"></label>
               <input  class='ow-input' id="mobile" placeholder="Mobile" maxlength="40" name="mobile" size="20" type="tel" required/><br>
         </div>

         <!-- ==========================================================

       =================================================================-->

         <div class='row-wrapper leadsource'>
            <label  class='ow-label leadsource' for="lead_source">Lead Source</label>
              <select  class='ow-input leadsource' id="lead_source" name="lead_source" required >
                <option value=""></option>
                <option value="Advertisement">Advertisement</option>
                <option value="Customer Event">Customer Event</option>
                <option value="Employee Referral">Employee Referral</option>
                <option value="Google AdWords">Google AdWords</option>
                <option value="Other">Other</option>
                <option value="Partner">Partner</option>
                <option value="Purchased List">Purchased List</option>
                <option value="Trade Show">Trade Show</option>
                <option value="Webinar">Webinar</option>
                <option value="Website">Website</option>
                <option value="Adwords/Paid Search">Adwords/Paid Search</option>
                <option value="Search Engine">Search Engine</option>
                <option value="Realestate.com.au">Realestate.com.au</option>
                <option value="Domain.com.au">Domain.com.au</option>
                <option value="Signage">Signage</option>
                <option value="The Age">The Age</option>
                <option value="Word of Mouth">Word of Mouth</option>
                <option value="Apartment Developments">Apartment Developments</option>
                <option value="EDM">EDM</option>
                <option value="Herald Sun">Herald Sun</option>
                <option value="LCP">LCP</option>
                <option value="Local paper">Local paper</option>
                <option value="Realcommercial.com.au">Realcommercial.com.au</option>
                <option value="realestateVIEW">realestateVIEW</option>
                <option value="Social Media">Social Media</option>
                <option value="The Weekly Review">The Weekly Review</option>
                <option value="CastranGilbert.com.au">CastranGilbert.com.au</option>
                <option value="Internet (Portal)">Internet (Portal)</option>
                <option value="Direct Mail">Direct Mail</option>
                <option value="Past Client">Past Client</option>
            </select><br>
          </div>



          <!-- ==========================================================-->


          <!-- ==========================================================

        =================================================================-->

        <div class='row-wrapper leadsource'>
           <label  class='ow-label leadsource' for="buyer_type">Buyer Type</label>
            <select class='ow-input leadsource' id="00N7F000006KUgN" name="00N7F000006KUgN" title="Buyer Type" >
                <option value=""></option>
                <option value="Owner Occupier">Owner Occupier</option>
                <option value="Investor">Investor</option>
                <option value="Owner Occupier/Investor">Owner Occupier/Investor</option>
            </select>
            <br>
        </div>

        <div class='row-wrapper leadsource'>
          <label  class='ow-label leadsource' for="buyer_type">Bedrooms</label>
              <select class='ow-input leadsource' id="00N7F000006KUgS" name="00N7F000006KUgS" title="Bdr">
                <option value=""></option>
                <option value="1+">1+</option>
                <option value="2+">2+</option>
                <option value="3+">3+</option>
                <option value="4+">4+</option>
            </select><br>
        </div>



            <!--Captures the utm_campaign from the URL Query String:-->
            <input id="utm_campaign" maxlength="255" display=none name="00N7F000004bJko" size="255" type="hidden"/>

            <!--Captures the utm_term from the URL Query String:-->
            <input id="utm_term" maxlength="255" display=none name="00N7F000004bJks" size="255" type="hidden"/>

            <!--Captures the utm_medium from the URL Query String:-->
            <input id="utm_medium" maxlength="255" display=none name="00N7F000004bJkq" size="255" type="hidden"/>

            <!--Captures the utm_source from the URL Query String:-->
            <input id="utm_source" maxlength="255" display=none name="00N7F000004bJkr" size="255" type="hidden"/>

            <!--Captures the utm_content from the URL Query String:-->
            <input id="utm_content" maxlength="255" display=none hidden="true" name="00N7F000004bJkp" size="255" type="hidden"/>

            <!--Captures the Salesforce Campaign ID from the URL Query String:-->
            <input id="campaign_id" maxlength="255" display=none hidden="true" name="a087F0000002cizQAA" size="255" type="hidden"/>


            <!--Project ID of the Project the enquiry form is for:-->
            <input  id="00N7F000004bJkm" maxlength="18" name="00N7F000004bJkm" size="18" type="hidden" value="a087F000006HvlXQAS" /><br>


            <!--Web Form URL is set to the URL of where the form is located:-->
            <input  id="00N7F000004bJkn" name="00N7F000004bJkn" title="Web Form URL" type="hidden" value="https://www.onewinton.com.au">

            <input class='ow-submit' type="submit" name="submit" onClick="trackConv(832050094, 'farhCM6G0nUQrqfgjAM');" target="_blank">
        </div>

      </form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.