Contact Us
  • How to Track Your Facebook Comments Box with Google Analytics Social Tracking

    If you’re NOT on the HyperArts Blog, click here!

    In a previous post on the new Google Analytics Social Interactions tracking, I showed how to have social actions (send, share, etc.) tracked in your Google Analytics account (using the NEW version of Analytics and the asynchronous tracking code).

    Although on its page about Google Analytics Social Tracking, Google explains how to track clicks on the Facebook Like Button and Send Button, and provides the JavaScript code for social tracking, they don’t include tracking actions on the Facebook Comments Box.

    Here’s how to add tracking for the Comments Box…


    NOTE: This is for tracking Facebook social actions on EXTERNAL websites and blogs, or on Facebook iFrame tabs.

    Tracking the Facebook Comments Social Plugin with Google Analytics

    In order to track Facebook Comments on your website, blog or Fan Page iFrame tab, you need to get set up with the new Google Analytics (our tutorial on tracking comments on iFrame tabs has detailed instructions), and then modify the social tracking code so that it also tracks the Comments box.

    Modifying the Google Analytics Social Tracking JavaScript to Add Comments Tracking

    The JavaScript that enables the Google Analytics social tracking should be in a file named “ga_social_tracking.js” and then called in the <head> ... </head> tags of your Web page:

    <!-- Google Analytics Social Button Tracking -->
    <script type="text/javascript" src="//[YOUR-DOMAIN]/js/ga_social_tracking.js"></script>

    The above URL for the JavaScript .js file is to our server, and you’re free to use this. However, I would recommending your own version to your server and calling that URL.

    The code Google provides includes this, at line 51, for tracking Facebook social actions:

    FB.Event.subscribe(‘edge.create’, function(targetUrl) {
    _gaq.push([trackerName + '_trackSocial', 'facebook', 'like',
    targetUrl, opt_pageUrl]);
    });
    FB.Event.subscribe(‘edge.remove’, function(targetUrl) {
    _gaq.push([trackerName + '_trackSocial', 'facebook', 'unlike',
    targetUrl, opt_pageUrl]);
    });
    FB.Event.subscribe(‘message.send’, function(targetUrl) {
    _gaq.push([trackerName + '_trackSocial', 'facebook', 'send',
    targetUrl, opt_pageUrl]);
    });

    The above JavaScript tracks Likes, Unlikes and Sends. To track Comments, you need to add:

    FB.Event.subscribe(‘comment.create’, function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'comment', targetUrl]);
    });
    FB.Event.subscribe(‘comment.remove’, function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'uncomment', targetUrl]);
    });

    So that your .js file now looks like this:

    FB.Event.subscribe(‘edge.remove’, function(targetUrl) {
    _gaq.push([trackerName + '_trackSocial', 'facebook', 'unlike',
    targetUrl, opt_pageUrl]);
    });
    FB.Event.subscribe(‘message.send’, function(targetUrl) {
    _gaq.push([trackerName + '_trackSocial', 'facebook', 'send',
    targetUrl, opt_pageUrl]);
    });
    FB.Event.subscribe(‘comment.create’, function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'comment', targetUrl]);
    });
    FB.Event.subscribe(‘comment.remove’, function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'uncomment', targetUrl]);
    });

    Add a bit of JavaScript to the Facebook Comments Social Plugin

    After you’ve visited Facebook’s Comments Social Plugin page and generated your Comments Box code:

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="THE-URL-YOU-SPECIFY" num_posts="2" width="500"></fb:comments>

    You need to add this JavaScript, just before the <fb:comments /> tag, to trigger Google Analytics tracking of the Comments:

    <script type="text/javascript">_ga.trackFacebook();</script>

    So your Comments Box code now looks like this:

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript">_ga.trackFacebook();</script><fb:comments href="THE-URL-YOU-SPECIFY" num_posts="2" width="500"></fb:comments>

    You should now see Google Analytics tracking for your Comments Box social plugin

    Assuming you’ve set everything else up correctly using the instructions in this post, this should work for you.

    Here’s an example of what it should look like in your Google Analytics:
    Google Analytics Tracking results

    It usually takes around an hour or two for your test results to show up in Google Analytics. Make sure your are using the NEW Version of Google Analytics AND the “asynchronous” tracking code (the option for this is at the top right of any Analytics page):
    New Version of Google Analytics

    Credit and thanks are due to Russ Tucknott’s Blog where he lays out this technique, but implements it somewhat differently. Thanks Ross!

    Resources

    Comments

    1. Good to know it. So it can track the likes and
      comments for one year? Nice! I want to try it. But I am just curious about the
      “Google: +1” What is that? Eh, I download the said file but I don’t know how to
      open the.js file. Also I don’t know where to copy these lots of codes. I think
      I have to create an account in Google Analytic? Am I right? They should make
      some plug-ins too on how to track our own comments and likes. I am wondering
      now if how many comments I made since I started to used Facebook.

    2. Hung_hung55287 says:

      ffg

    3. Hung_hung55287 says:

      asASas

    4. Kacey Freel Boone says:

      This is great.  Thank you!  Should this also be pulling in the page name so it appears in the pages report of the Social reports or is that additional code that needs to be added?

    5. Google Analytics will display the page URL, yes.

      • Thanks Tim.  Any idea of common errors where the urls on the pages report do not show up?  I have this on a Word Press blog.  I’m able to see the number of comments but when I go to the Social Pages report instead of listing out the urls it shows 
        [object Object]  with the total number of comments.  Any ideas?  thanks.

    6. Daniel Becerra says:

      Hello:
      I would like to know how to access to Facebook html. It seems that FBML doesn’t work…
      Thank you,

      Daniel

    7. Great tutorial, tks! By debugging the comment/uncomment FaceBook events, I realized the callback parameter targetUrl is actually an object with ‘href’ (actual url string) and ‘commentID’ (long int) properties. I suppose this is due to some change in the FB js or something like it.

    8. Perhaps Claudio’s comment answers your question:

      By debugging the comment/uncomment FaceBook events, I realized the callback parameter targetUrl is actually an object with ‘href’ (actual URL string) and ‘commentID’ (long int) properties. I suppose this is due to some change in the FB js or something like it.

    Speak Your Mind

    *