Archive

Posts Tagged ‘jquery’

How to add google analytics tracking code to website ?

April 30th, 2014 No comments

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

Remote JSON made easy with jQuery

October 24th, 2010 1 comment

There are times when people resort to server side code instead of keeping code on client side to skip through voluminous JavaScript code and the additional technical logic that needs to be maintained.

One such scenario is when the JSON data for certain UI-related logic has to come from a different site. Due to http://en.wikipedia.org/wiki/Same_origin_policy restriction, this might not be possible with straight JavaScript. Here, the most favorite workaround is either to set up a proxy on the server side which calls the cross domain data and then use it on the client side, or move the handling of the logic complete to the server side. This is fine for certain not-so-popular sites with limited APIs. But not for Web 2.0-aware sites, especially for almost all of the social networking sites.

Why so? This is because, most of these sites offer a callback functionality whenever a URL is invoked requesting the data. While this would not make any difference for a browser to bypass the Same Origin Policy restriction, this could be utilized to a developer’s advantage. The callback-enabled URLs wraps the JSON data with a function. For example, consider this JSON data:

[

{

name:”Krupa”,

age:20,

department:”IT”

}

]

Read more…

Categories: Programming / tutorials Tags: ,

Tracking form abandonment through jquery and google analytics

October 24th, 2010 No comments

This is nice post from Sam who has come up with idea of using jquery to track user’s abandonment for any website when have to fill out a form.  Web site owners who have forms would have experienced this sometime or another of user’s quitting when it comes to fill up forms.

This would help them to analyze what part of forms they really hated when they decided to call quits. Here is the post

JQuery Validation Tutorial

April 18th, 2010 28 comments

This JQuery CSS validation tutorial explain how to do client-side validation using jQuery’s validation plugin. This is how the validation snapshot of the validation page. The link to download the code is at end of this tutorial.

snapshot

Read more…

Categories: Programming / tutorials Tags: , , ,

Jquery Tutorial With Javascript

January 27th, 2010 No comments

Introduction

Today JQuery is a buzz in every tinsel town. From the day web sites began coming into the world wide web space, developers are trying hard to please their users. Javascript arrived and it added spices in it. Developers began playing with javascript and created tens of thousand useful things for the users and made things interactive. But this comes with a price. Creating and maintaining javascript application requires a lot of patience and a lot of trial and error. On the top of this if we wanted to  write  a piece of javascript that creates effects and animation, we had make sure every thing is working and sometimes struggling with table, div, span bla  bla bla. JQuery came into the picture like life savior and it made our life very much comfortable. Just have a look at the piece of code written below :-

<html>
<head>
<script src=”jquery-1.3.2.js”></script>
<script>
$(document).ready(function(){
$(”p”).click(function(){
$(this).hide()
})
})
</script>
</head>
<body>
<p>You click on me, I will come after “Introduction”</p>
</body>
</html>

You can download code examples used in this tutorial here jquery code examples

This is just beginning and it can bring a lot of fun on your website. Imagination is the only limit.

Objective

(1)   What is JQuery

(2)   Why use JQuery

(3)   How JQuery works

(4)   Creating effects with JQuery

(5)   JQuery with server side technologies (ASP.net)

(6)   Future of JQuery Read more…