Categories
Javascript jQuery Quick Tips Resources

Track Outbound Links – Google Analytics

Goal: Use JS to automatically track outbound links that do not have a target=”_blank” attribute – in a dynamic and informative way.

Earlier in the week I was tasked with implementing Google’s Analytics system onto a fleet of websites that have different hostnames. This created many outbound links that weren’t tracked because they lacked a target=”_blank” attribute. This is a solution for websites using tools such as WordPress – and a plugin will be available eventually.  I’ve created a small snippet of Javascript/JQuery to run through a page, checking for external links – and modifying them to be tracked by Google’s servers with an onClick event. In using jQuery to solve this problem, you need to ensure you load jQuery into your page before running any of my script.

Step 1: Google’s Launch Pad – trackOutboundLink

Google has provided a function for converting a given URL into an event name for use in Analytics found here : https://support.google.com/analytics/answer/1136920?hl=en. This is standard Javascript and does not need to live within a jQuery wrapper. This function needs to be placed in the head of the document and not restricted in it’s runtime by a jQuery document.load() call.

Step 2: Checking URL Against the Hostname

Below we create a new function for comparing if a hostname is within a URL. The function takes ‘a’ and ‘b’ as variables, if unset return false, otherwise return the index position of our ‘b’ variable and check if it’s greater than or equal to index position 0. Greater than 0 means the string was found in our tested URL and will return true. Returning true implies the URL is internal, and can be left as is.

	function urlInternal(a, b) {
			if (!a || !b) {
				return false;
			} else {
			    return a.indexOf(b)>= 0;
			};
	};

Step 3: Checking and Appending Anchors

For each anchor tag on the page, we get the href attribute and run it through our urlInternal function. Note the ! before my function call, if this weren’t here we would be evaluating all of the true statements where we want false (URL is NOT internal) results only. If the URL is external, using Google’s function and some concatenation – we write the new onclick attribute.

	var $hostBaseUrl = window.location.hostname;

	jQuery('a').each(function() {
			var $this = jQuery(this);
			var $url = $this.attr('href'); 

			//console.log($url,$hostBaseUrl,$linkBaseUrl);

			if(!urlInternal($url,$hostBaseUrl)){
				var $linkBaseUrl = $this.prop('hostname');
				var	$linkBaseLocation = "trackOutboundLink('http://" + $linkBaseUrl + "'); return false;";
				$this.attr('onclick',$linkBaseLocation);
				return;
			}
		});

Summary

Somewhere in the head of your page (that you want to change the link onClick of) include this function that we can call each time we find an external link.

	/**
	* Function that tracks a click on an outbound link in Google Analytics.
	* This function takes a valid URL string as an argument, and uses that URL string
	* as the event label.
	*/

	var trackOutboundLink = function(url) {
	   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
	     function () {
	     document.location = url;
	     }
	   });
	}

Run this script before the function and you should be good to go.

jQuery(document).ready(function(){

	/**$hostBaseUrl saves the current URL's hostname for later use. Eg: on google.ca/happy/two.pdf -> google.ca is our hostname **/
	var $hostBaseUrl = window.location.hostname;

	/**Check if a, b are set variables and then check if b occurs in a - returns true or false because of >= 0**/
	function urlInternal(a, b) {

			if (!a || !b) {
				return false;
			} else {
			    return a.indexOf(b) >= 0;
			};

	};

	/**Scan through all anchor tags on the page and get their href attribute**/
	jQuery('a').each(function() {
			var $this = jQuery(this);
			var $url = $this.attr('href'); 

			/**If the link is NOT internal, get it's hostname and call Google's function to write the onclick attribute**/
			if(!urlInternal($url,$hostBaseUrl)){
				var $linkBaseUrl = $this.prop('hostname');
				var $linkBaseLocation = "trackOutboundLink('http://" + $linkBaseUrl + "'); return false;";
				$this.attr('onclick',$linkBaseLocation);
				return;
			}
	});
});
Categories
Hacking Quick Tips Software Tutorials

Stop Youtube from Asking to Use Your Real Name

UPDATE: Unfortunately, this doesn’t quite work anymore.

So you’re sick and tired of Youtube’s popup asking, “Do you want to use your real name with your Youtube channel?” No? How about the part where when you check ‘no’ and are greeted with, “Okay, we’ll ask you again later.

Here’s my quick tip to keeping your Google account separate from your otherwise anonymous Youtube account.

For this you will need a modern browser like Chrome, Firefox, Safari, etc. (which you should have anyways… please?) and the Ad-Block Plus Extension. It’s simple as far as implementation and will only take a minute after you’ve installed the extension.

How To

Going into your Ad Block Plus settings by right clicking on icon will open a dialog.

ad-block_Chrome

Go to the custom filter list in the options panel and select, “Manually edit filters” and add the line: ||s.ytimg.com/yts/jsbin/www-linkgplusdialog*

Click for a larger view.
Click for a larger view.

Don’t forget to add the “||” as they act as a catch all for http://, https://, and www prefix, which saves you from making three or four rules for one blocking.

Bonus: Block Video Annotations

||youtube.com/annotations_invideo*
Adding the line above to your custom filters will hide annotations in all Youtube videos, even while logged out.