Tracking Facebook Likes, Share, Send & Comments as Social Engagement in Google Analytics

There are already posted "tons of articles out there" about how to track Facebook Likes, Send & Comments as Social Engagement in Google Analytics, but since I also uses my own blog as a reminder of how to do things and a "script bank", I decided to write this blog post nevertheless.

Facebook Social Action Report in Google Analytics

To be able to track Facebook Likes, Share, Send & Comments on your web site, you have to use the XFBML version (Javascript SDK).

Below I have listed what that this article covers, and what you should do (or consider doing):

  1. Change your <html> opening tag
  2. Implement Facebook Meta Tags (Facebook AppID & AdminID)
  3. Register your web site as a Facebook App
  4. Implement Open Graph Protocol (Meta Tags)
  5. Use Facebook XFBML version (Javascript SDK) and load the script asynchronous
    1. Use Facebook channelURL to avoid problems with older versions of Internet Explorer
  6. Implement the Google Analytics Social Media Tracking Script
  7. Implement my script for tracking Traffic from Facebook Likes, Send & Comments in Google Analytics (and read that article as well)

Facebook and Open Graph Meta Tags

I recommend that you implement both Facebook and Open Graph Meta Tags. Open Graph Tags will give you better control of how your shared content will appear on Facebook and Google+ (Google+ is also using the Open Graph Meta Tags).

It's recommended that you change your <html> opening tag when implementing these meta-tags. Your new <html> tag should look something like the code below.

Remove formatting from Code

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" >

Facebook AppID and AdminID Meta Tag

To administer your page, you need to associate it with either your Facebook account or your Facebook Platform application. It is valid to associate your page with both user accounts and a Facebook Platform Application.

To associate the page with your Facebook account, add the additional property fb:admins to your page with a comma-separated list of the user IDs or usernames of the Facebook accounts who own the page.

Register your web site as a Facebook App, and implement the meta-tags below.

Remove formatting from Code

  1. <meta property="fb:app_id" content="130796876963854" />
  2. <meta property="fb:admins" content="12345678" />

Replace values in red with your values.

Open Graph Protocol (Meta Tags)

The Open Graph Protocol gives you better control of how your content are presented on Facebook and Google+.

Remove formatting from Code

  1. <meta property="og:title" content="Your Awesome Title for Your Page"/>
  2. <meta property="og:type" content="article"/>
  3. <meta property="og:url" content="http://www.domain.com/canonical-url-to-article"/>
  4. <meta property="og:site_name" content="YourSiteName"/>
  5. <meta property="og:description" content="Your Awesome Description up to 300 characters"/>
  6. <meta property="og:image" content="http://www.domain.com/facebook-picture-150x150px.png"/>

Since Google+ also uses this data, I recommend that the size of your og:image (Object Type) has a width of minimum 150 pixels and not 50 pixels (as recommended by Facebook) .

What kind of og:type (Object Types) you should use can always be discussed. In the example code above I'm using "article" as Object Type, which is recommended for a blog post like this. However, if you use a different Object Type, Facebook Insight will show you deeper information about "Likes" for that particular page, and you can post follow up messages on Facebook to those who have liked the page.

See also Open Graph protocol information on Facebook.

Facebook XFBML version (Javascript SDK)

Remove formatting from Code

  1. <div id="fb-root"></div>
  2. <script type="text/javascript">
  3. window.fbAsyncInit = function() {
  4. FB.init({appId: 'YourAppID', 
  5. status: true,
  6. cookie: true,
  7. xfbml: true,
  8. channelUrl : 'http://www.yourdomain.com/facebook/include/channel.html' // add channelURL to avoid IE redirect problems
  9. }); };
  10. (function() {
  11. var e = document.createElement('script'); e.async = true;
  12. e.src = document.location.protocol +
  13. '//connect.facebook.net/en_US/all.js';
  14. document.getElementById('fb-root').appendChild(e);
  15. }()); 
  16. </script>

Replace values in red with your values. The best place to put this code is right before the closing </body> tag according to Facebook.

See also Javascript SDK information on Facebook.

Facebook channelURL

The contents of the channel.html file should be this single line.

Remove formatting from Code

  1. <script src="http://connect.facebook.net/en_US/all.js" ></script>

See also FB.init information on Facebook.

Google Analytics Social Media Tracking Script for Facebook

Now that all the basic Facebook stuff is implemented, it is time to implement the script that will track Likes, Share, Send & Comments as Social Media in Google Analytics.

Replace values in red with your values. I also recommend that you don't implement this script as inline javascript, but instead save the script into a javascript file and point to that file to improve page speed.

Place this code below all your other Facebook scripts (before </body>).

Remove formatting from Code

  1. <script type="text/javascript">
  2. window.fbAsyncInit = function() {
  3. FB.init({appId: 'YourAppID', status: true, cookie: true, xfbml: true});
  4. try {
  5. if (FB && FB.Event && FB.Event.subscribe) {
  6. // Like and Share
  7. FB.Event.subscribe("edge.create",function(response) {
  8. if (response.indexOf("facebook.com") > 0) {
  9. // if the returned link contains 'facebook,com'. It's a 'Like' for your Facebook Page
  10. _gaq.push(['_trackSocial','Facebook','Like',response]);
  11. } else {
  12. // else, somebody is Sharing the current page
  13. _gaq.push(['_trackSocial','Facebook','Share',response]);
  14. }
  15. });
  16. // UnLike and UnShare
  17. FB.Event.subscribe('edge.remove',function(response) {
  18. if (response.indexOf("facebook.com") > 0) {
  19. // if the returned link contains 'facebook,com'. It's a 'UnLike' for your Facebook page
  20. _gaq.push(['_trackSocial','Facebook','UnLike',response]);
  21. } else {
  22. // else, somebody is UnSharing the current page
  23. _gaq.push(['_trackSocial','Facebook','UnShare',response]);
  24. }
  25. });
  26. // Facebook Send
  27. FB.Event.subscribe('message.send',function(response){
  28. _gaq.push(['_trackSocial','Facebook','Send',response]);
  29. });
  30. // Facebook Comments
  31. FB.Event.subscribe('comment.create',function(response) {
  32. _gaq.push(['_trackSocial','Facebook','Comment',response]);
  33. });
  34. FB.Event.subscribe('comment.remove',function(response) {
  35. _gaq.push(['_trackSocial','Facebook','UnComment',response]);
  36. });
  37. }
  38. } catch (e) {}
  39. };
  40. </script>

The script above is inspired from Google Analytics and from Yoast. In addition I have also added tracking of Facebook Comments.

Yoast's version tracks interaction with Facebook Like & Send buttons (this will be tracked as "Share" or "Send"), and with the Facebook Like Box (this will be tracked as "Like").

Now that all the basic code and tracking scripts are in place, it's time to implement buttons, boxes or comment fields on your site.

Facebook Share & Send Button

Remove formatting from Code

  1. <fb:like href ="http://domain.com/canonical-url-to-article" send="true" layout="button_count" show_faces="false" font="arial" ref="facebook_your-campaign-name"></fb:like>

See also Like Button info on Facebook and my article about How to Track Traffic from Facebook Likes, Send or Comments in Google Analytics.

Facebook Like Box

Remove formatting from Code

  1. <fb:like-box href="http://www.facebook.com/Savio.no" width="265" show_faces="true" stream="true" border_color="#ccc" header="false" ref="facebook_fb-page"></fb:like-box>

See also Like Box info on Facebook.

Facebook Comment Box

Remove formatting from Code

  1. <fb:comments width="500" num_posts="2" href="http://domain.com/canonical-url-to-article"></fb:comments>

Just so I have mentioned it, if you comment on your own site, your comments will not be tracked in Google Analytics.

See also information on Facebook about the Comment Box.

If you see anything that could be improved or errors (I'm not a programmer), or if you just found this article valuable, feel free to comment, Like, Tweet or G+.

Happy tracking Facebook Likes, Share, Send & Comments as Social Engagement in Google Analytics.

Related articles

Du kan følge kommentarer til denne posten med RSS. Du må ha javascript aktivert for å kunne kommentere. Tilbaketråkk er deaktivert.

Tags : , , ,

  • Meir
  • 10.08.2011 16:28:31
Great article, but

Tried to implement it in our Facebook applications, but all I see is "Not Socially Engaged" line in "Social Type" view. What could be the problem? Thanks
Hi Meir

Without seeing/checking the implementation is difficult to say. Can you share the URL to the web site where this is implemented?

Eivind
  • Meir
  • 12.08.2011 18:38:07
Hi Eivind,
Thanks for posting and help!
I am looking on a screenshot at the top of this article and I wish I found it long ago....
We develop native FB applications (Magento based) - this is the app I implemented your solution:
http://apps.facebook.com/rosoling/?___store=en_us

Meir
Hi Meir

Unfortunately one line of my code were missing in my article:
if (FB && FB.Event && FB.Event.subscribe) {
I have updated the script in this article, and hopefully it's correct now (if not my script is "live" here: http://www.savio.no/includes/script/social-media-sharing/SoMe.js)

With that said, I also see that some of your Google Analytics script are placed in the wrong order:
  • _trackPageview must come after _setDomainName
  • Script for Tracking traffic from Facebook Like & Send as Campaign traffic must come before _trackPageview
Hope it helps.

Eivind
  • Meir
  • 13.08.2011 11:43:01
Thanks Eivind.

I think there is another mistype in your code - line 37 is unnecessary (you have no instruction to close anymore)

-Meir
Ah crap.

Fixed and tested that the code work.

Thanks for your feedback.

Eivind
  • Ann
  • 11.08.2011 23:58:47
I wish i found this a few days ago before I implemented the plain old analytics code and found that it did nothing for referral sites. I am testing this out now.

Thank you for posting this you have made my life much easier.

-Ann
Hey, this is a great and very helpful article.
Looking at your source, I see that in your SoMe.js file you also use a bit of code which seems to be used to track Twitter events.

Since I'm very interested BUT very new to GA and Twitter APIs, would you explain, or at least, comment the snippet you use ?

Hope you'll find time to do this, I'm rather sure it would help a lot of people :)

Cheers,
Baptiste
Hi Baptiste

The Twitter script I'm using comes from Yoast:
http://yoast.com/social-buttons/

The only difference between my script and his, is that he wrote that article before Social Interaction became a separate report type in Google Analytics. Because of this that article is tracking Social Interactions using Event Tracking (_trackEvent), while my SoMe.js file is using _trackSocial.

- Eivind -
  • Simon
  • 22.08.2011 19:46:35
Eivind,
I implemented your code but it seems not to interact well with GA.
Maybe I wanted to do too much and also added your code from this article : http://www.savio.no/blogg/a/107/how-to-track-traffic-from-facebook-likes-send-or-comments-in-google-analytics
Maybe they are some conflicts between the 2 scripts, as a results I have re-integrated the basic GA script to see if it will track well again.
Maybe you could tell me if there are some conflicts? or if the code you first wrote is obsolete with the social tracking implementation.
Thanks for your help, these articles are great by the way :)
Simon
Hi Simon

Those 2 scripts runs fine together, I run them both myself.

Is it the site you are linking to you have problem with?
With re-integrated the basic GA script, are you talking about app.tabpress.com? I see you are running their Facebook Tracking script.

  • Jo_c
  • 21.10.2011 00:46:35
Hi Elvind,

I tried your code above and it works for everything else except the like box.

I find that the edge.create only works with the like button but not with the like box.

Have you also encountered the same issue?

Thanks.
Hi Jo_c.

I haven't experienced that issue. Works fine for meg.
  • Dasago
  • 11.11.2011 01:59:57
Hello Elvind,

Do you know if Facebook interactions that are located within an iframe can be tracked?

Thank you!
Hi Dasago

As long as you can implement code/script into the iFrame, interactions can be tracked.
  • koffyn
  • 16.01.2012 09:17:35
Hello Savio,

Check please my test page http://pravdaodurove.com/rini_fblike2.html

I did what you said with FB LikeBox, but still in my GA Reports all visitors are Not Socially Engaged, even if they've pushed the Like button :(
Hi koffyn

You must provide a real AppID in your script.

FB.init({appId: 'YourAppID', status: true, cookie: true, xfbml: true});
Eivind

XClick to move the comment field

Abonner på min RSS-feed fra bloggen