Storing facebook lead data in our database in real time using ReactJS, MeteorJS and fb’s Javascript SDK.

Hi Everyone,

For advertiser most scary thing with facebook ad’s leads is that the lead data is only available for two months. After that you cannot see your lead’s data on facebook dashboard. To handle this advertiser keep downloading csv file and merging them every month which is painful.

So here I am going to implement simple portal from where the Ad’s lead data is going to store in our database in real time. We implement this by following below steps:

  1. Create a facebook app from facebook’s developer account.
  2. Setup webhook product in your above created facebook app by creating a GET route on our server and subscribe leadgen.
  3. Setup client by integrating facebook’s javascripts SDK.
  4. Setup user login using Fb.login().
  5. Using graph api get page info of the loged in user’s account.
  6. Allowing user to subscribed the page and give permission to our app that it can access user’s pages.
  7. Creating POST route on server with same route path that we used for above GET route (In Step no 2). On this POST method we get real time facebook lead’s.
  8. Fetch data from lead’s and store it in the your database.

 1. Create a Facebook App.

  • Go to https://developers.facebook.com.
  • Click on “My Apps” and choose “Add a New App”.
  • Enter “App Display Name” and your “Email” and click on “Create App ID”.
  • After passing security check you will see the App Dashboard.
  • Now Go to the “Settings” and Click on “+ Add Platform”.
  • Select “Website” and enter full site url for example: “https://www.yourwebsite.com/”.

 2. Setup Webhook Product and Subscribe leadgen.

  • Click on “Add Product” in the side-bar of the dashboard.
  • Search for “Webhooks” and click on “Set Up”.
  • Now first we create a GET  route to verify the webhook.

On setting up the webhook it ask for the two things “Callback Url” and “Verify Token”. The webhook send a verification request by making a get request on callback_url with three params “hub.mode”, “hub.challenge” and “hub.verify_token”. To verify the callback and to enusre that the request we are getting is from our created webhook we have to check the responce “hub.verify_token” first and then responce back with “hub.challenge”. For make route in meteor I am using “meteorhacks:picker” Package.

var getRoutes = Picker.filter(function(req, res) {
  return req.method == "GET";
});
getRoutes.route( '/fbwebhook/page', function( params, request, response) {
  var url = request.url;
  url = url.substr(url.indexOf('/page?') + 6).split('&');
  var queryData = {}
  for(var i = 0; i < url.length; i++) {
    var urlIndex = url[i];
    var key = urlIndex.substr(0, urlIndex.indexOf('='));
    var value = urlIndex.substr(urlIndex.indexOf('=') + 1);
    queryData[key] = value;
  }
  let challenge = queryData['hub.challenge'];
  let verify_token = queryData['hub.verify_token'];
  if(verify_token === "your_verify_token") {
    response.write(challenge);
  }
  response.end();
});
  • Now go to App Dashboard and in Webhooks choose “Page” and click on “Subscribe to this topic”.
  • Enter your Callback Url ex. “https://www.yourwebsite.com/fbwebhook/page” and same “verify_token” you used in above code.
  • Now you can see a list of name that you can subscribe. Search for “leadgen” and subscribe it.

3. Integrate JavacriptSDK with your ReactJS Component.

Copy JavascriptSDK Code and paste it in “componentDidMount()” methods.

componentDidMount() {
  window.fbAsyncInit = function() {
    FB.init({
      appId : 'your_app_ID',
      autoLogAppEvents : true,
      xfbml : true,
      version : 'v2.11'
    });
  };
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

4. Setup User Login using Fb.login().

Create a login and logout button and to perform Fb.login() and Fb.logout().

<div className="col-xs-12 col-md-12 text-center">
  { userID ? (
    <p>
      <b>User ID - { userID } </b>
      <a className="btn btn-danger" onClick={(event) => {this.logoutFb(event)}}>Logout</a>
    </p>
  ) : (
    <div className="btn btn-primary" onClick={(event) => {this.loginFb(event)}}>Facebook Login</div>
  )}
</div>
loginFb() {
  var self = this;
  FB.login((res) => {
    var userID = res.authResponse.userID;
    this.setState({userID: userID});
  }, {scope: 'manage_pages'});
}

logoutFb() {
  var self = this;
  FB.logout(function(res) {
    self.setState({
      userID: null,
    });
  });

5. Use Graph API to get Pages info of the loged in User’s Account.

Basically Graph API is a way to read or write on facebook social’s graph. To know more about Graph API click here. Graph Api is consist of three parts “path”, “methods” and “access_token”. By default method is “GET” and access_token is user_access_token. So to get the page’s info we make Graph API call on “/me/accounts/”.
It will provide the Array of JSON of user’s pages data with there id, name, category and page_access_token.

loginFb() {
  var self = this;
  FB.login((res) => {
    var userID = res.authResponse.userID;
    FB.api('/me/accounts/', (resAccountData) => {
      self.setState({
        userID: userID,
        pages : resAccountData.data 
      }, () => {
        self.getSubscribedPage();
      });
    });
  }, {scope: 'manage_pages'});
}

6. Subscribe the Page to Get Real Time Leads.

To get leads on our webhook we first have to subscribed the page on which the ad is running with our app to get real time leads. We can do this by making POST call on “/<Page-Id>/subscribed_apps” with page_access_token. You also need to store the “Page-Id” and “page_access_token” in your database to fetch field values from lead.

FB.api(
  '/' + subscribedPage.id + '/subscribed_apps',
  'post',
  { access_token: subscribedPage.access_token },
(res) => {
  if(res.success) {
    var date = new Date();
    var obj = {
      userID: userID,
      access_token: subscribedPage.access_token,
      category: subscribedPage.category,
      name: subscribedPage.name,
       pageId: subscribedPage.id,
      date: date
    };
    // Meteor call to insert the data of Subscribed Pages
  } else {
    console.log("error: ", res.error.message);
  }
});

7. Create POST route on server to Get Real Time Leads.

Create POST route with the same path of the GET route we created earlier in second step i.e. “/fbwebhook/page”. On this route you will get the lead data in real time.

var postRoutes = Picker.filter(function(req, res) {
  return req.method == "POST";
});
postRoutes.route( '/fbwebhook/page', function(params, request, response) {
  var body = request.body;
  if(body && body.entry && body.entry[0] && body.entry[0].changes) {
    var changesArray = body.entry[0].changes;
    for(var i = 0; i < changesArray.length; i++) {
      var change = changesArray[i];
      var value = change.value;
      if(value.leadgen_id) {
        getLeadDetails(value); // to get lead's data
      } else {
        console.log("Value : fb/page : ", body);
      }
    }
  }
  response.end();
});

8. Fetch Field Data from the Lead using Page Access Token.

In order to get field data from the lead we use Graph Api. We make a GET call on “https://graph.facebook.com/v2.11/<leadgen_id >?access_token=<page_access_token>”. This will return the lead data.

function getLeadDetails(lead) {
  var { page_id, leadgen_id, form_id } = lead;
  Meteor.call('pageSubscribed.getByPageId', page_id, (err, res) => {
    var pageData = res;
    var access_token = pageData.access_token;
    HTTP.call(
      "GET", 
      "https://graph.facebook.com/v2.11/" + leadgen_id + "?access_token=" + access_token, 
    (err, data) => {
      if(err) {
        throw new Meteor.Error(404, err);
      } else {
        var data = JSON.parse(data.content);
        var { field_data, created_time } = data;
        var leadObj = {
          'leadgen_id': leadgen_id,
          'page_id': page_id,
          'page_name': pageData.name,
          'userID': pageData.userID,
          'form_id': form_id,
          'created_time': created_time,
          'field_data' : {}
        };
        for(var i = 0; i < field_data.length; i++) {
          var key = field_data[i].name;
          var values = field_data[i].values;
          leadObj.field_data[key] = values[0];
        }
        // Meteor call to insert the data of leadObj
      }
    });
  });
}

Here, the page access token is valid only for two hours. We can extend the expiry token of “page_access_token”. I will write about extending Page Access Token in next blog.

HAPPY CODING

2 Comments

  1. Hi Tanmay Verma,
    My name is Adir I`m the CEO of Interjet Ventures (an Israeli web development company),

    I`m writing you because we are adding a new feature to one of our products that is related to Extracting Facebook Leads ads to CRM, We are looking for a professional advise regarding dealing with Facebook leads of Business Accounts users.

    I will be happy if we can advise with you by email or by phone,
    We are willing to pay for your time if necessary,

    Thank you!
    Adir.

Leave a Reply

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