Dynamically appended ads not being tracked – jQuery issue

More of an observation and comment than a problem, as I’ve identifed a fix – but shared in case others have the same issue, or in case the plugin author finds the input useful.

So, my scenario is that I’ve got a blog with lots of sidebar ads, but I wanted a more intelligent solution for a responsive layout than just hiding the sidebar or moving it to the bottom. So I’ve written a bit of jQuery that clones the ads from the sidebar into an array, slices the array into groups of 4 and appends each group to placeholders located throughout the main content column for mobile visitors. This means the ads get relocated to a specific mobile-friendly location, and I can get rid of my sidebar on small screens without a problem.

Quite pleased with my lateral thinking, the result looks good, and all worked as it should.

Except, when I went to check my stats, they’d more than halved. After a bit of console.log() debugging it appeared that the tracking isn’t triggering on the newly relocated ads, even though the data-track attribute is present.

Then I remembered: jQuery doesn’t like .click() events on dynamically added content, since they’re not part of the original DOM. So I had a quick check of jquery.clicktracker.js, and sure enough the tracking code is triggered using .click().

As of jQuery 1.7, the .on() event handler is a lot more forgiving of dynamically added elements, so I’d suggest re-writing:

jQuery("a.gofollow").click(function(){

to

jQuery("body").on('click', 'a.gofollow', function(){

I’ve made this change on my local version, and it seems to do the trick. Now both the original and the cloned ad are both tracking clicks successfully.

Hope that helps someone!

https://wordpress.org/plugins/adrotate/