How to track the ‘Like’ button

No site without a “like” button these days.

Your friendly marketer wanted to have a “like” button, as well as a “tweet this”, “share on Google+” and possibly a bunch of other social media buttons on the site to augment the reach of their content. The idea is that a product, some content, or any other piece of your site is so appealing that visitors will share it with their connections or circles, generating more demand.

Marketers expect shared content to have more impact on the recipients than content they create, mainly because trust is earned and cannot be bought.

That means that your friendly marketer really wants to know whether people use the share or like buttons! These are really good examples of “micro conversions”, actions that visitors do on your site. We need to track them. Obvious.

Most people, when creating a “like” or “share” button, start with the official documentation. It looks fairly straight-forward, and there are only two things that we need to look at in this context, really.

1. the edge.create event in the Facebook SDK for Javascript
2. the ref setting or data-ref attribute

While the second one is not strictly related to what we’re trying to do here, I’ll explain it anyway. But let’s start with …

Tracking Likes

First question, before we go into the implementation: Facebook tracks how often people click the buttons, right? And you can just go into Facebook and see your numbers there! So why on earth do we actually add additional tracking? Couldn’t we do something more useful? Or fun?

Yes, you’re right, Facebook does show data about your buttons on Facebook Insights. Fair enough.

But if you implement tracking, the number of clicks on those buttons becomes another metric in your Analytics UI. Your friendly marketer will be able to use that in all sorts of reports, e.g. broken down by her campaigns or maybe by products. In the Newspaper industry, she could break those numbers down by site section or create a calculated metric “shares per article views” or something similar.

Trust me, she’ll want you to implement this. And it is relatively easy to do.

The ingredients are: success event(s), conversion variables, the s.tl method and FB.Event.subscribe.

In order to analyse, your friendly marketer needs at least one success event to be sent when someone clicks the button. This falls into the “tracking an action” pattern, meaning we should use the s.tl method to track it.

	var s=s_gi(YOUR_RSID); // put your rsid here
	s.events="event65"; // like button clicks
	s.linkTrackVars="events";
	s.linkTrackvents="event65";
	s.tl(this,'o','FB Like Button Click');

That snippet of code will track a success event, so all we need now is to trigger that when someone clicks the button.

The documentation on FB.Event.subscribe comes with a small example which we can use.

	FB.Event.subscribe('edge.create',
    function(href, widget) {
        alert('You liked the URL: ' + href);
    }
);

I’d say it should be pretty straight-forward to combine these two, like so:

	FB.Event.subscribe('edge.create',
    function(href, widget) {
		var s=s_gi(YOUR_RSID); // put your rsid here
		s.events="event65"; // like button clicks
		s.linkTrackVars="events";
		s.linkTrackEvents="event65";
		s.tl(widget,'o','FB Like Button Click');
    });

Note how I used widget instead of this for the first parameter of the s.tl method? That was a guess. Looking at the documentation, it turns out the guess was wrong:

The first argument should always be set either to this (default) or true. The argument refers to the object being clicked; when set to “this,” it refers to the HREF property of the link.
If you are implementing link tracking on an object that has no HREF property, you should always set this argument to “true.”

Ok then, “true” it is.

The documentation also reminds us that for newer browsers to reliably execute custom tracking, we might want to use the overloaded s.tl call with the doneAction parameter.

	FB.Event.subscribe('edge.create',
    function(href, widget) {
		var s=s_gi(YOUR_RSID); // put your rsid here
		s.events="event65"; // like button clicks
		s.linkTrackVars="events";
		s.linkTrackEvents="event65";
		s.tl(true,'o','FB Like Button Click',null,'navigate');
    });

Note: you have to use s_code version H.25.4 or later for this! If you implemented before February 2013, you might be on an older version.

Note: I must be the only person in our industry who is not on Facebook. I have therefore not tested the code above. Please make sure you debug properly!

“Earned Content” Tracking

Remember how we said that for campaign tracking, the most important bit is to put “tracking code” onto the URL back to the site so we can see which campaign it was that prompted the user to click and come to the site?

The same could be said for likes and shares. We would like to know how many people actually come to the site because someone shared some of it. Right?

That’s what the ref/data-ref bit can do for us.

If you include a “tracking code” into ref or data-ref, Facebook will add that very code into an fb_ref URL parameter when someone in Facebook clicks on the link to the page or item that has been liked. Meaning: when that someone ends up on your site, you can grab the code from the URL!

That looks a lot like campaign tracking, and I would argue it is. So let’s treat it that way, grab the fb_ref parameter using the getQueryParam plugin within the s.doPlugins method in the s_code.js file.

We might put it into the s.campaign variable (and treat it like any other campaign), or we might use a separate conversion variable. Your friendly marketer should decide.

I don’t think I really need to re-iterate how that works, but just in case, here’s the code:

	s.campaign=s.getQueryParam('fb_ref');
	s.campaign=s.getValOnce(s.campaign,'s_cmp',0);

And that’s it.

Notes

Just as you can track likes, you can use the same techniques to track “unlikes” by registering a callback for edge.remove.

It makes sense to use a different success event for that, of course.

Speaking about events: if your site offers more social media buttons than just Facebook, I would suggest you assign one success event for “Social Interaction” and have that one fire on all of them. You would probably still have (a) dedicated event(s) for the most used social network.

I mentioned conversion variables as well.

They could be used to tie the likes to the object that was liked.

On a media site, the eVar would likely contain the article name or ID, and you would likely use SAINT to add meta data like article author, article subject (“technology”) or site section (“sports”).

On a retail site, the eVar should contain a product ID or maybe also a content ID, for example if the visitor is sharing a promotional video.

Remember that you do not have to assign a dedicated eVar for information that you are already capturing in other eVars! Your success events will be attributed to whatever values all eVars currently hold.

As an example: if your marketer sends an email campaign and a visitor follows through to the site, looks at a product and then hits “like”, the success event does tie back to the campaign tracking code that was captured on the landing page.