Track Logged-In Social Network Users – Google Analytics

Thanks to Mixcloud’s Mat Clayton, we can now track how many users were logged into different social networking platforms, whilst visiting a website, with a snippet of Javascript. The code has been improved by Tom Anthony who has managed to get some really interesting results.

What this code will do:
This code will read the cookie left by Facebook, Twitter, Google+ and other platforms and use this information to tell us what social networks your visitors are logged in whilst visiting your website. We can display this information within Google Analytics and give our clients a good indication to the preference of social media according to their visitors.
 

Installing The Tracking

1. Login to Facebook

2. Click on http://developer.facebook.com/apps to access the Facebook Developers page

3. Select the “Create New App” button

4. In the “App Display Name” field, enter the name that you want to call your App. For example “FBtrackerAnalytics”. Tick the box to agree to Facebook’s terms and conditions

Setting Up A Facebook API

5. On the next page, enter your domain name in both the ” App Domain” and ” Website” fields.

6. Once complete, click on ” Save Changes”

7. Copy the App ID from the top of the page

8. Ensure that Google Analytics is on the page. Then add the code in the head section of the page:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
			function record_login_status(slot, network, status)
			{
				if (status)
				{
					_gaq.push(["_setCustomVar", slot, network + "_State", "LoggedIn", 1]); 
				}else{
					_gaq.push(["_setCustomVar", slot, network + "_State", "NotLoggedIn", 1]);  
				}
			}
	</script>

9. Add the following code to the bottom of the page before the </body> tag. Remember to replace the App ID in the Facebook code with the one that you copied in Step 7:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<img style="display:none;"
onload="record_login_status(1, 'Google', true)"
onerror="record_login_status(1, 'Google', false)"
src="https://accounts.google.com/CheckCookie?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png" />
 
<img style="display:none;"
onload="record_login_status(2, 'GooglePlus', true)"
onerror="record_login_status(2, 'GooglePlus', false)"
src="https://plus.google.com/up/?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png&type=st&gpsrc=ogpy0" />
 
<img style="display:none;" src="https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif" onload="record_login_status(3, 'Twitter', true)" onerror="record_login_status(3, 'Twitter', false)" />
 
<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function(){
		FB.init({ appId:'111222333444555', status:true,  cookie:true, xfbml:true});
		FB.getLoginStatus(function(response){
			if (response.status != "unknown")
			{
				record_login_status(4, "Facebook", true);
			}else{
				record_login_status(4, "Facebook", false);
			}
		});
	};
	// Load the SDK Asynchronously
	(function(d){
		var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
		js = d.createElement('script'); js.id = id; js.async = true;
		js.src = "//connect.facebook.net/en_US/all.js";
		d.getElementsByTagName('head')[0].appendChild(js);
	}(document));
</script>

 

Set up Google Analytics

Once the code is installed, you will be able to track immediately. This data can be accessed in the new version of Google Analytics under Audiences> Demographics> Custom Variables within a few hours.

Analytics custom veriables display
 
Set up Custom Segments in Google Analytics

1. Click on “Advanced Segments” and select “+New Custom Segment”

Analytics Custom Veriables Facebook

2. You will be asked to choose a name for each segment. The Javascript uses custom variable slots so we will make use of these in order to label the different segments. Be sure to select “exactly matching”.

(1=Google; 2= Google+; 3= Twitter; 4= Facebook)

3. Click on “Save Segment” after each one. Ensure that you are using Custom Variable (Value xx) and NOT (Key xx)

4. To view the custom segments that you just created you will need to click on “Advanced Segments” and tick the boxes of the data you wish to show.
 
Analytic Advanced Segments Selection
 

The Results:

Now that your set up is complete, you can show your clients which social media platform will work best for their business. Many clients claim that social networks do not work for them, however, if you can show them how many of their visitors are logged in to Twitter or Facebook while visiting their website then this might hold weight.
 
Analytics custom veriables display
 
Analytics advanced segments display

Tags: , , , , , ,

  • http://twitter.com/ReneeEverett Renee Everett

    It is much quicker and easier to perform this task directly via 
    http://www.google.com/analytics/ 

  • http://seocowboy.co.za Bryan Casson

    I do not believe this option is available directly in Google without placing the code on your website. We are tracking it directly in Google Analytics however the information is not possible without installing the code we outlined in the steps. Do you have another way that bypasses going into the code of your site…. and without using a messy filter.

  • http://harounkola.com/ Haroun Kola

    Thanks for the tutorial Bryan