Adding Google Analytics Click Tracking to Ultimate Fade-in slideshow (v2.4)

[simonrigga]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I wish to add Google analytics click tracking to the slideshow, as described here, http://support.google.com/analytics/answer/1136920?hl=en

However I'm not familiar enough with Java to change the script myself, I think I've identified the right area in which to add the code. here>

getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

Where I would need something like,


getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? ' onClick="trackOutboundLink(this, '''+imgelement[3]+''', '''+imgelement[4]+'''); return false;" </a>\n' : ''
return layerHTML //return HTML for this layer
},


I get an error on the above code, saying it expects a : after
trackOutboundLink(this, '''

Can I just change it to something like above, then just modify the initialisation code to be,


imagearray: [ ["path_to_image", "optional_url", "optional_linktarget", "optional_description", "optional_analytics_group", "optional_analytics_item"] ]

Any help would be very much appreciated.
Regards. S.

[simonrigga]

I think I have this working now so thought I'd share.

Also you may be able to tell me if it's complete rubbish.

I changed the getSlideHTML function like thus;


getSlideHTML: function (imgelement) {
var llhtml = (imgelement[4]) ? '" onClick="trackOutboundLink(this, \'' + imgelement[4] + '\', \'' + imgelement[5] + '\'); return false;" ' : ''
var layerHTML = (imgelement[1]) ? '<a href="' + imgelement[1] + '" target="' + imgelement[2] + llhtml + ' >\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

So that if you use


imagearray: [ ["path_to_image", "optional_url", "optional_linktarget", "optional_description", "optional_analytics_group", "optional_analytics_item"] ]

It will include the above onClick around the link.

You also need to include this


function trackOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action]);
} catch(err){}
setTimeout(function() {
window.open(link.href) ;
}, 100);
}

on your page, along with any other Google analytics tracking code as required.

Hope this helps someone.
S.

[jscheuer1]

That should work in limited situations. However, if you have links in a slideshow that you don't want tracked, it will break in at least some browsers because the closing quote (") for the target attribute is in the llhtml variable which will be empty when not tracking. Also, if you have links in a slideshow you do want tracked and you want those links to open in new tab, that functionality is lost because you're not asking for the link target in the added function. Further, when passing a target, unlike in ordinary HTML, that target must be defined. And, you cannot pass a non-self target to a setTimeout anyway because the default settings in all browsers are to block such requests. But you can execute it right away, because it will not unload the page.

To fix all of these problems change the getSlideHTML to:


getSlideHTML: function (imgelement) {
var llhtml = (imgelement[4]) ? ' onclick="trackOutboundLink(this, \'' + imgelement[4] + '\', \'' + imgelement[5] + '\'); return false;" ' : ''
var layerHTML = (imgelement[1]) ? '<a href="' + imgelement[1] + '" target="' + (imgelement[2] || '_self') + '"' + llhtml + ' >\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

And change your little added script to:


function trackOutboundLink(link, category, action) {
var executed;
if(link.target && link.target !== '_self'){
window.open(link.href, link.target);
executed = true;
}
try {
_gaq.push(['_trackEvent', category , action]);
} catch(err){}
!executed && setTimeout(function() {
window.location.href = link.href;
}, 100);
}