ultimate slideshow - google analytics

[jkanko]

1) Script Title:
Ultimate Fade in Slideshow
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm
3) Describe problem:

How would I go about adding google analytics outbound link tracking to these url's?
This is a sample snippet from google analytics:
<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview('/outgoing/example.com');">

I'll need to add the onclick function to the urls

Any help is greatly appreciated.

Thanks!

[ddadmin]

There are many ways to approach this. The idea is to be able to detect exactly the URL of a slide when it's clicked on, and have that slide react to an onClick event that does something based on the URL of the slide. Going for the unobtrusive approach, you can try something like the following:

<div id="wrapper">

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
 
</script>

</div>

<script type="text/javascript">

var fadewrapper=document.getElementById("wrapper")
fadewrapper.onclick=function(e){
	if (typeof e=="undefined"){
		var e=window.event
		e.target=e.srcElement
		e.preventDefault=function(){return false}
	}
	var targetlink=(e.target.parentNode.tagName=="A")? e.target.parentNode : null
	if (targetlink){ //if this slide is hyperlinked, do something onClick
		alert(targetlink.href)
		return e.preventDefault()
	}
}

</script>

The code in red is new. In other words, you'd wrap your original initialization script that appears in the BODY of your page with a DIV that registers clicks on it. By default all that the code does is when the user clicks on a slide that's hyperlinked, it alerts the URL of that link and stops the link from loading (for easier testing). In reality you'll probably want to do something like:

var fadewrapper=document.getElementById("wrapper")
fadewrapper.onclick=function(e){
	if (typeof e=="undefined"){
		var e=window.event
		e.target=e.srcElement
		e.preventDefault=function(){return false}
	}
	var targetlink=(e.target.parentNode.tagName=="A")? e.target.parentNode : null
	if (targetlink){ //if this slide is hyperlinked, do something onClick
		if (targetlink.href.indexOf("example.com")!=-1)
			pageTracker._trackPageview('/outgoing/example.com')
		else if (targetlink.href.indexOf("cnn.com")!=-1)
			pageTracker._trackPageview('/outgoing/cnn.com')
		else if (targetlink.href.indexOf("dynamicdrive.com")!=-1)
			pageTracker._trackPageview('/outgoing/dynamicdrive.com')
	}
}

It's set up to detect if a certain string appears within the URL of the slide that's clicked on, and do something accordingly.

[jscheuer1]

I am unfamiliar with Google analytics. However the exemplar code you supply seems to indicate that one should not use the href of the link, rather some sort of convention to indicate something about the link and a condensed version of the href to indicate where the link is to.

That being the case, you would want to expand each entry in the array. For example, here is a typical linked array entry:

fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""]

It could be expanded thus (following your exemplar):

fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "/outgoing/cssdrive.com"]

Once you do that for each entry that requires analytics, the script may be altered to utilize the new information by replacing its fadeshow.prototype.populateslide function with this one:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'"' +
(this.theimages[picindex][3]? ' onclick="pageTracker._trackPageview(\'' + this.theimages[picindex][3] + '\');return true;"' : '') + '>';
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

[jkanko]

I'm going to start with the first solution and see what happens.

Then I'm going to do the 2nd.

[jkanko]

correction, the 2nd solution was a little easier to implement on the page so I'm going with that one first...

[jscheuer1]

Just as a note, ddadmin and myself 'cross posted'. That is we were both answering the question at about the same time, and before the answer from the other was visible. Both are worth a shot I suppose, as I had no easy method to test mine. I just wrote what seemed to be sufficient and in line with several other modifications of this general sort I've made in the past to this script. But as ddadmin pointed out:

There are many ways to approach this.

[ddadmin]

Yep, both methods should work. John's is easier to implement if you don't have any experience with JavaScript yourself.

[jkanko]

I'm not too proficient with java and I'm wondering if this is specifying to use the 3rd array element to populate the google analytics link path:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'"' +
(this.theimages[picindex][3]? ' onclick="pageTracker._trackPageview(\'' + this.theimages[picindex][3] + '\');return true;"' : '') + '>';
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


In that case if I am using:
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "outbound/javascript.com"] //image with link and target syntax


Does the new populate function need to accomodate?

[jscheuer1]

This:

fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "outbound/javascript.com"] //image with link and target syntax

will make:

<a href="http://www.javascriptkit.com" target="_new"  onclick="pageTracker._trackPageview('outbound/javascript.com');return true;">

followed by the image tag and a closing </a> tag.

[jkanko]

i've implemented it for about 40 images on a site...

awaiting some results...