Much Ado About Social Interaction Tracking

So you want to track social interactions on your website. How many times are people “Like”ing my content?  How many Tweets are my articles receiving?  Depending on the nature of your site, these can be very common questions. You may have learned that you can track anything in your imagination with some fancy JavaScript, from scraping text and passing it conditionally into your analytics request to tracking the first time a user changes a form field to create a pseudo-funnel for form abandonment.  So tracking these social interactions should be easy, right?  It’s just a button click, right?

Unfortunately, wrong.
 

Why Social Interaction Tracking is a Bear

If you inspect many of these widgets, including the Facebook Like button and the Tweet button, you’ll notice that they live within IFrames.  The kicker here is that these IFrames have source (or “src”) attributes that draw content from completely different domains, such as www.facebook.com or twitter.com.  The issue is that JavaScript that is executing from the parent frame’s window is restricted by the browser from accessing the context document inside IFrames that do not share the same domain as the parent frame.  Events inside of the IFrame do not bubble out to the parent, and you cannot crawl into the IFrame to bind onclicks.

Bummer, isn’t it?

Luckily, it appears as though many of these social vendors realized they were giving people lemons, so they also provided instructions on making lemonade.


Enter:  JavaScript APIs

The JavaScript APIs in this case are simply frameworks for hooking your custom JavaScript code into some sort of callback resulting from a user performing some action, such as Tweeting or Liking via the widget.  Here are a few examples to get you started.  Note that these APIs often have additional events and functionality you can tie into, but these should give you an idea as to what you can do.  Also, if you’re writing this logic into a TMS or a singular JS file at the top of the page, you may have to run intervals to check for the existence of the appropriate objects before attempting to bind.  Always practice safe coding with the appropriate error checking and you’ll be A-OK.

Additionally, remember that the function being passed to these APIs is called from the parent frame’s window, so you have access to all of the information on that page when creating the logic.  You can pull the page title, scrape the HTML for an article title, you name it. 

As long as you don’t name information in a different IFrame with a different domain.  Please don’t do that.


Facebook Likes

To hook into a user Liking a page for their Facebook account, you execute the following on the page after the Facebook widget has been created:

FB.Event.subscribe("edge.create",function(){

    // Execute your tracking code here

});

This callback does not just fire when the user clicks on the Like, but when the user actually Likes the page to their Facebook account. 


Twitter Events

To hook into a user Tweeting a page, you can call the following:

twttr.events.bind("tweet",function(){

  // Execute your tracking code here

});

This event only fires when the user actually tweets to their account, not just when they click.  Now, when I last tried the above code, it wasn’t working in all versions of IE.  As such, you can also include tracking for a user simply clicking on the Tweet widget, demonstrating an intent to tweet.

twttr.events.bind("click",function(){

  // Execute your “intent to tweet” tracking code here

});


What About Google +1?

Alas, not all JavaScript APIs are created equal.  The last time I investigated Google Plus’s API for their widget, it required configuration of the widget implementation itself, without having a separate API to simply hook events into for tracking purposes.  If you happen to have the freedom to modify the inline configuration, I recommend looking it up, because it is definitely possible.  If you need to implement it via TMS/otherwise, I unfortunately do not know a simple solution like some of the others at this time.

However, if anyone happens to know that it’s possible, and I happened to simply miss it, I’ll be more than willing to sprinkle my words into a nice, smooth pasta sauce and have them for dinner.


Exeunt

That’s all for now.  Hopefully you found this helpful, whether you needed to actually implement it or you were wondering why your technical resource hesitated/winced when you presented the requirement.  It still looks simple, and for some widgets it is.  For others, it may not be, though I’ll leave you with a spark of hope.

There’s a pretty whimsical way to track general clicks that occur on these IFrames that source from other domains, but that’s for another blog post.

Strike up, pipers.

 

 

By Adam McArdell
About the Author:

Adam McArdell is a Senior Technical Consultant at Stratigent.

Contact Us Now