Firing Doubleclick Floodlight using Onclick Event Handler

Question

I have to fire a doublelclick floodlight tag when a user clicks on the facebook button on the company website. The problem is the whole website is built out of umbraco with widgets like "andthis" bolted on which makes adding functional tags difficult.

I plan to use this code below so when a user clicks on the div tag that contains the "share to social media" buttons it will fire the tag, however in testing it doesn't just fire the tag it trys to carry the user away. What am I doing wrong? I just want to load the tag when the user clicks, I don't want to actually leave the page they are currently on.

<div id="buttonsContainer">
  <p>Click or double click here.</p>
</div>

<script>
    $("#buttonsContainer").click(function () {

var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="http://fls.doubleclick.net/activityi;src=36705;type=count134;cat=faceb540;ord=1;num=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
});
</script>

Answer 1

It's reloading the page when the user clicks because you are using a document.write, which reopens the stream to write the page out. You'll want to use something like $('buttonsContainer').append(''); to place the iframe into the buttonsContainer element.

For example:

<div id="buttonsContainer">
  <p>Click or double click here.</p>
</div>

<script>
    $('#buttonsContainer').click(function () {
        var axel = Math.random() + '';
        var a = axel * 10000000000000;
        $(this).append('<iframe src="http://fls.doubleclick.net/activityi;src=36705;type=count134;cat=faceb540;ord=1;num=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
    });
</script>