Behavioral Targeting using Facebook Connect & Google Analytics Custom Variables

In this blog post I explain and demonstrates how to use Facebook Connect as a Social Login function, how to track Facebook demographic data like Gender and Age Group, and how to do Behavioral Targeting based on this data.

The Behavioral Targeting will be examplified Google Analytics Custom Variables

I will not explain all my code in this blog post, it's simply just too much going on. However, you can download this demo at the bottom of this blog post.

This blog post covers:

• Creating a Facebook App
• Facebook Connect
• Tracking Age Group & Gender as Custom Variables in Google Analytics
• Behavioral Targeting using Custom Variables in Google Analytics
• Reactivating Facebook Connect Tracking
• Google Analytics Events
• Facebook Connect Demo
• Download Example Code
  

Create a Facebook App

The first thing you have to do is to create a Facebook App that the user can connect to (login to).

Facebook Connect

The next thing you have to do is implement the Facebook Javascript SDK that makes it possible for the user to connect/login to your Facebook App. My code is based on a Facebook blog post, and you find it in fb-connect.js.


What kind of Facebook User Data you can ask for is described in the Facebook Graph Api. In my demo I'm asking for your birthday, which isn't part of the standard data you can get from a user. You have to ask specifically for that.

Tracking Age Groups & Gender as Custom Variables in Google Analytics

As mentioned earlier I track Facebook Gender & Age Groups in my demo using Google Analytics Custom Variables. I track this in different slots and on a visitor level (you have to do that if you want to do Behavioral Targeting). I don't track the age itself, but as a age group (ex. 18-24). And since I'm a nice guy I don't group those below 18 year.


Since the number of Custom Variable Slots are limited, you can also combine the data if you have few slots available. Ex. like this: male_18-24.

Remove formatting from Code

1. window.fbAsyncInit = function(){
2. FB.init({appId: 'YourAppID', status: true, cookie: true, xfbml: true, oauth: true}); //Replace YourAppID with your real AppID number
   
3.  ....more code
   
4. //Set some Custom Variables
5. _gaq.push(['_setCustomVar', 2, 'Facebook Gender',response.gender, 1]); //Save Facebook Gender as Custom Variable in GA
6. _gaq.push(['_setCustomVar', 3, 'Facebook Age Segment',ageSegment(aSegment), 1]); //Save Facebook Age Segment as Custom Variable in GA
7. ....more code
   

Behavioral Targeting using Google Analytics Custom Variables

To do the Behavioral Targeting based on our Custom Variables, we are using _getVisitorCustomVar. You will find this code in index.html.


Remove formatting from Code

1. <script type="text/javascript">
2. _gaq.push(function() {
3. var pageTracker = _gat._getTrackerByName(); // Gets the default GA tracker.
4. var visitorGender = pageTracker._getVisitorCustomVar(2);
5. if (visitorGender == 'male') {
6. document.getElementById('gaCV').innerHTML=('<p>If you are a male you will see this text.</p>');
7. } else if (visitorGender == 'female') {
8. document.getElementById('gaCV').innerHTML=('<p>If you are a female you will see this text.</p>');
9. }
10. });
11. </script>

Reactivating Facebook Connect Tracking

If a user deletes cookies from our domain, we will no longer be able to track Gender & Age Group if the user visits our website again. However, if the user still has authorized access to our Facebook App, we can reactivate this tracking.

You will find this code in fb-ga-tracking.js.


Remove formatting from Code

1. ....more code
2. window.fbAsyncInit = function() {
3. FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true, oauth: true}); //Replace YourAppID with your real AppID number
4. function checkStatus(response) {
5. if (response.status == "connected") { // Check if user is connected to your Facebook App
6. _gaq.push(function() {
7. var pageTracker = _gat._getTrackerByName(); // Gets the default Google Analytics tracker.
8. var visitorGender = pageTracker._getVisitorCustomVar(2); // Slot 2 - Gender
9. var visitorAgeGroup = pageTracker._getVisitorCustomVar(3); // Slot 3 - Age Group
10. if (typeof visitorGender === 'undefined' || typeof visitorAgeGroup === 'undefined') // Check if Custom Variables for Gender & Age Group in GA are undefined. We only want to run FB.api if it's strictly necessary since it slows down our website.
    
11. //user is logged in and connected
12. FB.api('/me', function(response) {
    
13. ....more code. Do the tracking.
    

Google Analytics Events

User actions like Login & Logout will be tracked as Events in Google Analytics.

My script also tracks if the user is connected to our App using Event Tracking.

Facebook Connect Demo




Download Example Code

For the demonstration purpose I considered hiding the the download behind the Facebook Connect Login, but since I'm not that type of person, here you go:


• Download Example Code (ZIP-file containing 3 files)

Update 2012.12.13:
The example code contains example of doing behavioral targeting using BTBuckets. BTBuckets do not exist anymore, so remove that part of the code.

Some final words

If a user is logged in to Facebook and has authorized your Facebook app, you can in theory track the user across different devices. For example, I'm logged in to Facebook both on my PC (with 3 different browsers) and on my mobile. That means I could track myself across all those devices and browsers.

Don't abuse the possibilites and do that! You are not allowed to store Personally Identifiable Information (PII) in Google Analytics.

If you think the piece of code could be improved, feel fra to comment (I'm not a programmer).

Related articles

• Tracking Facebook Likes, Share, Send & Comments as Social Engagement in Google Analytics
• How to Track Traffic from Facebook Likes, Send or Comments in Google Analytics
• How to Track Facebook iFrames with Google Analytics
• How to use BTBuckets to Administrate the Google Analytics Feedback Form