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.
- 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
andcat
attributes found in the original floodlight tag snippet'ssrc
attribute.
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:
Any insight would be greatly appreciated.