Home > Programming / tutorials > How to add google analytics tracking code to website ?

How to add google analytics tracking code to website ?

So your new shiny website is ready and you have opened it to public. You can measure page views, uniques but not sure what users are doing on their site. You have a search button but not sure how are the users using it.

Do you know you can track the events on your website using google analytics code ?

Please ensure that you are using google Universal analytics which is out of beta as of April 2014. If you are using google universal analytics and using old code, the tracking will not work.

Make sure that you have upgraded to Universal Analytics , if you are not suing Universal Analytics

How do you know if you are already on the google universal analytics ?

A Classic Google Analytics account has an option in this column called Tracking Code. A Universal Analytics account has an option called Tracking Info that includes more Admin settings like Session Settings and Organic Search Sources. These additional settings are only available to Universal Analytics properties. If you have these settings, you have a Universal Analytics property.

This is the code you will be seeing in new google Universal analytics


(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-42999935-1', 'skill-guru.com');
		  ga('send', 'pageview');

Here is the the code. This is without using jquery. This code has example for a click of button and a link cool



   <script type="text/javascript">
	
	  (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-4244435-1', 'studyn.us');
		  ga('send', 'pageview');

	</script>
	
	<script type='text/javascript'>
		function trackSubmit() { 
		
		ga('send', 'event', 'button', 'click', 'searchsubmit', 4);
		}
		
		function trackClick() { 
			ga('send', 'event', 'button', 'click', 'This is coool');
		}
	</script>
	
	<body>
	Pushing data.......

		<form onsubmit='trackSubmit()' id='frm'>
		    <button type='submit' id= 'searchsubmit'>Search</button>
		    
		    </br>
		    <a href='http://cool.com' onclick="trackClick(); return false;">cool</a>
		</form>
	
	</body>

How do you debug your google analytics code ?

Now you have written this google analytics code and would like to debug it or see the action.
I have used google analytics debugger for chrome to debug the output.

This is how the output would be in the console

google-analytics-submit-button-track

When you click on link cool, you would see this on console

Executing Google Analytics commands. analytics_debug.js:9
Running command: ga(send, event, button, click, This is coool)

When you click on the submit button , you will not see any output on console.
Do you know the reason why ?

Because the event gets fired , gets printed on console but then page gets submitted and everything gets overridden.

Add this alert after line 16 on code

  alert('testing send event')

Once you run the page, you can see the event being fired. Look at the red arrow in image.

If you do not want form submit , use this on your submit button

 <button type='submit' id= 'searchsubmit2' 
onClick="ga('send', 'event', 'button', 'click', 'searchsubmit', 4);">Search2 </button>

Using google universal analytics code with jquery. Use the method below


 		var _this = this;
			ga('send', 'event', 'button', 'submit', {
			    'hitCallback': function() {
			        $(_this).parents('frm').first().submit();
         }
	}); 



Hope this helps.

Google Universal Analytics Reference

  1. No comments yet.
  1. No trackbacks yet.