Tracking Website Visitors who are Logged Into Social Media Accounts
Tracking Visitors Who are Logged Into Social Media Accounts Using Google Analtyics
In February of 2012, a Tom Anothony from Distilled contributed an excellent post to SEOMoz on how to track visitors who are logged into a social media account on your website using some custom JavaScript code and advanced segments in Google Analytics. I have seen it in action over the past 12 months and I wanted to share the step by step here on WF.
While the configuration may seem novel, it can actually provide some great insight as to the visitors that are coming to your site. For example maybe you are thinking of providing interactive plugins on your website but aren't sure if it will be worth it because users will need to be logged into a social network for the plugins to be effective. This setup can give you the answer. Maybe you want to know which network you should be more active on. Or perhaps you need to know if you are engaging your current network enough.
Note that for any of the following to work, you should have Google Analytics installed on your website.
With the following script you can track whether visitors are logged into Facebook, Twitter, Google Plus or logged into a Google account in general. This snippet must be added to the <head> section of your website. If you have a template, it only needs to be added once. If not, it should go in the head section of all pages on your site.
For Google Plus, Twitter and Google, place the following code snippets before the closing </body> tag in your website. If you have a template, you should only have to place this code in the template file. If you do not, you will have to place it one every page where you want to track whether users are logged in or out of these accounts.
For the Facebook login status tracking, the procedure is a bit trickier. You have to set up a Facebook application in order to grab an app id. This is essential for the API code to work on your domain. The app just has to be the basic setup and nothing more.
Follow these steps to set up an app:
1. Login to Facebook
2. Visit https://developers.facebook.com/apps
3. Click the create new app button in the top right corner of the page
4. A dialogue box will appear asking for the app name, app namespace, and if you require web hosting.
5. Give your app a name (it doesn't matter what it is), name space is optional, and if you need hosting from Facebook, click the box. If you plan to host your app on your existing domain, leave the box blank.
6. If you choose to go with hosting through Facebook, it is provided by Heroku and you can learn more about it here, https://developers.facebook.com/blog/post/558/
7. Click continue, fill out the captcha, click continue again
8. In the final screen, your app has been created
9. Grab the long number next to app ID at the top of the screen next to the default thumbnail image. You will past this into the code snippet below.
Here is the snippet,
Alright you have the code installed, now its time to configure the analytics account. You don't have to set up advanced segments to view the data from this code. You can see data under audience -> custom -> custom variables. Your variables will be laid out as keys under the graph in the report and you can select among them. Visitors are identified by the variable in the code (i.e. Google_State, Twitter_State, Facebook_State, etc)
By setting up advanced segments, not only is the data easier to look at, you can also compare it to other metrics on your site. Follow these steps to set up custom segments.
1. Login to your Google Analytics account
2. Click Advanced Segments in the grey bar at the top of any report
3. Click "New Custom Segment" in the bottom right corner of the new drop down that appears
4. Enter a name for your segment and choose which facets to base it on. For this use the Custom Variable slots that the Javascript tracking code uses. Analytics allows 5 Custom Variable slots, and the code above uses 4 of these (1 = Google, 2 = Google+, 3 = Twitter, and 4=Facebook). Name your segments appropriately. For example Twitter Users, Facebook Users, Google Plus Users, etc. This will make them easy to identify in reports.
5. The menus in the segment should be set to "include" , "Custom Variable" (NOT Custom Key), "exactly matching" , and "LoggedIn".
6. Save the segment and that's it. (repeat for each network you are tracking)
To view the data just click on advanced segments again, and you should see check boxes with the names of your new segments in the list of available segments.
In February of 2012, a Tom Anothony from Distilled contributed an excellent post to SEOMoz on how to track visitors who are logged into a social media account on your website using some custom JavaScript code and advanced segments in Google Analytics. I have seen it in action over the past 12 months and I wanted to share the step by step here on WF.
While the configuration may seem novel, it can actually provide some great insight as to the visitors that are coming to your site. For example maybe you are thinking of providing interactive plugins on your website but aren't sure if it will be worth it because users will need to be logged into a social network for the plugins to be effective. This setup can give you the answer. Maybe you want to know which network you should be more active on. Or perhaps you need to know if you are engaging your current network enough.
Note that for any of the following to work, you should have Google Analytics installed on your website.
With the following script you can track whether visitors are logged into Facebook, Twitter, Google Plus or logged into a Google account in general. This snippet must be added to the <head> section of your website. If you have a template, it only needs to be added once. If not, it should go in the head section of all pages on your site.
Code:
<script type="text/javascript">
function record_login_status(slot, network, status)
{
// This code is for the async version of Google Analytics; if you're still on
// the old code then you need to adjust it accordingly.
if (status)
{
_gaq.push(["_setCustomVar", slot, network + "_State", "LoggedIn", 1]);
// You may prefer to record this data with _trackEvent
// _gaq.push(['_trackEvent', network + '_State', 'status', "LoggedIn"]);
}else{
_gaq.push(["_setCustomVar", slot, network + "_State", "NotLoggedIn", 1]);
// You may prefer to record this data with _trackEvent
//_gaq.push(['_trackEvent', network + '_State', 'status', "NotLoggedIn"]);
}
}
</script> Code:
<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)" />
Follow these steps to set up an app:
1. Login to Facebook
2. Visit https://developers.facebook.com/apps
3. Click the create new app button in the top right corner of the page
4. A dialogue box will appear asking for the app name, app namespace, and if you require web hosting.
5. Give your app a name (it doesn't matter what it is), name space is optional, and if you need hosting from Facebook, click the box. If you plan to host your app on your existing domain, leave the box blank.
6. If you choose to go with hosting through Facebook, it is provided by Heroku and you can learn more about it here, https://developers.facebook.com/blog/post/558/
7. Click continue, fill out the captcha, click continue again
8. In the final screen, your app has been created
9. Grab the long number next to app ID at the top of the screen next to the default thumbnail image. You will past this into the code snippet below.
Here is the snippet,
Code:
<script>
window.fbAsyncInit = function(){
FB.init({ appId:'YOUR-APP-ID-HERE', 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> By setting up advanced segments, not only is the data easier to look at, you can also compare it to other metrics on your site. Follow these steps to set up custom segments.
1. Login to your Google Analytics account
2. Click Advanced Segments in the grey bar at the top of any report
3. Click "New Custom Segment" in the bottom right corner of the new drop down that appears
4. Enter a name for your segment and choose which facets to base it on. For this use the Custom Variable slots that the Javascript tracking code uses. Analytics allows 5 Custom Variable slots, and the code above uses 4 of these (1 = Google, 2 = Google+, 3 = Twitter, and 4=Facebook). Name your segments appropriately. For example Twitter Users, Facebook Users, Google Plus Users, etc. This will make them easy to identify in reports.
5. The menus in the segment should be set to "include" , "Custom Variable" (NOT Custom Key), "exactly matching" , and "LoggedIn".
6. Save the segment and that's it. (repeat for each network you are tracking)
To view the data just click on advanced segments again, and you should see check boxes with the names of your new segments in the list of available segments.
-
totozip -
Thanks
{{ DiscussionBoard.errors[7818432].message }} -