Tim

Footprints in the snow of a warped mind

jQuery

Where to find me

Flickr Icon  Twitter Icon  Linked In Icon  FaceBook Icon  Windows Live Alerts Butterfly  RSS 2.0 

FreeAgent Small Business Online Accounting
Business Protection by Crisis Cover

Tag Cloud

AJAX (4) Analysis (3) ASP (6) ASP.Net (59) Error Reporting (4) Web Service (2) WSDL (1) Atlas (2) Azure (1) Born In The Barn (1) Business (89) Business Start-up Advice (32) Client (17) Expanding Your Business (23) Recruitment (1) C# (22) Canoeing (4) Canoe Racing (5) Cheshire Ring Race (5) Racing (2) Training (4) CIMA (1) Cisco (1) 7970G (1) CMS (1) Code Management (1) Cohorts (4) Commerce4Umbraco (1) Content (1) Content Management (1) Content Management System (1) CSS (4) dasBlog (5) DDD (2) DDDSW (1) Design (11) Icons (1) Development (26) Domain Names (1) eCommerce (12) Employment (2) General (39) Christmas (6) Fun and Games (11) Internet (22) Random (46) RX-8 (8) Git (1) Google (1) Google AdWords (1) Google Analytics (1) Hacking (1) Helpful Script (3) Home Cinema (2) Hosting (2) HTML (3) IIS (11) iPhone (1) JavaScript (5) jQuery (2) Marketing (6) Email (1) Multipack (1) MVC (1) Networking (3) Nintendo (1) Nuget (1) OS Commerce (1) Payment (1) Photography (1) PHP (1) Plugin (1) PowerShell (3) Presentation (1) Press Release (1) Productivity (3) Random Thought (1) Script (2) Security (2) SEO (6) Server Maintenance (7) Server Management (12) Social Media (2) Social Networking (3) Experiment (1) Software (11) Office (5) Visual Studio (14) Windows (5) Vista (1) Source Control (1) SQL (9) SQL Server (19) Statistics (2) Stored Procedure (1) Sublime Text 2 (1) SVN (1) TeaCommerce (1) Testing (2) The Cloud (1) The Site Doctor (136) Turnover Challenge (1) Twitter (3) uCommerce (13) Umbraco (31) 2009 (1) 2011 (1) Useful Script (2) Virtual Machine (1) Web Development (71) WebDD (33) Wii (1) Windows Azure (1) XSLT (1)

Blog Archive

Search

<May 2013>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

Recent Comments

Blog Archive

Various Links

Google+

Blogs I Read

[Feed] Google Blog
Official Google Webmaster Central Blog
[Feed] Matt Cutts
Gadgets, Google, and SEO
[Feed] Ol' Deano's Blog
My mate Dean's blog on my space, equally as random as mine but not off on as much of a tangent!
[Feed] Sam's Blog
Sam is one of my younger brothers studying Product Design and Manufacture at Loughborough, this is his blog :) Enjoy!

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

newtelligence dasBlog 2.2.8279.16125

Send mail to the author(s) Email Me (Tim Gaunt)

© 2013 Tim Gaunt.

Sign In

# Wednesday, October 24, 2012

Track Google Analytics and Google AdWords conversions on click with jQuery

Wednesday, October 24, 2012 5:10:55 PM (GMT Daylight Time, UTC+01:00)

Today we needed to track conversions in Google Analytic and Google AdWords when a user clicked a button. There are a fair few posts around with different ways to do this but as it's something we've needed to do before so I thought I'd wrap it up into a quick jQuery plugin.

I've popped the script below for you and on github as a gist here: https://gist.github.com/3946934

Please note: To track Google Analytics, you will need to make sure that the standard Google Analytics tracking code (the new version) is included on your page.

The jQuery Plugin

/*!
* Conversion Tracker: a jQuery Plugin that tracks an event in both Google Analytics and Google AdWords
* @author: Tim Gaunt (@timgaunt)
* @url: http://blogs.thesitedoctor.co.uk/tim
* @documentation: http://blogs.thesitedoctor.co.uk/tim
* @published: 24/10/2012
* @license Creative Commons Attribution Non-Commercial Share Alike 3.0 Licence
*		   http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* ----------------------
* Usage
* ----------------------
* $('a').trackConversion({ goalId: Your AdWords Id });
*
*/
;if(typeof jQuery != 'undefined') {
	jQuery(function($) {
		$.fn.extend({
			trackConversion: function(options) {
				var settings = $.extend({}, $.fn.trackConversion.defaults, options);
			
				return this.each(function () {
					var $$	= $(this),
						o	= $.metadata ? $.extend({}, settings, $$.metadata()) : settings;

					$$.click(function(e){
						if(getValue($$, o.trackAnalytics) && (typeof _gaq != 'undefined')){
							_gaq.push(['_trackEvent', getValue($$, o.label), getValue($$, o.action), getValue($$, o.value)]);
						}
						
						if(getValue($$, o.trackAdWords) && getValue($$, o.goalId) > 0){
							var randomNum = new Date().getMilliseconds();
							var trackUrl = "http://www.googleadservices.com/pagead/conversion/" + getValue($$, o.goalId) + "/?random=" + randomNum + "&value=" + getValue($$, o.conversionValue) + "&label=" + getValue($$, o.label) + "&guid=ON&script=0&url=" + getValue($$, o.url);
							$('<img />', {src:trackUrl, width:1, height:1 }); 
						}
					});
				});

				function getValue(link, value) {
					return (typeof value !== "function") ? value : value(link);
				}
			}
		});

		$.fn.trackConversion.defaults = {
			trackAnalytics:true,
			trackAdWords:true,
			url: function(){ return encodeURI(location.href); },
			goalId: 0,
			label: "Conversion",
			action: "Click",
			value: "",
			conversionValue: 1
		};

	}(jQuery));
}
 

Don't forget to follow me on Twitter.

# Monday, July 12, 2010

Automatically add a show and hide link to any object with jQuery

Monday, July 12, 2010 8:09:58 PM (GMT Daylight Time, UTC+01:00)

jquery-logo_png[1]There are plenty of tutorials around that show you how to show or hide a div with jQuery, you can find a load on Google but I wanted something that was re-usable throughout our projects so I created the addShowHideLink jQuery plugin.

We’ve been using it across a few projects including Crisis Cover for a while now and it’s catered for all our needs. Let me know if there’s any other options you want added.

I’ve not published any of our plug-ins before so forgive me if there are some obvious errors but I figured someone else would find it useful.

What does it do?

Simple: It hides the specified object and adds a link that shows the object when clicked. It also swaps the show text to the specified hide text automatically.

How do I use it?

I’ve kept it as simple as possible but have hopefully given it enough functionality to suit your needs.

Basic Usage

$('#objectToHide').addShowHideLink();

Used with options

$('#objectToHide').addShowHideLink({ 
		linkClass: 'showHideLnk',
		paraClass: 'showHide',
		openClass: 'showHideOpen',
		showText: 'Show Advanced Options',
		hideText: 'Hide Advanced Options',
		linkActions: function(){
			alert('The link was clicked');
		}
	});

 

How do I get it?

I’ve uploaded a more complete example to: http://blogs.thesitedoctor.co.uk/tim/Plugins/addShowHideLink/ so you can get a quick idea of what it does.

You can download the plug-in here.

Thanks to Trevor Morris for his jQuery skeleton starter framework.

 

Don't forget to follow me on Twitter.