Start your free, no-risk, 4 week trial!

Access Facebook user profile data with FB Login

Use Facebook visitor data to populate your analytics reports

Visitor profile with gender from FacebookHave you ever wanted to have in-depth details about your website visitors or app users?

If your users "login with Facebook" and login to your site with their Facebook credentials, you can access valuable profile data.

In this article, we will discuss and explain how to

a) access Facebook visitor data and 
b) insert it into your Opentracker web analytics reports.

This data is available when a visitor/ user is logged in with Facebook login details.

Q: How does it work?
A: When your visiors login to your site or app with their Facebook identity, you collect user information which you can access via our api. This information can then be shown in the Opentracker reporting system, and populate Visitor Profiles.
Additionally, you can then search through all of your data to match or locate any visitors or variables that interest you.

Note, due to the technical nature of this article, knowledge on javascript and Facebook api [1] are required. In this example, we will collect information on the visitor's gender.

The Javascript used to collect visitor Facebook profile information





function login() {
    FB.login(function(response) {
        if (response.authResponse) {

            // connected
            console.log("FB.login connected");
            window.location.reload();

        } else {

            // cancelled
            console.log("FB.login cancelled");
        }
    },
    fbscope);
}

window.fbAsyncInit = function() {
    FB.init({
        appId: '123456789012345',

        // App ID
        channelUrl: '//staging.pdfmyurl.com/facebook.channel.html',

        // Channel File
        status: true,

        // check login status
        cookie: true,

        // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
    });

    // Additional init code here
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {

            // connected
            console.log("FB.getLoginStatus connected");
            sendUserInfo();

        } else if (response.status === 'not_authorized') {

            // not_authorized
            // User logged into FB but not authorized
            console.log("FB.getLoginStatus not_authorized");

        } else {

            // not_logged_in
            // User not logged into FB
            console.log("FB.getLoginStatus not_logged_in");
        }
    });
};

function sendUserInfo() {
    FB.api('/me', function(response) {

        //console.log("my object: %o", response);
        var map = new OTMap();

        //map.put("username!", response.username);
        map.put("gender!", response.gender);

        OTLogService.sendEvent("user logged in", map);
    });
}


The above javascript code snippet is triggered when a user clicks on a login button on your website. When the user has logged in via the pop up window, and successfully authorized, a custom event is sent to opentracker [7]. Note the exclamation mark on the map key. This is the start of the journey to collect user information on your site. To learn more about what user information can be collected, please refer to the facebook api [8] [9] [10]. Here are a few examples from the facebook api [2] [3] [4] [5].

In order to see what data has been collected for your site, login to http://ot3.opentracker.net and navigate to visitor online and visitor clickstream. Below are screenshots illustrating the example from this article, implemented in the Opentracker reporting system. Please note that the gender has appeared in the visitor profile.

 

Facebook user profile data

Above: Opentracker visitor engagement reporting, with clickstream enhanced visitor profile including visitor gender.

Opentracker clickstream enhanced with Facebook user profile data

Illustration above: note the two pieces of information: the gender and the login status (login event), derived using a "login with facebook" event.

Facebook visitor data in Opentracker

 

 

 

References

[1]  https://developers.facebook.com/apps/

[2]  http://www.fbrell.com/auth/account-info

[3]  http://www.fbrell.com/fb.api/does-like

[4]  http://www.fbrell.com/fb.api/everyone-data

[5]  http://www.fbrell.com/fb.api/friends

[6]  http://pdfmyurl.com/js/facebook.js

[7]  http://api.opentracker.net/api/inserts/browser/javascript_implementation.jsp

[8]  https://developers.facebook.com/docs/reference/javascript/FB.api/

[9]  https://fbdevwiki.com/wiki/FB.api

[10]  https://developers.facebook.com/docs/reference/javascript/

 

Start your free, no-risk, 4 week trial!