• Social Tracking with WordPress Jetpack & Google Analytics

    by  • Last modified:October 6, 2015 • Google Analytics • 6 Comments

    social analytics google analyticsIn Google Analytics, while event tracking measures general user-interactions very well, “Social Analytics” provides a consistent framework for recording social interactions. Essentially, this method allows you to add social interactions to the “Social Plugin” section of Google Analytics reports.

    I was recently working on a WordPress project and was trying to get this to work with the Jetpack plugin. I thought it would be simple (and amazing) to track all shares into Google Analytics, but I kept hitting the following error: "Error: $ is not a function". After much research, I happened upon this post which pointed out that jQuery runs in a ‘no-conflicts’ mode in WordPress. With this lead, I was able to come up with the following code.This makes pushing social shares to Google Analytics a breeze.

    Please note in the code, I only wrote it for Facebook, Twitter, Linkedin and Google+. The clicks on the email button will be an event, because technically it’s not a social share.

    <script>
    
    jQuery(document).on( 'ready post-load', function(){
     jQuery('a.share-facebook').on('click', function() {
      ga('send', 'social', 'facebook', 'share', window.location.hostname+window.location.pathname);
      });
     });
    
      jQuery(document).on( 'ready post-load', function(){
        jQuery( 'a.share-twitter' ).on( 'click', function() {
      ga('send', 'social', 'twitter', 'tweet', window.location.hostname+window.location.pathname);
      });
     });
    
    jQuery(document).on( 'ready post-load', function(){
     jQuery('a.share-google-plus-1').on('click', function() {
      ga('send', 'social', 'google', 'share', window.location.hostname+window.location.pathname);
      });
     });
     
    jQuery(document).on( 'ready post-load', function(){
     jQuery('a.share-linkedin').on('click', function() {
      ga('send', 'social', 'linkedin', 'share', window.location.hostname+window.location.pathname);
      });
     });
     
    jQuery(document).on( 'ready post-load', function(){
     jQuery('a.share-email').on('click', function() {
        ga('send', 'event', 'share', 'email', window.location.hostname+window.location.pathname, {
        nonInteraction: true});});
      });
    </script>
    

    You can modify to add the social buttons you use from Jetpack (or not), but keep in mind to use the Social Plugin syntax as follows:

    ga('send', 'social', [socialNetwork], [socialAction], [socialTarget]);
    

    Definitions:

    • socialNetwork: The network on which the action occurs (e.g. Facebook, Twitter)
    • socialAction: The type of action that happens (e.g. Like, Send, Tweet).
    • socialTarget: Specifies the target of a social interaction. This value is typically a URL.

    About

    About The Author: Adrian has over 12 years experience in Digital Marketing and Analytics. He currently works as a Marketing Manager at Vanilla Forums, a modern forum software platform that allows clients to connect and engage their communities and customers. Adrian has extensive experience with Google and Piwik Analytics. He lives and works in Montreal.

    • Aquif Shaikh

      Hi Adrian,
      Thanks for this one mate. I Thought a post like this should have drawn a lot of attention and comments. But I wonder why no one ever came upto it.

      It did worked for me. I could see my twitter share in the Social Plug In Section.

      However I am just wondering if i correctly placed this code. I place it in a plugin along with GA code. Hope this is ok.

      Secondly i would like to include this code at my blog with a link back and due credit to you. Need your permission for the same.

      • hi @aquif_shaikh:disqus thanks for the kind words. We get lots of views, but not everyone takes the time to say thanks, so I appreciate it. You can certainly include this code on your site.

        • Aquif Shaikh

          Thanks Adrian,
          And what is the best place to include this Code?

          • The code should be after the Jquery files load. I prefer before closing body tag. Also you need code for Google+. Auto tag only works if you used their widget code.

            • Aquif Shaikh

              Thanks for answering :)

    • Thanks Adrian,
      This is an easy, quick solution that worked as hoped. Great post!