Contact Us
  • Tracking Social Interactions with Google Analytics

    Google Analytics Social TrackingIn this tutorial I will show you how to add Google Analytics Social Tracking to your website.

    Google Analytics Social Interaction Tracking

    Google’s Social Analytics feature allows you to track social interactions on your website, your blog or on your Facebook fan page. These actions include the Twitter button, LinkedIn Share button, and the Facebook Like, Unlike and Send actions.

    NOTE: Adding GA Social Tracking requires access to and modification of your Web page files. It’s pretty basic, but you should be somewhat comfortable working with HTML files.

    What is currently supported with Google’s Social Tracking

    As of this writing, my testing shows that these social buttons are supported:


    As for WordPress plugins, you’ll have to search WordPress Plugins to see what is available to implement Google Social Tracking on your WordPress website or blog.

    Google’s New Google Analytics Interface and Tracking Code

    In order to implement Social Interaction Tracking, you will have to update your current Google Analytics code to the latest version (called “Asynchronous Google Analytics“), and then add a few snippets of code to your HTML file. The “New Version” asynchronous Google Analytics is available as an option at the top of the page when you’re logged in to your Google Analytics account:

    New Google Analytics Interface

    How to Get Your Updated Analytics Code

    To get your updated Google Analytics code:

    1. Log in to your Google Analytics account;
    2. View the new GA interface by clicking “New Version” at the top right of the screen (see above image);
    3. Click on the domain account you wish to access;
    4. Click the “gear” icon, in the orange bar at the top right of your screen:

      GA Gear Edit Icon

    5. Click on the “Tracking Code” tab:

      GA Tracking Code Tab

      Under “Standard” tab and below “1. What are you tracking?” select the option that best describes what you’re tracking. It’s usually “A single domain”;

    6. Copy the code under “2. Paste this code on your site”. It should look like this, but with your “UA-xxxxxx-x” account number:

      <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
      _gaq.push(['_trackPageview']);
      (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
      </script>

    You now have your updated Google Analytics code.

    Putting the code in all the right places

    The new version of your Google Analytics code should be placed before the closing </head> tag of your HTML file. (Yes, this is different. The old version was usually placed before the closing </body>, but that was then….)

    Between your Analytics code and the closing </head> tag, insert this bit of code that calls the JavaScript that enables the social tracking:

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

    The end result will be:

    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <!-- Google Analytics Social Button Tracking -->
    <script type="text/javascript" src="http://[YOUR-DOMAIN]/ga_social_tracking.js"></script>
    </head>

    The “UA-xxxxxx-x” will be replaced with your unique Analytics ID for this domain.

    Now let’s add the Like/Send Button code

    As I mentioned in my Social Media Examiner post on Social Plugins for fan pages, Facebook generates the Like/Send Button code for you, on its Social Plugins page. For the Like/Send Button, you just need to enter the URL that clicking the button likes, select whether or not you want to include a Send Button, and a couple other options, then copy the code in the popup dialog, which will look like this:

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=201748293206869&xfbml=1"></script><fb:like href="www.hyperarts.com" send="true" width="450" show_faces="false" font=""></fb:like>

    The “#appId=xxxxxxxxxxxxxxx” is a random app ID that Facebook generates which allows you to access Insights for the button, but it’s not necessary for the button to work. In my example, I omit the appId value from the code, which will work fine.

    IMPORTANT: You must add the below snippet of JavaScript to the code that Facebook generates so that actions on that button trigger Google Analytics:

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

    Add the above code before the <fb:like /> tag:

    <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:like href="www.besthawaiianvacationrentals.com" send="true" width="450" show_faces="false" font=""></fb:like>

    Paste your Like Button code anywhere between the <body> </body> tags.

    Viewing your Google Analytics Social Tracking reports

    As mentioned above, the Social Tracking reports are only available in the new Google Analytics interface. (See above for how to choose the New Version option.)

    NOTE: It usually takes a few hours for Analytics to reflect activity on your Web pages, but it can take up to 24 hours. See “Troubleshooting,” below.

    After logging in to your Analytics account, click into the domain for which you want to view reports, then, in the left menu go to “Visitors > Social”:

    You have 3 options for viewing the social interactions:

    1) Engagement: You see two metrics: 1) Not Socially Engaged; and, 2) Socially Engaged. This shows you how effectively each page is in motivating users to Like or Tweet your content:

    2) Action: This shows you the specific actions taken (Like, Unlike, Send), how many of each, and percent total actions:

    3) Pages: Details on which pages actions were taken and what those actions were.

    Adding the Twitter Button to the mix

    Google’s Social Tracking will also track tweets made with Twitter’s Tweet Button. Interestingly, Tweetmeme now recommends using the Twitter Tweet Button.

    After logging in to your Twitter account, go to the Twitter Tweet Button page, where you can select one of the 3 available options:

    Twitter Tweet Button

    Once you’ve made your selection, just copy the code that is generated for you and paste it somewhere between the <body> </body> tags of your Web page. Your code should look like this:

    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="hyperarts">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    Add a bit of JavaScript to activate Twitter social tracking

    Before the closing </head> tag, place this bit of JavaScript to activate the Google Analytics tracking (the social tracking won’t work without this tag!):

    <!-- Load Twitter JS-API asynchronously -->
    <script>
    (function(){
    var twitterWidgets = document.createElement('script');
    twitterWidgets.type = 'text/javascript';
    twitterWidgets.async = true;
    twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
    // Setup a callback to track once the script loads.
    twitterWidgets.onload = _ga.trackTwitter;
    document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
    </script>

    I don’t think it matters where you put the above Twitter-tracking code, as long as it’s inside the <head></head> tags. I put it right before the closing </head> tag, after the Google Analytics tracking code and the call to the “ga_social_tracking.js” JavaScript.

    A word about Google +1 Tracking

    As Google states on its page about Social Interaction tracking,

    Out of the box, Google Analytics provides integrated tracking with the Google +1 button. This means if you have set up both Google +1 and the latest version of Google Analytics on the same page, all +1 social interactions will be tracked automatically.

    As I mentioned above, the +1 button is Google’s version of the Facebook Like button. I’ve added it to the HyperArts website and the HyperArts Blog, but I haven’t seen much traction with it yet. However, adding can’t hurt, and as it grows in popularity it will help your content a larger audience.

    Add the LinkedIn Share Button and Tracking with Google Analytics

    I wrote a separate article on adding the LinkedIn Share Button to your website and tracking it with Google Analytics.

    Early on, there were some bugs with the LinkedIn Share Button but they seem to have all been worked out. I have found the button and Google’s tracking of it are both working great.

    Troubleshooting

    If you implement the above instructions accurately, you should see tracking results within several hours of initiating tracking, although Google says it can take up to 24 hours to display results.

    If, after 24 hours, you don’t see any social tracking results (and I’m assuming you will have done some testing of the buttons to ensure they work and to provide some data to Analytics):

    • Doublecheck your code. Make sure you have placed the code as instructed above, and make sure your URL values are correct;
    • Check the Google Analytics date range. By default, Google Analytics displays the past month of data up to the previous day. You can manually change that range to include the current day by clicking the arrow next to the date range and changing the end date to the current day:

      GA Date Range

    • Adding Social Tracking to your WordPress self-hosted blog: There is already a plugin for this feature, but you can read my new article on how to manually add Google Analytics Social Interaction tracking to your WordPress blog;
    • Tracking Facebook tabs: Make sure you select the “Multiple top-level domains” option when getting your Analytics code. This is specifically for Facebook fan pages. You can read my recent post on the HyperArts Blog on adding Google Social Interactions tracking to Facebook tabs.

    Although this may look a bit, um, complicated, it should be pretty easy for those who are comfortable working with Web files. If you have problems, ask questions here and I’ll do my best to help you out!

    Comments

    1. Thanks for your post.  It’s really helpful and I’m looking forward to implementing it on my site shortly.

      I have a follow up question though.  Is it possible to set up social sharing to allow for Goal Tracking in Google Analytics?  Can you trigger an event (or create a virtual pageview) when someone clicks a share button that then can be used in Google Analytics to track this goal?

      Any help is much appreciated.  Thanks so much.

      • I’m currently looking for the same answer as well! I’ve had a dig around Analytics goal settings but couldn’t see any way to accommplish this.

      • Antti Nylund says:

        If you enclose your share buttons, all or one, in div you can track clicks of that div with event tracking setting onclick event to div and following event tracking instructions by Google. Events can be used as goals in new version of Google Analytics. 

    2. I’m unaware of a way to fire Google Analytics when someone clicks a share button, like button, etc.

    3. Hi, 

      Thanks for this. I’ve pretty set it all up but when I checked my source code I saw that the JS file for 

       
      didn’t show up.

      Any idea on what went wrong? 

      The file is here http://www.ephemeralproject.com/_js/ga_social_tracking.js 

    4. If you mean the <script> tag isn’t showing up in the ‘view source’ then there must be a typo or syntax error.

    5. gertjanruiter says:

      Hi Tim, 

      I have a question about the facebook share, like button and the tweet button. How can you track if a user posted the content on his wall and posted the content successfully. To track if the user did not cancel, after clicking the button, but before posting it on his wall?After a customer clicks on share, like or tweet it redirects to facebook or twitter but these share buttons will not give any response back if posted successfully? Any idea if there is a possibility to track that?

      Thanks, 

    6. your font color is too light.

    Speak Your Mind

    *