by Doug

16/05/2013

Google Analytics

Tracking clicks on social buttons with Google Analytics

The good the bad and the ugly

A common decoration for web pages is social buttonery:

Okay, you get the idea – there are plenty of ways of getting Like, Share, Tweet and Pin It buttons on your pages.

You want to do this to promote your site through social channels:  Understandable.

You want to know how many shares, Likes and Tweets you’re getting on a per page basis too, yes?

There are also plenty of ways of tracking these interactions using web analytics:

So far so good.

Okay, we have a few ways of dropping the buttons on pages and we have a couple of ways of tracking the clicks…so it seems.  How hard could it be?

Well, some subtle points are easy to miss.  Let’s assume you choose the AddThis route. Why wouldn’t you?  A simple snippet of markup is all it takes to drop in the standard buttons:

Easy so far.  Now to hook up the measurement according to the AddThis documentation this is what it takes:

So you end up with buttons that look like the shot below and should be tracked right?  Well, here’s where it gets interesting…

You’ll see Social interactions being recorded when users use the AddThis ‘Share’ button but not the Like, Tweet or PinIt buttons…

WHY?

Let’s look at the markup on the Like button as an example:

See what happened there?  An iframe with content from a 3rd party domain is used to render the Like button.  Now, browsers don’t let javascript ‘look’ at other tabs and ‘do stuff’ because that would be a bad thing.  3rd party iframe content is just the same – you can’t use javascript to track clicks on social buttons rendered in iframes.  Social interactions will not be recorded for Like and Tweet buttons rendered like this.

Meh.

All is not lost though.  The AddThis Share button markup is rendered inline so that is tracked.   What if there was an option to have buttons rendered inline like the Share button….?  Well, let’s choose these buttons and see:

Okay, what does the markup look like that we have to use?

Right – now, how does the button markup look when seen in a browser?

Bingo!  Trackable buttons using the AddThis integration.  Sweet!

But I need to see a Like and Tweet button!  Wah!’

Okay, you need a Like and Tweet button.  You need to track clicks on them.  You could use the Google suggested method:

http://analytics-api-samples.googlecode.com/svn/trunk/src/tracking/javascript/v5/social/facebook_js_async.html

This works but it’s more complicated and it’s not AddThis…

You could extend jQuery with an iFrame tracking plugin (I am currently investigating this):

http://www.finalclap.com/tuto/track-iframe-click-jquery-87/

But if you don’t use jQuery or you don’t want to extend jQuery and add further dependencies on your page then it’s time to compromise.

Social button tracking summary:

Currently you can’t have your cake (easy to implement Like and Tweet buttons) with icing/frosting (preferably using something tidy like AddThis) and eat it (track clicks on these buttons).

This is a work in progress…BRB

UPDATE 31/5/2013:

ShareThis is the way to go:

Looks good and all buttons are seen to track correctly.  Setup is a no brainer.  Use this.

http://tagify.co.uk/sharethis_thing.html

Comments

Leave a comment

Your email address will not be published. Required fields are marked *