Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: ultimate slideshow - google analytics

  1. #1
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question ultimate slideshow - google analytics

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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:

    Code:
    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.
    DD Admin

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""]
    It could be expanded thus (following your exemplar):

    Code:
    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:

    Code:
    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
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks guys

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

    Then I'm going to do the 2nd.

  5. #5
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

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

  8. The Following User Says Thank You to ddadmin For This Useful Post:

    jkanko (12-20-2008)

  9. #8
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question I used the 2nd solution but...

    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?

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    This:

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jkanko (12-20-2008)

  12. #10
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up got it...

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

    awaiting some results...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •