At Distilled's SearchLove conference in London back in October, Mat Clayton from Mixcloud provided a great snippet of Javascript that could be used to record whether visitors to your site were logged into Facebook or not. This has a few uses, such as customising which social buttons you show your user or just for recording how many of your users are logged in to Facebook and then using this to show your boss that you guys should really be interacting with your visitors there.
I wanted to take this idea and extend it to Twitter and Google+, and record whether users were logged in there too. It wouldn't provided me with any immediately actionable intelligence, but over time I'd love to see the trends of what percentage of a website's visitors were logged into the different social networks. As a side project, I was also interested to record what percentage of visitors were logged into a Google account and were therefore responsible for the dreaded (not provided) in my Analytics, and also what percentage of these users were registered for Google+.
However, whilst Facebook provides an API to allow this kind of intelligence gathering, there is no such API for Twitter and Google+, and a bit of research failed to turn up any techniques that worked across all the browsers. So I rolled up my sleeves and did some digging around, eventually finding a way to trick the login mechanism of these sites to reveal whether a visitor to my site was currently logged in. If you want to try it out visit my Social Network Login Status Detector Demo; it should return something like:
Setting up the tracking
If you're a code junkie and don't need any help then you can just go and pull the code from this template page. Otherwise, let me walk you through it. There are two main steps:
- Setup an empty Facebook app. This is free and only takes 60 seconds - it is required for the Facebook API code to work for your domain.
- Install the Javascript code.
Complicated, eh?!
Setup a Facebook App
I'm going to blast through this quickly; but if you want more details there are plenty of tutorials online. If you already have an App that is registered for the domain you wish to track then you just need the AppID and can skip to the next section. We need to create an empty Facebook App because the Facebook API will only allow code on a domain to make requests regarding an App that is linked to that domain.
- Login to Facebook.
- Go to the Facebook Developers page: https://developers.facebook.com/apps
- Press "Create New App" in the top right corner.
- For "App Display Name" enter anything you want; I used "TomTrack". Check the box to agree to the FB Policies and on to the next page.
- The next stage is pretty easy, just enter your domain in both the "App Domain" and "Website" sections:
- Hit "Save Changes" .
- Grab the App ID from the top of the page and save it ready for the next section.
Install Javascript Code
Firstly, make sure you have your Google Analytics on the page; the code below is for the asynchronous version of the code. Next you need to add this snippet of Javascript to the top of your page in the <head> section; this function will do the recording to analytics for us:
So far, so good. You'll notice that I used _setCustomVar, whereas Mat had originally used _trackEvent - I'm sure there are pros and cons to both, and the code on the template page provides both options.
Next we add the following code to the bottom of the page before the </body> tag, ensuring you replce the appID in the Facebook code with that AppID you created above.
You can copy and paste the code from the source code of this template page.
That's it - your tracking is all set!
Setting up Google Analytics
Once the code is installed you will be tracking right away, and can view the data in Audience > Demograhics > Customer Variables, assuming you are using the 'new' layout in Google Analytics. However, the power of this data becomes far greater when you setup Custom Segments so you can view how users logged into different Social Networks interact with the site compared to one another and compared to regular visitors.
Setup Custom Segments
Custom segments are really easy to setup, and can give a keen insight into your analytics when used well.
- Click "Advanced Segments" at the top of your analytics screen (once you're into the relevant profile), and hit "+ New Custom Segment" at the bottom right of the drop down.
- You'll be prompted to select a name for your segment and to select which facets to base it on. We'll be using 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) [side note: I think you could cram all these into 1 slot possibly]. We'll make a segment for each; here is how I setup my Twitter segment:
- Hit "Save Segment" and you're done. Now repeat this for each of the other variables. Ensure you are selecting "Custom Variable (Value xx)" and not "Custom Variable (Key xx)".
- You're done and are ready to play with some data.
Viewing the data in analytics
Once you have the tracking installed and segments setup you need to wait a few hours before you will see the first data appearing in Google Analytics. Once you have data coming in, the first step is to select which segments from your shiny new advanced segments you'd like to use:
Select those you are interested in and "All Visits" if you also wish to compare against all the traffic, and hit Apply. You can now go into any of your regular report screens and see these 2 demographics against one another; here you can see Facebook visitors to one of my test sites starting to be tracked after I installed the tracking code on Feb 13th:
We can immediately see that about 40% of the traffic to this site are logged into Facebook whilst browsing the site and the trend of visitors generally correlate. By adding a couple more segments I can see at the top of the page this breakdown across the networks
It turns out that most staff of this website are on Twitter and Google+, hence the quite high number for Google+ (this is a non-tech website) and the correlation between the 2 figures.
There are loads and loads of metrics you can compare and find of interest and you can spend hours playing around and digging down into the data for your site yourselves. One interesting one for this site, which has an explicit Conversion Goal (yes - comparing conversions could be a lot of fun) of trying to retain users on the site for 10 minutes or more:
Looks like driving users over from the Facebook page could be an area to think more about! They reach this target 50% more of the time than the average user. Just another little example of the kind of things you could be thinking about - I'd love to hear more suggestions and discussion in the comments for what other facets could be useful to look at.
Wrap Up
Currently, whilst Facebook provides a 'proper' API to access this information, Twitter and Google don't, and you should be aware that they might 'fix' the way this process works anytime soon. In the meantime I think there is some really actionable analytics you can gather in the meantime, beyond measuring the details in analytics. You might want to change the details of which social buttons are shown, or maybe provide a popup window to prompt further interaction via a particular Social Network.
In the meantime, I'd love to here what sort of suggestions people have for actionable intelligence based on the analytics you can gather via these techniques. I look forward to hearing what people suggest in the comments. :)
Excellent work Tom!
I'd say it warrants a WP plugin for the less code savvy in the audience.
Not a bad idea, Mike! :)
I need more hours in the day!
Then make it cost 5$ and you'll get the time you need.
Greetings Mozzers,
We put together a free WordPress plugin incorporating Tom's excellent social media tracking code above. It's quick and easy to install and configure just like the above.
Current version incorporates the behaviors in the post. The next version will support old style Google Analytics code and additional social networks not mentioned above. ;)
Any particular requests for additional social networks?
Enjoy!
Plugin: https://wordpress.org/extend/plugins/social-network-user-detection/
Instructions: https://adaptpartners.com/wordpress/social-media-user-detection/
You are my hero! I was just wondering how to get this on my site without bugging the devs. Now I can at least get it on our blog...and I'll bug the devs to incorporate it into our main site later once I've proven how useful that data is ;)
@mosquitohawk:
Here is my post about how to extend Tom's code so as to track the social network logins via a single CustomVar:
Consider extending your plugin to work with this, as some people may have all their CustomVar slots already filled up.
That was fast. Good work!
I agree 1000% and would gladly pay the freight to acquire said WP plugin once its made avail
For this data I would pay $10 Per Month on a subscription basis. That will fund the inital work and that will fun the maintence of the plugin.
Yes, a WP plugin would be great.
Hi Mike,
Hopefully you're also a fan of Usher besides Kanye West: "Your wish is my command so I'll cancel my plans tonight" - Usher, Making Love.
On our development blog we wrote a couple of weeks ago about how to log and analyze the Facebook status for visitors and with this awesome post we thought it was time to extend Toms script to a WordPress (WP) Plugin. While I want to become a millionaire someday ;-), the plugin is available for free via: https://www.springest.co.uk/social-analytics .
So no subscription or costs, but 1 demand: please let me know all bugs or features you're missing at the moment so we could improve the plugin and help the (less code savvy) SEO(Moz) community.
YESSSS!!! All of this stuff is going in my SMX West deck --- crediting Tom and yourself of course.
Martijn:
Here is my post about how to extend Tom's code so as to track the social network logins via a single CustomVar:
Consider extending your plugin to work with this, as some people may have all their CustomVar slots already filled up.
And thank you for creating an honest title for this article. "Monitor Which Social Networks Your Visitors are Logged Into With Google Analytics" describes exactly what you delivered.
Link bait titles are out of control here at times. I'm sure some others would have titled this something like: "Peer into the Private Lives of your Visitors with One Little Javascript".
Yeah I agree with iPullRank this type of thing would go crazy as a WordPress plugin ;)
Hi James,
On our development blog we wrote a couple of weeks ago about how to log and analyze the Facebook status for visitors and with this awesome post we thought it was time to extend Toms script to a WordPress (WP) Plugin. The plugin could be found here: https://www.springest.co.uk/social-analytics .
One demand: please let me know all bugs or features you're missing at the moment so we could (try to) improve the plugin and help the SEO(Moz) community.
Well, interesting and worth reading. Thumps up for this!
Awesome idea, i suspect it's going to convince many of my clients ot use social media and accept it is not a waste of time!
Just installed it in moments - one question I do have is that I work with many clients who are craft based or art based and used pinterest, how easy would it be to build this piece of code into it?
Further to this could it be done further for say Etsy or even say Hotmail etc... not that I want to with emails and what not but with say Etsy or Folksy it could come in handy
Thanks! :)
It would really depend how each of those sites was built; most of them aren't built with letting this sort of information be accessible to a 3rd party. For example, in my quick investigation I couldn't find a way to do this for LinkedIn or Tumblr.
Thanks Tom, makes sense
I agree, If anyone does find a way to include Pinterest into this it would be amazing. Pinterest sends more traffic to ecommerce sites than Facebook, Twitter and Google+ combined in the most recent studies done by multiple research companies.
The only advantageous use of the "onerror" image attribute I've ever seen!
Does anybody else have some privacy worries with this - begins to feel like this crosses the line.
I hear your point weeworld although it's aggregate data, not personalised info, and thus I don't regard it as any more invasive as any other standard tracking practice. In some jurisdictions this sort of activity is becoming more tightly regulated e.g. EU Cookie directive - although there are still a few months left until it comes into law.
Jim, I can also see why you feel this might be a concern in relation to privacy but it is important to remember that online marketing relies on the metrics from none personalised data in order to produce a better experience for the user by honing content to match their requirements and identifying any potential issues on a website. This technique is not identifying who you are logged in as or any other such details. As Paul says The EU cookie directive is coming into effect shortly, I think this new directive has really put the Cat amongst the pigeons by placing some tight restrictions on the monitoring of websites using tools such as Google Analytics which rely on cookies. The potential impact on the digital marketing sector in the UK has been very concerning.
If you've read this in 2015 and find the twitter isn't working because twitter have removed the spinner.gif then try changing the img src to "https://twitter.com/login?redirect_after_login=%2Ffavicons%2Ffavicon.ico" instead. hope it helps.
Hi Tom, i congrats you to provide us such a nice idea to track our Social Media visitors. Now, i will track and analyzed that how many visitors come from Social Media.
This is brilliant, Tom - thanks for sharing!
Thanks so much for all the work on this Tom.
It seems more of our smaller clients are asking for direction these days on "which social networks do we really have to worry about?".
In the past the only real data we had to help them out was actual clickthroughs from each, but now you've given us a much more accurate idea of a site's potential "social reach" from all site visitors. I can see that there are some great possibilities for other things to do with it too.
Can't wait to do a little digging with it :)
Sha
Yeah - that sort of question is exactly what this is good for. "40% of our users are logged into Facebook - lets stick some friggin FB buttons on this puppy!" sorta thing! :)
Have fun with it!
Absolutely.
Since I work fot a massive UK business but in a industry that totally is far away from Social Media this will make some great KPI's to update on a monthly basis.
Exactly. I love the actionable data this produces for a relatively low time investment. I can see how this will be very helpful to guide social strategies for individual companies.
Truly Awesome Post, Tom ;)
That is something really helpful to find out through which social network your users visited the site while logged in. It'll also help out to strategize & plan to stay focus on a particular social site from which we are getting visitors. That conversion part is a PRO tip.
Definitely, will be digging more into this & will let you know the results.
Again, thanks a lot Tom.
Since this is set as a visitor level custom variable you may need to call an event or a false pageview along with the setting of the custom variable unless you put that GA code above your initial trackpageview call.
Otherwise it could be possible the data never gets to google.
Google talks about this in the setup guide for using customer variables in the GA help documentation: https://code.google.com/apis/analytics/docs/tracking/gaTrackingCustomVariables.html#setup Scroll all the way down to the bottom and you will see this:
Let me know if I am wrong though as I don't want to be spreading misinformation, and I am not the best with JS yet ;)
this turorial is great. the data is very valuable.
I followed the tutorial, double checked it next day and I only can track google. no twitter or facebook users or Google users number matches google + users.
if someone would like to have a look its on https://www.idcreate.co.uk on the main site
Hi M112,
I had a look on you're Web site and it looks like to me processing the data is going well. As you can see in my screenshot the data is logged to Google: https://img.skitch.com/20120223-x6ispbhkmypbuw7re6bma3xnnq.jpg and also should be visible in Google Analytics. Please let me know via PM if you would need any help!
Hi Martijn, how did you get those results, I cannot seem to get anything tracking on https://seocowboy.co.za as mentioned above, SL SEM thinks the code order could be wrong, can you take a look at mine and see what is happening there as no results are coming in.
I added the script to my site 2 days ago and still have no stats, I must have done something wrong as nothing is showing up in Analytics. I put it on my SEOcowboy blog, you can find it in my profile
Thanks Yom for sharing this post with us. This is very interesting. And definitely I will use this on my all websites.
This is very interesting. Somehow, I didn't know about even the options with Facebook. I think it could definitely help in strategizing the importance for each social media network for your specific company. I'm excited to see what I learn.
Thanks
Excellent post....i am sure it will help me in tracking my social activities. Thanks
I'm impressed, Tom! This is really clever and useful.
This is great, easy to follow too! When will I start seeing stats in google analytics? I installed the snippets on my home page yesterday and added the variables on GA, but still no stats? I can post up the index.html if required.
There was a <div id="fb-root"></div> on that page that either wasn’t in the original code or I missed. I have now added it. did you catch this?
Also make sure that the custom variables are set correctly
This is an excellent plug-in! It's one thing to be able to track referral traffic via social media, but to visualize it like you've done makes the analytics behind this type of work all that more interesting. I will be downloading this very soon!
can you detect your visitor's likes and interests?
That is possible, although not via this solution. To get somebodies likes and interest they have to opt in into your Facebook App and approve what kind of data you want from them. After that it would be possible to record this kind of data in Google Analytics.
Twitter no longer works. They've taken the spinner.png image down, and I no longer have any idea how to track if a user is logged in with them... Any ideas?
Hi,
Great. Is there a way to track linkedin in similar manner.
Sen
This really depends on if you can find a file on LinkedIn that returns a 401 header when you're not logged in and a 200 successful status code when you're logged in. I wasn't able so far to find such a file.
Very impressive work.
https://www.guide-imc.com/
Hi Tom,
I'm a project manager trying to help my team figure out the issue we are having with not being able to track FB for our client through your code in Google Analytics. We have Twitter, Google+, and Google working without issue. We've even tried creating a blank FB app when there was concern the client didn't have that set up correctly. We have read through all comments above and made any necessary changes, but we cannot get FB to track on our client's site. The code works fine on the iCode site so we are honestly stumped. The site we are struggling with is udr.com. Any thoughts?
Thanks in advance.
Jesse
Hi Jesse,
Dammm, I love debugging. The problem is that you're calling the wrong function within the Facebook part of the scripts.
I first overlooked it too, but the function you're calling is: show_login_status while you need to use: record_login_status.
By adjusting this, you should be able to measure any Facebook activity.
Hopefully this answers your question, please let me know if you have anymore questions!
Martijn.
Hi Martijn,
We actually tried your suggestion but it doesn't work as well. We can actually get both functions to work on the iCode site but neither work on our client's site. We're beginning to wonder if there is a conflict with the FB code on the client's site specifically but we're at a complete loss especially since the others work without issue (i.e. Google, Google+ and Twitter.)
Any other thoughts?
Thanks!
Jesse
Hi Tom,
I implemented the code and this caught my attention ,
In organic report >> keywords section, I could see the revenue data against few keywords and most interestingly that came from Google Users.
If google has stopped sending the search referal data ( which is replaces with (not provided) ) why am i seeing this ?
It would had made sense if i see revenue data against facebook or twitter.
Screen shot : https://awesomescreenshot.com/0b96ol701
Thank you
Rama
Hi Tom,
If google has stopped sending the search referal data ( which is replaced with (not provided) ) why am i seeing # of users logged into Google for the keywords other than (not provided) ?
Incase if Tom fails to read this comment, Can some one shed light on the above ?
Update:I am refering to Organic keywords report in analytics.
Hi Rama,
Great question, but I think the answer is quite easy. The trick used for getting the logged in status for Google is totally different then secured search referral data. Tom's script check if the user is logged in into Google by triggering a call to it's account. So this got nothing to do with the secured search at all. And so it's capable to identify the status.
Hope this helps!Martijn.
Thanks for the new plugin. Good stuff!
I am a bit confused with my results. I have just tested being logged in with Twitter and in analytics its shows 1 hit for Facebook/Twitter/Google+
Am I ment to in the a different customer variable per segment?
Custom Variable (Value 1) - Twitter
Custom Variable (Value 2) - Facebook
Custom Variable (Value 3) - Google+
As at the moment there all set to Custom Variable (Value 3) for all 3 segments?
Very interesting work Tom, indeed. The only problem i have with it is that it is targeted mainly at the american society. The dutch for instance (my audience) is not this far along with social media as they are in the USA. Though it's comming more and more but still it's not at the same level.
I really do think this is very interesting material and i will be looking in to it a bit more to find out if it is an extra interesting factor for my audience.
Thanks for sharing.
I'm not sure this is legal, but I love it! Off to dig through some TOS *sigh*
It's legal, else all these facebook widgets that know you are logged in are also illegal :)
Tom,
This is fantastic. Is there way to do something similar that confrims that a person is logged-in on Facebook *AND* a member of the Company's Facebook Page (via Facebook "Insights for Websites").
The Business quesiton we're looking to solve is:
Is there a correlation between someone liking Acme's Facebook Page and visiting Acme.com
Any insight would be appreciated!
Hi Daniel,
Check out FB.getLoginStatus, which the Facebook code uses. Here I just concern myself with whether you are "unknown" or not (meaning logged in or not) but it also says whether the user is connected to the specified app. If you use the appID of your page, then you should be able to do this - it was actually how Mat Clayton used it originally. :)
Gooc luck! :)
Thanks Tom,
I was thinking the same thing as well. I may get my developer on it an see if it works. I need to figure out if it's that informative to have that data in the first place - see if there's any correlation we can at least identify.
If there are ideas you have to develope it further let me know. Would love to try some more homebrew analytics for Facebook and the social networks.
Nice work Tom and thanks for sharing - this is an ideal way to show the potential impact of increased social network activity to senior management - I will be implementing this shortly in order to give more weight to my recommendations. Thanks!
This is ACE! data has just come through... excellent!
Interesting, but is defeated by Flipboard on the iPad. Other mobile devices,too?
Louis Gudema
Great Post Tom,
I guess the only problem that I foresee in the near future is the limitation of Google Analytics where we can have only 5 custom variables at a time, as a result of which we might not be able to track other social media sites like Pinetrest, Orkut or any other social media site that might come up in the near future.
Apart from Google Premium (which offers 50 custom variables, for a highly moderate fee of $1,50,000 per year) is there any other alternate method that you have in mind?
- Sajeet
I think you could actually use one slot but with different keys then segment of key and value? I've not tried this but think it should work?
I'd suggest consolidating the variables into a single variable, then outputting a syntax which represents the status; e.g.,
Key 1 Name : 'Signed In'
Key 1 Value : 'FT'
...would represent a user who is in both Facebook and Twitter - you can then set up your advanced segments based on the presence of a single character in the key value.
This is a great suggestion - I'd thought about doing it this way around, but it does complicated the code a bit, as you have to fire all 4 detections and then do the tracking but it is doable. Thanks for the input. :)
And here it is! :)
https://czarto.com/2012/04/20/updated-visitor-social-network-login-status/
There is actually an easier way to accomplish this than in my blog post above using Tom's original code.
Since CustomVars are allowed to have multiple keys, all you need to do is to hard code the CustomVar slot number: So instead of using 1=Google, 2=GooglePlus, 3=twitter, etc… Just use the same slot for all networks.
You will also have to update your custom segments to filter on Key AND value.
I think this method is the best way to go (and better than the method outlined in my post) as it will allow you to store additional details about each network if needed (via the Value field)
Scratch that. Although you can store multiple keys in a single customvar slot, you can only set a single key per session.
This works, but there may be a character limit on how long the variable data can be. If I recall there was an issue with cookie size they were working around, but then that got resolved however google never updated that rule.
Something to double check.
For session level variables, the key-value pair character limit is 64 bytes (NOT 64 characters, but bytes. The values are URL encoded, so a "Space" will be recorded as %20 and take up 3 bytes not 1)
Hi
How long should it take for the data to come through? Also I am right in saying i add the code to my index.html?
Custom Variable data can sometimes be a bit behind the rest of the analytics data, but usually it comes with it so it depends on the size of your site. Probably a few hours. :)
I have looked at the data and I have had 4 views from Twitter,Facebook,Google+. If someone is logged into all three via say Hootsuite would this show 1 for each?
Complaint @Tom Anthony
You say you busy but come out with these awesome posts :)
"If you are interested in hiring me for a freelance SEO or Web Development project, then unfortunately I’m probably going to be unable to take it on because I’m very busy and my priority is with my day job and my most important project of all – my soon to be born daughter! However, if you think you have a compelling project and want to try to persuade me, or just get my feedback, then please fill in the form below."
Well I have a compelling project, so I want to talk, no excuses OK? :)
Azzam
This is great. Read it on a german news portal some hours ago, but I did not expect to find it here again :D
But in germany we'll have to fight versus data privacy fetishists :-(
Great idea ! I would look to implement this so I can monitor which Social Network I should put more emphasis on sharing and commenting.
Didn't tought of doing this kind of Analytics tracking before, guess I'll find more way to track things like this ...
Can't wait to try this out.
I'm really excited to get this implemented on my corporate site.
I noticed the demo isn't catching I'm logged on to Twitter and I think it is because I'm logged in through TweetDeck instead of on Twitter.com itself.
Anyone else noticing this while using Twitter through an app instead of onsite?
Strange - Have implemented all code as detailed above, and all appears to be working correctly. For example my advanced segmentation is reporting 3 Facebook users and 1 Twitter user over the course of the last 30 minutes. However, when I hit the [Google/Twitter/Facebook etc]_State link in the footer data table I'm taken through to a breakdown of LoggedIn vs NotLoggedIn which shows my 1 Twitter in the LoggedIn group and my 3 Facebook users in the NotLoggedIn group.
Would you mind elaborating on what exactly this means please?
I think I understand it now. The LoggedIn/NotLoggedIn toggles dependant on the custom variable you are looking at. In the above example I was looking at custom variable 1, which for me is Twitter. When I switch to view custom variable 4, in my case Facebook, I see 3 Facebook Users LoggedIn and 1 Twitter user NotLoggedIn.
Case Closed!
FYI - this triggered a Facebook "Suspicious account access" email for me, and got my Facebook account locked. Easy enough to fix, but I wouldn't want my users to all have to go through it :)
Screenshot: https://screencast.com/t/qSOdzVUb67
Apparently, Facebook is seeing the redirect from the login page as a successful login from the location of your server. Fun.
Would you mind letting me know the URL to the site you set this up for? I'd like to see if I also get that activity message.
I'm very interested in implementing this, but might as well call the whole thing off if this happens to everybody when they visit. If word ever got it a specific company was hi-jacking FaceBook logins it would be a disaster.
This is brilliant. It's a good hint if it's worth doing facebook paid advertising in the short run too, in addition to PPC.
Hi Tom
I am a newbie to this blog and a novice to SEO. I like your idea and thank you for this
great contribution.