View the Project on GitHub
(https://github.com/mturnwall/Analytics_Class)
This is a javascript class that makes it real easy to add custom google analytics tracking to any web site. The goal of this class is to reduce the amount of custom javascript that needs to be written for custom google analytic tracking.
Right now the code automatically tracks all outbound links except for social sharing links such as facebook.com or twitter.com. Links and forms are also tracked but require very minimal setup.
There are two ways to setup GA on your page. There is the traditional way which uses the javascript provided by Google or you can use GA's built-in loadProviders() method.
Include jQuery and the analytics.js file on your page. Don't forget to include the default tracking code from Google. If you want to see if your events are tracking correctly replace all references to /ga.js with /u/ga_debug.js. You'll now see a bunch of analytics output in your browser's console.
Once those files and code are added to the page you need to call the init() method. The method takes two arguments. The first argument is an object of the custom click events you want to track. The second argument is the options you want to set. You can find a list of available options below.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/analytics.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
GA.init({
'requestInfo': ['_trackEvent', 'Request More Information', 'link'],
'siteSearch': ['_trackEvent', 'Quick Search', 'main search'],
'printPage': ['_trackEvent', 'Print', 'current page'],
'social': [['_trackSocial'], ['_trackEvent', 'Social share']]
}, {
domain: 'example.com',
timer: 500
});
</script>
The simpler method is to use the loadProviders() method. This will load the Google analytics file for you and set everything up. You pass an object to the method with the options you want to set for Google Analytics.
GA.loadProviders({
'Google': {
'trackingId': 'UA-XXXXXX-X',
'domain': 'example',
'enhancedLink': true
}
});
If the only setting you need to set is the tracking ID you can just pass that as a string.
GA.loadProviders({
'Google': 'UA-XXXXXX-X'
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/analytics.js"></script>
<script type="text/javascript">
/*
you can also call the loadProviders() method with just the GA tracking ID
GA.loadProviders({
'Google': 'UA-XXXXXX-X'
})
*/
GA.loadProviders({
'Google': {
'trackingId': 'UA-XXXXXX-X',
'domain': 'example',
'enhancedLink': true
}
});
GA.init({
'requestInfo': ['_trackEvent', 'Request More Information', 'link'],
'siteSearch': ['_trackEvent', 'Quick Search', 'main search'],
'printPage': ['_trackEvent', 'Print', 'current page'],
'social': [['_trackSocial'], ['_trackEvent', 'Social share']]
}, {
domain: 'example.com',
timer: 500
});
</script>
For each custom tracking event you need to add a new property into the gaEvents object. Then you need to add two data attributes to your element, data-analytics-type and data-analytics-info. The attribute data-analytics-type refers to the property you added to gaEvents.
Here is an example of tracking a link to request more information. The analytics people would like this information sent whenever a link to request more information is clicked ['_trackEvent', 'Request More Information', 'link', product name] (where product name is a string representing the name of the product)
Call the class constructor. Notice that I left off the "product name" part, this is on purpose and will become apparent why in a moment.
GA.init({
'requestInfo': ['_trackEvent', 'Request More Information', 'link']
});
On the “request more information” link itself we add the two analytic attributes, "data-analytics-type" and "data-analytics-info".
<a class="printPage" href="#" data-analytics-type="requestInfo" data-analytics-info="Limited Fancy Widget">Request More Information</a>
When those pieces are in place here is the information that will get pushed to the _gaq object:
['_trackEvent', 'Request More Information', 'link', 'Limited Fancy Widget']
So data-analytics-type holds the value of the key in the object we sent to the Analytics Class constructor and data-analytics-info holds the additional information we left off. The product name was originally left off because it is a variable that will be different with every link so a way was needed to pass that variable information to the javascript. Since you are probably using some kind of back-end to render your templates, we pass that responsibility to the back-end since it probably is already writing that information to the page in other places.
Now the data-analytics-info won't always be needed. For example a “Print Page“ link would just need this information: ['_trackEvent', 'Print', 'current page']. If that is the case you can just leave the data-analytics-info attribute off the link.
All outbound links are tracked automatically. If you wish to disable tracking of outbound links, make the trackOutbound option "false".
Tracking a form is just a matter of adding some attributes to your form tags and any form controls you want to track. Just like with links you need to add a data-analytics-type attribute to the form that has a value that matches a key in your gaEvents object.
By default no values from the form controls are passed as arguments to the tracking code so you need to add an attribute to any form control you want to track, data-analytics-track-value="true". Any form control that has the data-analytics-track-value will have it's value concatenated to a colon (:) delimited list and passed as an additional argument to the tracking code.
Here is an example form that has the custom data attributes added.
GA.init({
'contactUs': ["_trackEvent", "Contact Us"]
});
<form id="contactForm" action="search.php" method="post" data-analytics-type="contactUs">
<input type="hidden" name="sessionId" value="1234567890" data-analytics-track-value="true">
<label for="fName">First Name:</label> <input id="fName" type="text" name="fName" value="" data-analytics-track-value="true">
<label for="lName">Last Name:</label> <input id="lName" type="text" name="lName" value="" data-analytics-track-value="true">
<span>Gender:</span>
<label for="maleRadio">Male:</label> <input id="maleRadio" type="radio" name="gender" value="male" data-analytics-track-value="true">
<label for="femaleRadio">Female:</label> <input id="femaleRadio" type="radio" name="gender" value="female" data-analytics-track-value="true">
<label for="newsletter">Newsletter</label> <input type="checkbox" id="newsletter" value="newsletterSignup" data-analytics-track-value="true">
<label for="agreeTo">Agree to something?</label> <input id="agreeTo" type="checkbox" value="agree" data-analytics-track-value="true">
<input type="submit" value="Submit">
In that form if you fill out the name fields, select the “Male” radio button, and the “Newsletter” checkbox, here is what will be sent to the tracking code.
[_trackEvent,'Contact Us','1234567890:Michael:Turnwall:male:newsletterSignup']
Here's a list of available options you can set when initializing the GA class.
GA - Analytics Class is relased under a GPLv3 license.
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/gpl-3.0.html>.