There was a great post on Technical Marketing about tracking social media events and logged-in users in Google Analytics using the new Universal Analytics. I would like to elaborate on the instructions to make it even easier to set up and get tracking. The following examples use a combination of JavaScript and jQuery. It is possible for these techniques to be used without jQuery, but some code re-factoring would need to be done. Note that the below snippets will be designated as HTML even though they are primarily JavaScript because they should be placed into <script> tags within your HTML files.
Use Universal Analytics
The very first step is to make sure your site is upgraded to Universal Analytics. If you don’t have Google Analytics yet, sign up and enter the required information to get the code. If you have the classic style tracking code, you’ll need to upgrade— in the admin section, click “Universal Analytics Upgrade” and follow the instructions. To obtain your Tracking ID and tracking code, click on “Tracking Info” in the admin section under Property, then click “Tracking Code”. The tracking code should look like this:
HTML
This Universal Analytics code should appear just before the closing <head> tag. If you have any _gaq.push() tracking events, you’ll need to update them to ga(). Here is a good reference.
Register your website as a Facebook App
Facebook like, unlike, comments, and share tracking will require you to have an app ID in the Facebook SDK. The easiest instruction set to use for this is located at Smash Balloon. Once you have this, note it down for later use.
Create a ChannelURL file
This is a simple step for cross-domain communication. Create a file named “channel.html” with the following line in it:
<script src=”//connect.facebook.net/en_US/all.js”></script>
This file can be located anywhere (not necessarily in your root directory), but be sure to note where it is so it can be referenced in the next step.
Insert the Facebook SDK Snippet
When creating a Like Button, Facebook will give you a code for their SDK, however, in order to track these events, you’ll need an expanded snippet. Note that this only works with official Facebook buttons. This code should appear immediately after the opening of the <body> tag. If you already have an SDK snippet on your site, it can be replaced with this snippet:
HTML
That might look like a big, scary snippet, but it isn’t too bad to understand. Simply replace the appId string with the one you generated above, and replace your domain in the channelURL. The “FB.getLoginStatus” event determines if the user is logged into Facebook and sends the dimension to Google Analytics (more on this later). All of the “FB.Event.subscribe” lines simply listen for a Like, Unlike, Comment, or Share, and sends the event to Google Analytics. You can find this information in GA under Acquisition > Social > Plugins. Finally, the last section simply loads the Facebook SDK asynchronously.
Track Twitter Social Actions
To track Twitter tweets and follows, add the following code to your footer. Twitter typically likes their initialization to be after the last Twitter button. Note that this only works with the official Twitter buttons.
HTML
Detect Other Social Networks’ Logged In Users
Move back to your footer and insert the following code:
HTML
This is a clever way of tracking Google+, Twitter, and Google (Gmail) logged in users, and as noted by several other developers, it may not work forever. Upon detection, it sends the dimension to Google Analytics (like the Facebook detection above).
Create Custom Definitions in Google Analytics
Now we move into your Google Analytics account. Click the Admin button and find “Custom Definitions” under your Properties section. Under that, click “Custom Definitions”. From that page, click the “New Custom Dimension” button. You’ll need to make four of these. The name should be the social network, the scope should be “User”, and make sure Active is checked. Don’t worry about the example codes— these are already taken care of from the snippets above. The only thing to make sure about is Facebook is dimension 1, Twitter is dimension 2, Google+ is dimension 3, and Google is dimension 4. If you create these in a different order, you’ll need to either change the names in Google Analytics to match the above snippets, or change the snippets above to match Google Analytics!
Create Segments for Social Users in Google Analytics
Let’s go back to the main Admin screen in Google Analytics. This time, click “Segments” under “Personal Tools & Assets” on the right column. On this screen, click the “New Segment” button. The name of each segment should be along the lines of “Facebook Users”, then click on “Conditions” on the left side. The Filter should be “Users” and “Include”. The first dropdown should be the name of the custom dimension associated with these users, so if you’re creating the “Facebook Users” segment, the dropdown should be “Facebook”, then “contains”, then the input field should be “Logged In”. Do this for each of the four social networks.
Congrats, you’re now tracking social media users! You could stop here if you want, but let’s make it easier on yourself by creating a custom report.
Create a Custom Report
In Google Analytics, click “Customization”, then click the “New Custom Report” button. Title this custom report “Social”. Under Report Content, make the name “Logged In Users”. Now, your metric groups can be whatever you’re interested in, but for this example, we’ll track Visits and Avg. Time on Page. For the dimension drilldowns you can also choose what you’d like, but here let’s select Page Title and then Full Referrer (just because they’re logged into a social network doesn’t mean they came from there).
Duplicate the report tab and name the next one “Social Actions”. This time, your metric group will be “Social Actions”.
Save the custom report and it should automatically load. You can access it by going to the Customization section and selecting the custom report. Click the dropdown arrow next to “All Visits” now drag “Facebook Users”, “Twitter Users”, and “Google+ Users” to the bar above (or substitute “Google Users”).
Now that is just great, but who wants to do that every time? Don’t close that view and keep reading…
Create a Shortcut
Now let’s make it quickly accessible. From the current view you have (from the step above), click “Shortcut” at the top. Name the shortcut and now this exact view is accessible from the Reporting section under Shortcuts.
That should do it! Now you’re tracking Facebook Likes, Unlikes, Comments, and Shares, Twitter Tweets and Follows, and Logged In users on Facebook, Twitter, Google+, and Google (Gmail).
