[en] Facebook Login & Universal Analytics

There are two things I’d like to talk about in this article and these are:

1) How to use Facebook ID as the User ID in Google Universal Analytics and why to do that

2) How to create Facebook Custom Audiences based on Google Analytics data

[bonus tip at the end]

First of all, I’m not a developer and even though, I’ve managed to put in place a working experimental page that you can find here.

Let’s start:

1) As you probably know, or you should know, one major thing that Google Universal Analytics brought was the cross device tracking feature. This feature doesn’t automatically track your users across devices but gives you the opportunity to do it by using User IDs. It sounds good, but unless your users are forced to login, the feature doesn’t help. This is where Facebook Login feature can make the job for you automatically or almost automatically.  After the users first Login, Facebook will use his own cookie tracking system to log the users in on any device, anytime and anyplace.

Why Facebook login?

You can measure people not devices

You have a built-in cross device tracking system based on ID not on cookies

Users doesn’t change their Facebook account too often so once You get the ID, the user it’s yours

You can reuse the IDs for creating custom audiences and retarget the users based on the onsite behaviour and not only

You can track the Liftime Customer Value

It’s free!


2) By using Facebook Login, you can push the Facebook User ID as a custom dimension in Google Analytics and then use its power to create custom audiences in Facebook. Remember that Facebook login it’s an app and you can upload user IDs to create the audiences you need. This can Be done by simply creating a custom report that has the custom dimension that stores the ID – This is also cool stuff

Now, let’s move on to the how to:

First we need to setup a Facebook app here and submit it for approval. – Don’t forget it’s a free feature!

After the app is ready, you have to setup the login button for our website. It’s a simple copy paste from here. You can also check the code on my test page here but at this point I’d call a developer friend.

Now that we have everything in place, we need to push the Facebook ID variable into the dataLayer for further use in Google Tag Manager and this can be done by adding a small piece of code like this:

// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);

‘facebookID’: response.id, //here the Facebook ID is passed to the variable called facebookID
‘event’: ‘idLoaded’}); //here we send the event saying that facebookID should have been populated by now


The status check should be done on every landing page (session unification can, somehow, do the rest). I strongly recomend contacting the dev. You can use a first party cookie system to store the fbID and only call Facebook for unknown users or conflicts (multiple users on the same device).

Done coding!


Google Analytics Setup

At this point we should have a working Facebook Login Button, and the Users Facebook ID sent into the dataLayer. You can use dataSlayer Chrome extension to check if everything is working fine with the dataLayer.

Next, we need to setup the UserID tracking View and the custom dimensions in Google Analytics.

Google Analytics -> Admin -> Select Desired Property -> Tracking Info -> User ID -> Session Unification ON -> Create View

Screen Shot 2014-12-14 at 5.52.41 PM


Google Analytics -> Admin -> Custom Definitions -> Custom Dimensions -> New Custom Dimensions -> FacebookID -> Scope USER (useful for Lifetime Customer Valute and user based audiences)

Google Analytics -> Admin -> Custom Definitions -> Custom Dimensions -> New Custom Dimensions -> FacebookID -> Scope SESSION ( ideal for session-based audiences)

We need them both because based on the SCOPE we can  later create different reports for Facebook Custom Audiences. Retargeting, You know?

Screen Shot 2014-12-14 at 5.53.38 PM


Google Tag Manager Setup

Now, we move on to Google Tag Manager and set everything in place.

a) Datalayer variable

Macros -> New Macro -> Macro Type : DataLayer Variable

Screen Shot 2014-12-14 at 5.25.09 PM

b) Custom trigger on event

Rules -> New Rule -> Remember the idLoaded event pushed? That’s the one! (I also added random into the URL because is the only page using Facbook Login)

Screen Shot 2014-12-14 at 5.32.42 PM


c) Google Analytics Tag

NEW -> TAG -> Universal Analytics -> Tracking ID (your desired Property UA) -> Track Type Event -> Event Category FBID Loaded -> Custom Dimensions 1,2 -> {{Facebook ID Macro}} (Be sure to check the custom dimensions index before sending the value. In my case I have only two. Remember different scopes?)

Fields to set-> &uid -> Facebook ID Macro // here we send the user ID value

Screen Shot 2014-12-14 at 5.39.06 PM


Preview -> Debug -> Publish

Here’s how a cross-device report looks like

Screen Shot 2014-12-14 at 5.47.19 PM


Here is a report that can be exported as a csv and used to create Facebook Custom Audiences. Of course on top of this you can add your own custom segments.

Screen Shot 2014-12-14 at 5.49.51 PM

Now, the bonus tip:

By default, the permission for Facebook login app includes access to the email address (response.email) so my question is:

What will you ask for in your next popup?

I really think this is a HUGE oportunity for marketers.

Regarding privacy, You can’t imprison something that can teleport.


Disclaimer: This is a proof of concept and I’m sure it can be improved by a developer, but as I said, I’m not a developer 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *