Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: I wish to add Google analytics click tracking to the slideshow, as described here, http://support.google.com/analytics/.../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>
    Code:
    	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,

    Code:
    	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
    Code:
    trackOutboundLink(this, '''
    Can I just change it to something like above, then just modify the initialisation code to be,

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

  2. #2
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;

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

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

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

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

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

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

Similar Threads

  1. Ultimate fade in slideshow pauses when you click next
    By jg2011 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 02-18-2011, 11:47 AM
  2. Adding a Magnify link to the Ultimate Fade-in slideshow (v2.4)
    By bbz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-03-2010, 06:49 AM
  3. Ultimate Fade-in slideshow - need click event to restart slideshow
    By Webster in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-10-2010, 06:33 AM
  4. Ultimate Fade-in slideshow - Adding Onclick
    By ryant in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-28-2009, 10:32 PM
  5. ultimate slideshow - google analytics
    By jkanko in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 12-21-2008, 01:00 AM

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
  •