Adding Google analytic code to links

Cwestney · 2010-09-10 15:07:02 UTC

Hi everyone,

What's the best way (or indeed any way) to add extra attributes to links?

For all internal links to pdfs, and for selected external links, I'd like to add an onlick attribute so that the pdf downloads and visits to those external sites are logged in Google Analytics.

Eg for pdfs:

onclick="javascript:urchinTracker('/pdfdownloads/pdf-filename.pdf');"

Eg for external links:

onclick="javascript:urchinTracker('/outgoing/www.externalsiteurlhere.com');"

Ideally I'd like to set all links to all pdfs to have that attribute written out automatically when an author creates a link to a pdf in the WYSIWYG editor - can I use a trigger event for this, and if so what do I get it to do?

For the external links, the web admin needs to have a way to select which links get the attribute added.

Any suggestions very welcome,

thanks!

nnhubbard · 2010-09-10 18:06:18 UTC

I would highly recommend that you do not use onclick statements. Try to seperate your js code into a seperate file rather than using inline.

For Pacific Union College we always use jQuery, so we bind events to any "media" links:

    $(document).ready(function() {
    						   
    	// ----- Global -----
    	// Lets start tracking files
    	$("a[href*='.pdf'], a[href*='.doc'], a[href*='.xls'], a[href*='.ppt']").click(function() {
    		pageTracker._trackPageview('/doc/' + $(this).attr('href'));
    	});
    	$("a[href*='.mov']").click(function() {
    		pageTracker._trackPageview('/video/' + $(this).attr('href'));
    	});
    	$("a[href*='.zip']").click(function() {
    		pageTracker._trackPageview('/file/' + $(this).attr('href'));
    	});
    	$("a[href*='.mp3']").click(function() {
    		pageTracker._trackPageview('/audio/' + $(this).attr('href'));
    	});
    	
    });

So, now when we look at Google Analytics, we just search for /doc or /video and it will show us all the files that have been tracked. It works super well.

rmacdonald · 2010-09-12 22:42:41 UTC

Hmm, gonna give this a go! Thanks Nic!

Cwestney · 2010-09-13 08:34:35 UTC

Hi Nic,

That is exactly what I want to do, that is such a great solution - thankyou!

So, the code above goes into a seperate .js file, which is linked to in the <head> section of every page, simple as that?

Thanks again,

Charlie.

nnhubbard · 2010-09-13 15:57:07 UTC

[quote]
Hi Nic,

That is exactly what I want to do, that is such a great solution - thankyou!

So, the code above goes into a seperate .js file, which is linked to in the <head> section of every page, simple as that?

Thanks again,

Charlie.

[/quote]

Yes, it is simple as that. Just make sure that you have included the jQuery library as well.

jcandiloro · 2010-09-16 22:51:01 UTC

Thanks for this Nic. Extremely useful piece of code.

nnhubbard · 2010-09-16 23:11:33 UTC

One other important thing to be aware of is that since you are calling the pageTracker._trackPageview method from Google's code, you MUST put the Google's analytics js code above where you are including the bind code that I posted.

jacoswart · 2012-03-28 21:58:22 UTC

Hey Nic,

We are keen to try this out. One question though:

Does it make any difference if you allow Unrestricted Access or not?

Thanks,

Jaco

nnhubbard · 2012-03-28 22:08:49 UTC

[quote]
Does it make any difference if you allow Unrestricted Access or not?

[/quote]

Nope, that doesn't make a difference.

jacoswart · 2012-03-29 01:00:36 UTC

[quote]
Nope, that doesn't make a difference.

[/quote]

Thanks Nic

nnhubbard · 2012-03-29 01:04:14 UTC

[quote]
Thanks Nic

[/quote]

What was posted above is old. You should use the following for the newest versions of Google Analytics:

    $(function (){
    	
    	$("a[href*='.pdf'], a[href*='.doc'], a[href*='.xls'], a[href*='.ppt']").click(function() {
    		_gaq.push(['_trackPageview', '/doc/' + $(this).attr('href')]);
    	});
    	$("a[href*='.mov']").click(function() {
    		_gaq.push(['_trackPageview', '/video/' + $(this).attr('href')]);
    	});
    	$("a[href*='.zip']").click(function() {
    		_gaq.push(['_trackPageview', '/file/' + $(this).attr('href')]);
    	});
    	$("a[href*='.mp3']").click(function() {
    		_gaq.push(['_trackPageview', '/audio/' + $(this).attr('href')]);
    	});
    	
    });// end ready

jacoswart · 2012-04-04 03:33:06 UTC

I had to add (jQuery) to the last line, so that the last line reads:

    })(jQuery);

Working very well, thanks!

nathanbooth · 2015-03-02 11:22:45 UTC

It was suggested that I add the code to the content page [design asset] parse file - where the standard tracking code lives (have removed UA code):

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxx-x', 'auto');

ga('send', 'pageview');

</script>

Just wondering where I add in the new code... is it within the existing script?

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxx-1', 'auto');

ga('send', 'pageview');

$(function (){

         $("a[href*='.pdf'], a[href*='.doc'], a[href*='.xls'], a[href*='.ppt']").click(function() {
        _gaq.push(['_trackPageview', '/doc/' + $(this).attr('href')]);
    });
    $("a[href*='.mov']").click(function() {
        _gaq.push(['_trackPageview', '/video/' + $(this).attr('href')]);
    });
    $("a[href*='.zip']").click(function() {
        _gaq.push(['_trackPageview', '/file/' + $(this).attr('href')]);
    });
    $("a[href*='.mp3']").click(function() {
        _gaq.push(['_trackPageview', '/audio/' + $(this).attr('href')]);
    });

});

</script>

nnhubbard · 2015-03-02 16:34:48 UTC

Just wondering where I add in the new code... is it within the existing script?

No, ideally this should go in an external .js file at the bottom of your page. Just make sure to include jQuery first.

nathanbooth · 2015-03-03 03:26:49 UTC

Thanks Nic, so should it be like on your PUC site? (substitute UA code and URL)

Jquery is already running at start of the set of JS files in Squiz.

With this below...

Which then goes into...

/**
* Binds a click event on all media links so we can know visists
*
* @version $Revision: 0.1
*/
puc.trackMedia = function() {
$("a&#91;href*='.pdf'], a&#91;href*='.doc'], a&#91;href*='.xls'], a&#91;href*='.ppt']").click(function() {
	var url = $(this).attr('href');
	ga('send', 'event', 'button', 'click', 'Document '+$(this).attr('href'));
});
$("a&#91;href*='.mov']").click(function() {
	ga('send', 'event', 'button', 'click', 'Video '+$(this).attr('href'));
});
$("a&#91;href*='.zip']").click(function() {
	ga('send', 'event', 'button', 'click', 'Zip '+$(this).attr('href'));
});
$("a&#91;href*='.mp3']").click(function() {
	ga('send', 'event', 'button', 'click', 'Audio '+$(this).attr('href'));
});

// Event Tracking
$("#social-sharing a").click(function() {
	ga('send', 'event', 'button', 'click', $(this).attr('title'));
});

}//end trackMedia

nnhubbard · 2015-03-03 05:51:17 UTC

Correct. That should work.