Back in February, I was a part of creating and publishing a super-rush-get-it-out-now website that I spoke a tiny bit about here. We have a less than desirable MVC implementation, but it’s up there, it works, we capture leads, I’m hoping it ends up in sales, but that’s not my area here.
We recently launched an AdWords campaign that involved the use of floodlight tags on aforementioned rush job. Based on the, erm, hacky, way we implemented the pages, doesn’t go to a separate thank you page. This tag has to fire on submission, track which “page” the tag came from, on a hacky site.
We just published this solution this morning, so it may ultimately still fail. However, here is how I solved this to fire appropriately.
The contact form loads the same every time, regardless of the content of the, let’s say, Hogwarts Houses page. The main Hogwarts page is the only page that doesn’t have a floodlight tag, so houses.hogwarts.magic was safe from this sorcery. The rest were not, so let’s dig in.
We have four houses, Hufflepuff (Yeah, I’m a badger. #hufflepuffpride), Ravenclaw, Gryffindor, and Slytherin. Those URLs are set up to be houses.hogwarts.magic/?[HOUSENAME]. These are the URLs that the respective AdWords campaigns send future Hogwartians to.
Now, because of the awful (we, the team, hate the page implementation in case that was not blindingly obvious yet) implementation we did, the initial answer to the first (and at the time, only) floodlight tag was to fire the tag from the head section, but only when the submit button was hit from houses.hogwarts.magic/?gryffindor. Messy, awful, gross, but it worked. Then I went home and took two showers.
Last week I was informed that I needed to implement the tag to fire correctly for the remainder of the Houses. There were swears. And then a puzzlement to make this fire correctly for all of them without having code all over the place. Remember that the correct place to put a floodlight tag is in the <head> of the page. Then know that I just had to implement that in the exact opposite manner.
Wrapped in a <script> tag and a document.ready() with some other fun (read: hacky) stuff at the bottom of the page part containing the contact form is this delight:
[code lang=”js”]
//Form submit woo!
$(‘.SubmitButton’).click(function () {
//what page are we on, based on the URL
if (window.location.href.indexOf(‘griffyndor’) !== -1) {
//Start of DoubleClick Floodlight Tag: Please do not remove
var axel = Math.random() + “”;
var a = axel * 10000000000000;
//Make the iframe
document.write(‘<iframe></iframe>’);
//Put the iframe in the head tag.
$(‘#floodlight’).contents().find(“head”).html(‘<iframe></iframe>’);
//End of DoubleClick Floodlight Tag: Please do not remove
}
//repeat process for remaining Houses
else if (window.location.href.indexOf(‘hufflepuff’) !== -1) {
//Hufflepuff Floodlight
var axel = Math.random() + “”;
var a = axel * 10000000000000;
document.write(‘<iframe></iframe>’);
$(‘#floodlight’).contents().find(“head”).html(‘<iframe></iframe>’);
}
else if (window.location.href.indexOf(‘ravenclaw’) !== -1) {
//Ravenclaw Floodlight
var axel = Math.random() + “”;
var a = axel * 10000000000000;
document.write(‘<iframe></iframe>’);
$(‘#floodlight’).contents().find(“head”).html(‘<iframe></iframe>’);
}
else if (window.location.href.indexOf(‘slytherin’) !== -1) {
//Slytherin Floodlight
var axel = Math.random() + “”;
var a = axel * 10000000000000;
document.write(‘<iframe></iframe>’);
$(‘#floodlight’).contents().find(“head”).html(‘<iframe></iframe>’);
}
});
[/code]
Despite requiring a long run and two-to-three more showers, it works (so far). Using Google’s Tag Assistant, it records the tag firing upon submission of the form, and the external vendor who is handling the campaign for us is pleased with the results at this time.
Let’s hope that until we have the bandwidth to do this site right, it continues to function properly and give the numbers marketing is looking for.
Leave a Reply