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.
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):
- Change your <html> opening tag
- Implement Facebook Meta Tags (Facebook AppID & AdminID)
- Register your web site as a Facebook App
- Implement Open Graph Protocol (Meta Tags)
- Use Facebook XFBML version (Javascript SDK) and load the script asynchronous
- Implement the Google Analytics Social Media Tracking Script
- 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.
- <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.
- <meta property="fb:app_id" content="130796876963854" />
- <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+.
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)
- <div id="fb-root"></div>
- <script type="text/javascript">
- window.fbAsyncInit = function() {
- FB.init({appId: 'YourAppID',
- status: true,
- cookie: true,
- xfbml: true,
- channelUrl : 'http://www.yourdomain.com/facebook/include/channel.html' // add channelURL to avoid IE redirect problems
- }); };
- (function() {
- var e = document.createElement('script'); e.async = true;
- e.src = document.location.protocol +
- '//connect.facebook.net/en_US/all.js';
- document.getElementById('fb-root').appendChild(e);
- }());
- </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.
- <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>).
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
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
- <div class="fb-like-box" data-href="http://www.facebook.com/Savio.no" data-width="265" data-show_faces="true" data-stream="true" data-border_color="#ccc" data-header="false" data-ref="facebook_fb-page"></fb:like-box>
See also Like Box info on Facebook.
Facebook Comment Box
- <div class="fb-comments" data-width="500" data-num_posts="2" data-href="http://domain.com/canonical-url-to-article"></div>
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
- How to Track Traffic from Facebook Likes, Send or Comments in Google Analytics
- How to Track Facebook iFrames with Google Analytics
- Behavioral Targeting using Facebook Connect & Google Analytics Custom Variables