May 13, 2019

No one understands the value of data better than a blogger. A blog thrives on readership and you need to understand where the readers are coming from and how they are engaging with the blog. Social media plays a significant part because the whole world is going social, social media marketing and social media traffic is considered by various experts to be better than organic traffic. In this article, I am going to teach you how to install social media codes with Google Analytics tracker.

Isn’t Google Analytics Already Showing Social Traffic?

Yes, it does but the reporting is incomplete without the additional codes. Let me explain.

Usually, the Google Analytics code embedded in a blog is this:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X, 'auto');
ga('send', 'pageview');
</script>

The ‘UA-XXXXXXXX-X’ is the account specific number.

With this code, you do get social statistics, mentioned in Google Analytics as “Social” where social visits are clocked but they don’t offer any specific insights.

Moreover, if yours is WordPress-based blog, you can add plugins for improving social shares but none of that data is displayed in Google Analytics.

I mean, when anyone ‘unlikes’ any particular blog post, do you get to know? You don’t. This is because you haven’t installed social media codes with Google Analytics tracker which enables tracking and clocking of activities happening on the blog.

Login to Google Analytics and Acquisition > Social > Data Hub Activities or any of the 8 options listed underneath. You won’t find anything substantial and here is where the blog is losing good amount of data.

You need this data to:

• measure user engagement
• monetize the blog
• reduce dependence on social plugins and improve blog loading speed

Let’s get on to it.

How to Install Social Media Codes with Google Analytics Tracker?

After adding the codes, you’ll get social data for three networks:

1. Facebook (likes, unlikes, shares)
2. Twitter
3. Google+

At present, Google supports only these 3 networks.

Before applying any of the codes, ensure that Google Analytics is active and receiving data.

Adding Facebook Social Code

The Facebook JavaScript SDK allows users to create specific calling functions.

For Likes

FB.Event.subscribe('edge.create', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

For Unlikes

FB.Event.subscribe('edge.remove', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

For Shares

FB.Event.subscribe('message.send', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

What will happen is that when anyone takes any of the above actions, the callback module will generate data and _trackSocial will report the happening to your Google Analytics account.

Adding Twitter Social Code

The Twitter Google Analytics tracker is created in accordance with Web Intents JavaScript Events with which a Twitter button will be added to the blog and any interaction on it will get reported back to Google Analytics.

First, add the code below to where you added the original Google Analytics tracker code.

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

In order for the tracking button to work, you need to bind a callback function to Intent Event. This is necessary to ensure that every code loans before binding events. After the above code, add this

function trackTwitter(intent_event) {
if (intent_event) {
var opt_pagePath;
if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
opt_target = extractParamFromUri(intent_event.target.src, 'url');
}
_gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
}
}
 
//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
//event bindings
twttr.events.bind('tweet', trackTwitter);
});

Now, when a user tweets any of your blog posts, the interaction will be clocked and the _trackSocial function will report the instance to your Google Analytics account.

Adding Google+ Social Code

You don’t need to do anything. The code is integrated to your Analytics account by default, that is, if you have implemented the +1 button and analytics.js Google Analytics tracking on the same page, all the +1 interactions will be automatically reported.

IMPORTANT:

All the codes should be placed before </head> tag.

If you’re using WordPress, edit the header.php file to insert the codes. Or, if you’re using a custom theme like Genesis framework, you’ll already have pre-defined spaces to insert Analytics and Webmaster codes.

You need to have a working knowledge of HTML to make these changes. If not, hire a HTML programmer.

Google Analytics Tracking Functions Explained

The codes use a lot of custom tracking functions. Here’s what they’re for:

• network – implies the targeted social network (required)
• socialAction – implies what is being tracked, such as a Facebook ‘like’ or a ‘share’ (required)
• opt_target – implies the string (post URL) on which the interaction is happening. Sometimes the parameter can be ‘undefined’ but it is nothing to worry about (optional)
• opt_pagePath – implies the path of clocking the interaction (optional)
• event – the targeted button in Facebook (required)
• callback – a function which is fired when the user clicks on any of the interaction buttons, returning a string of queries and outputting results for Google Analytics tracking (required)

Data Receiving

When you’re done, wait for at least 24 hours to start receiving data.