PDA

View Full Version : ultimate slideshow - google analytics



jkanko
12-17-2008, 06:03 PM
1) Script Title:
Ultimate Fade in Slideshow
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
12-18-2008, 05:05 AM
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
12-18-2008, 05:11 AM
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
12-18-2008, 04:22 PM
I'm going to start with the first solution and see what happens.

Then I'm going to do the 2nd.

jkanko
12-18-2008, 04:35 PM
correction, the 2nd solution was a little easier to implement on the page so I'm going with that one first...

jscheuer1
12-18-2008, 11:40 PM
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
12-19-2008, 12:37 AM
Yep, both methods should work. John's is easier to implement if you don't have any experience with JavaScript yourself.

jkanko
12-19-2008, 07:16 PM
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
12-19-2008, 08:31 PM
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
12-21-2008, 12:24 AM
i've implemented it for about 40 images on a site...

awaiting some results...

jscheuer1
12-21-2008, 01:00 AM
i've implemented it for about 40 images

Are you trying to track clicks on the images, views of the images, or actual navigation to the links represented by the images, or possibly something else?