Setting up Facebook Pixel Tracking if I'm using Chargebee Checkout (in-app layout)

Problem Statement

This article explains how to set up Facebook Pixel tracking when you use Chargebee Checkout (in-app layout).

Solution

Tracking Pixels are 1 x 1-pixel images that let you track the actions of your visitors on your website and measure the conversion.

To set this up, you need to:

1. Setup Facebook Pixel Tracking on your website

2. Enable Facebook Pixel Tracking in Chargebee

Step 1: Setup Facebook Pixel Tracking on your website

• Log in to your business account on Facebook and navigate to the Pixel tab under Event Manager

• Click Create a Pixel

• Fill in information about the pixel and click Create

• In the pop-up window that follows, choose the option Manually Install Code Yourself

  

• The subsequent screen will give you the code you need to integrate with your business website. Here's how it's done:

  • Locate the header section in your webpage code (i.e., <head> tags)
  • Copy the pixel code from Facebook and paste it within the header

Step 2: Enable Facebook Pixel Tracking in Chargebee

In the in-app layout checkout, you can enable Facebook Pixel Tracking following one of these approaches:

1. If you are using Drop-in Checkout

• Go to Settings > Configure Chargebee > Checkout & Self Serve Portal > Advanced Settings.

• Add your site domain in the whitelisted domains section

• In drop-in header script, include the data-cb-fbq-enabled="true" attribute

Sample:

<script 
  src="https://js.chargebee.com/v2/chargebee.js" 
  data-cb-site="your-site" 
  data-cb-fbq-enabled="true">
</script>

2. If you have integrated via Chargebee Checkout API

• Go to Settings → Checkout & Self Serve Portal → Advanced Settings

• Add your site domain in the whitelisted domains section

• While initializing Chargebee instance, pass the enableFBQTracking parameter with value as true

Sample:

$( document ).ready(function() {

  var chargebeeInstance = Chargebee.init({

    site: "your-site",

    enableFBQTracking: true

  });

});

Once tracking is enabled, see What are the events that can be tracked using Facebook Pixel? for the events Chargebee sends.

Track custom events

To track your own events as the customer moves through checkout, pass a callback to setCheckoutCallbacks() on the Chargebee instance. The step callback fires at each stage of checkout, and fbq('trackCustom', step) reports that stage to Facebook.

var cbInstance = Chargebee.getInstance();

cbInstance.setCheckoutCallbacks(function(cart) {
  return {
    step: function(step) {
      fbq('trackCustom', step);
    }
  };
});