Wednesday, October 24, 2012

Track Google Analytics and Google AdWords conversions on click with jQuery

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));
}

Track Google Analytics and Google AdWords conversions on click with jQuery

Useful Links:            Comments [0]  Trackback

Tags: Google | Google AdWords | Google Analytics | HTML | JavaScript | jQuery | Plugin | The Site Doctor

 Thursday, October 18, 2012

CSS frameworks and column class names €“-why I think they are wrong

Before starting the new uCommerce demo razor store, we had a chat through the options as far as CSS frameworks were concerned. The main consideration we had was that it had to be a framework that the community was familiar with as we weren't looking to explain the framework but rather demo the uCommerce functionality.

The frameworks we considered using were:

• 960 Grid System
• Twitter Bootstrap
• Kube
• blueprint

One thing that has been bothering me for some time with all these various frameworks is the class naming convention they use for the columns.

The issue I have is that I still don't think it's clear and leaves me having to think -especially when you start moving over to a responsive design.

An Alternative Solution

For quite some time now we've been using an alternative class naming convention which I personally find far more descriptive and doesn't care about how many columns you're using.

It's simple, name the column classes as though they're "upside down fractions" e.g.: a column that spans 1 of two 2 columns on the page would be: .col-2-1 (there are two columns per row and you want this one to span 1 of those two).

Why's it better? Mainly because it's descriptive -so you know how may columns will be in the row and how many this column spans. You can easily spot areas to group columns together e.g. .col-4-2 should be .col-2-1. Want a 3 column layout with the centre column being 50% of the page? No problem:

<div class="col-4-1">
	<p>Column 1</p>
</div>
<div class="col-2-1">
	<p>Column 2</p>
</div>
<div class="col-4-1">
	<p>Column 3</p>
</div>

So how does it compare?

Assuming we're working on a 12 column grid:

Framework	Full Width	Half Width	Third Width	Grid View
960 Grid System	.grid_4	.grid_4	.grid_4
Twitter Bootstrap	.span12	.span6	.span4
Kube	N/A	.Half	.Third
blueprint	.span-12	.span-6	.span-4
Ours	.col-1-1	.col-2-1	.col-3-1

I realise that some people don't like fractions but I find that this naming convention a little easier to work with when mixing and matching column layouts. What do you think? How do you name your column classes?

CSS frameworks and column class names €“-why I think they are wrong

Useful Links:            Comments [1]  Trackback

Tags: CSS | Design | HTML | The Site Doctor | Web Development

 Tuesday, April 19, 2011

Fix Visual Studio’s crappy HTML formatting and automatic addition of id when pasting

Today I discovered two settings in Visual Studio that are about to transform my life (yes I realise that by just writing that I need to get out more.).

Anyway, the first stops Visual Studio formatting you code like this:

And transforms it into this:

To sort: Open Visual Studio, go to "Tools" -> "Options" -> "Text Editor" -> HTML -> "Formatting" and look for the button "Tag Specific Options" (in the bottom right). Click this button and you should get a window that looks like this:

Expand out "Default Settings" and then click "Client tag supports contents" and change "Line breaks" from "Before, after opening and after closing" to "Before and after" on "Client tag supports contents" and "Server tag supports contents".

This second one is another of those annoying bug bears of mine which is where Visual Studio insists on adding an id to every control you paste in -not something I really want in most cases. Anyway, sticking in the "Text Editor" -> "HTML" settings area, go to "Miscellaneous" and you'll see one there "Auto ID elements on paste in Source view" -uncheck that and click "OK" to save and apply your settings.

Looks like Visual Studio will become a decent HTML editor after all.

Fix Visual Studio’s crappy HTML formatting and automatic addition of id when pasting

Useful Links:            Comments [2]  Trackback

Tags: HTML | Visual Studio | The Site Doctor