Contact Us
  • Tutorial: Add Google Analytics Social Tracking to Your WordPress Website or Self-hosted Blog

    If you’re not on the HyperArts Blog, CLICK HERE!

    Add Google Analytics social tracking to WordPressIn this article, I will show you how to add Google Analytics Social Interaction tracking to your self-hosted WordPress website or blog.

    Using Google Analytics new social tracking allows you to track user actions on your website’s or blog’s Facebook Plugins, Google + button, Twitter Tweet button and LinkedIn Share button.

    Adding the Trackable Social Plugins & Widgets to your WordPress Site

    You’ll need to add the code for the Google +1, LinkedIn Share button and Tweet button widgets, and for the Facebook Social Plugins. You can get the code at these URLs:

    You will then need to modify files in your WordPress theme. The files are located in this path:

    /YOUR-WORDPRESS-DIRECTORY/wp-content/themes/YOUR-THEME/

    The files you will need to modify are:

    • header.php;
    • single.php;
    • footer.php.

    Note: The above are the most common names for the WordPress PHP files used to construct each page or post. Your mileage may vary.

    You’ll be adding JavaScript functions to the “header.php”, the widget/plugins code to “single.php” and Facebook JavaScript SDK initialization JavaScript, that triggers the Google Analytics, to “footer.php”.

    NOTE: You must be comfortable working with code. This isn’t particularly complex, but you could mess things up. Make sure you make back ups of the files you modify, just in case.

    Add the JavaScript code to “header.php”

    Let’s start with adding the JavaScript to your “header.php” file. This content will be rendered in the <head> ... </head> tags of each of your WordPress pages or posts.

    You will want to paste the below code just before the closing </head> tag in the “header.php” file.

    Make sure you change the Google Analytics ID from “UA-xxxxxx-xx” to your tracking ID.


    <!-- GOOGLE +1 -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <!-- GOOGLE ANALYTICS ASYNCHRONOUS CODE -->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-xxxxxx-xx']);
    _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 TRACKING -->
    <script type="text/javascript" src="http://YOUR-DOMAIN/_js/ga_social_tracking.js"></script>
    <!-- TWITTER - LOAD 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>
    <!-- LINKEDIN SHARE BUTTON -->
    <script type="IN/Share" data-onsuccess="LinkedInShare"></script>
    <script type="text/javascript">
    function LinkedInShare() {
    _gaq.push(['_trackSocial', 'LinkedIn', 'Share']);
    }
    </script>

    Add the code for the plugins and widgets to “single.php”

    The “single.php” file contains the main content of each of your WordPress pages or posts.

    Because the various buttons will be visible to the users, how they are displayed is important.

    The code below — which doesn’t include the Facebook Comments Box (we don’t use it on our blog) — will display like this:

    Google Analytics Social Plugins and Widgets Tracking

    Where you paste the code in “single.php” file will, of course, depend on where you want it displayed on each post. Ours follows the post/page title, date and time:

    <h2><?php the_title(); ?></h2>
    <?php the_time(__('l, F jS, Y','fusion')) ?>, <?php the_time() ?>

    So the result is:

    <h2><?php the_title(); ?></h2>
    <?php the_time(__('l, F jS, Y','fusion')) ?>, <?php the_time() ?>
    <div id="post-socialbuttons">
    <!-- TWITTER BUTTON -->
    <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>
    <!-- GOOGLE PLUS 1 BUTTON -->
    <g:plusone size="medium"></g:plusone> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script>
    <!-- FACEBOOK LIKE / SEND BUTTONS -->
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js#appId=234092069940761&xfbml=1"></script><fb:like action='like' colorscheme='light' layout='standard' show_faces='false' width='650' send="true"/></div>

    Note the code for the plugins/widgets is contained in a DIV with the CSS ID “post-socialbuttons”. Feel free to use the CSS we use to style how our social buttons are displayed. Just add the following CSS style to your theme’s “style.css” file (which is also located in the “wp-content/themes/your-theme/” directory):

    #post-socialbuttons {
    background:#f4f4f4;
    border:1px solid #bbb;
    border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
    padding:8px;
    width:600px;
    margin:8px 0;
    }

    Finally, add the Facebook JavaScript SDK code to “footer.php”

    We’ll now add the Facebook JavaScript SDK which includes the App ID associated with your blog as well as “_ga.trackFacebook();” JavaScript that triggers the Google Analytics social tracking.

    To use the powerful Facebook Domain Insights to track how users are interacting with your website or blog on Facebook, you must register your website or blog as an application.

    Article: Using Google Analytics & Facebook Domain Insights to Track Social Actions on Your Website

    Article: How to Create a Facebook Application to Get an App ID for your Website

    Here is the code you’ll paste into your “footer.php” file:

    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({appId: 'YOUR-APP-ID', status: true, cookie: true,
    xfbml: true});
    };
    (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);
    }());
    _ga.trackFacebook();
    </script>

    Make sure you change “YOUR-APP-ID” to the App ID of your blog, and read this tutorial, to learn how to get an App ID for your website or blog.

    Using Google Analytics Social Interaction Tracking

    To take advantage of the Google Analytics social tracking, you have to use the new “asynchronous” tracking code. My tutorial on using Google Analytics to track social actions on your Facebook iFrame tabs shows how to implement the new Google Analytics tracking, so I won’t go into it here.

    That Should Do It!

    The above should be what you need to add this powerful tracking feature to your website. Let me know in the comments how it goes.

    Additional Resources

    Comments

    1. I recently added Google +1 button to some of my sites, but I hadn’t a clue what do to next! Being able to track the analytics is very important – thanks for this helpful information.

      • I thought I wasn’t the only one! I couldn’t move on for a week after adding Google+ and some other buttons and I had to find tutorials on how to fix it. I’m also grateful for your tutorial.

    2. Gillies Kleboe says:

      I’m interested in adding this to my careers blog http://www.riskcompliancejobs.com/careers but I’m concerned about page size as I’m a sucker for load times and server load.  Do you have an idea of how much in kb this would add to the page?

    3. Coast dress with sleeves says:

      Coast dresses with different vitality and color. This is your wardrobe an instant update of all those signals through the main trends for the coming occassion dresses fashion. Cheap coast clothing on sale, In order to buy coast dress you must keep yourself aware of the sale events happening in you town or local market. wedding dress which are in fashion may not be in trend in coming season. So the shops, small manufacturer and even designer offer Coast dress Bridal at the end of a season. You can buy it easily.Finding a Coast dress Black Tie Event at discount rate or cheap rate does not mean that the Coast dress Races  are of poor quality or it is a defective piece. http://www.coastdresses-uk.net

    4. Tracking how users are spending time on your web page is really important.  Thanks for providing such great information on integrating social platforms with traditional web analytics!

    5. Nicolas Wegher says:

      Great tutorial! However It’ll be even better if you can develop a wordpress plug in that make all this work by itself!

      Lot of us will be glad if you can do it!

      Thanks!

    6. awesome Tim! I use the Yoast Plugin and now offing Google+ buttons.

      Cheers,

      Aaron

    Speak Your Mind

    *