Frontend Capabilities

# Facebook Pixel Tracking

Tracking Pixels are 1 x 1-pixel images that let you track the actions of your visitors on your website and measure the conversion. Follow the below steps to integrate facebook pixel tracking with Chargebee checkout (v3 version).

# Step 1: Create Pixel in Facebook

  • 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.

# Step 2: Enable Facebook Pixel on your website pages.

Here’s how it’s done:

  • Locate the header section (head tags) in your website pages.
  • Copy the pixel code from Facebook and paste it within the header section in your website pages.

# Step 3: Whitelist your domain in Chargebee

  • Go to Setting>Configure Chargebee>Checkout & Self Serve Portal>Advanced Settings
  • Add your site domain in the allow-lisited domains section.

# Step 4: Enable Facebook Pixel in Chargebee Checkout

Enable Facebook Pixel in Checkout based on your integration mode.

# Drop-in Checkout Integration

If you have integrated checkout using Drop-in Script mode, then include the data-cb-fbq-enabled="true" attribute in the included header script.

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

# API

If you have integrated checkout using API mode, then while initializing Chargebee instance, pass the enableFBQTracking parameter with value as true


$( document ).ready(function() {
  var cbInstance = Chargebee.init({
    site: "your-site",
    enableFBQTracking: true
  });
});
1
2
3
4
5
6
7
8

# Track Custom Events

The following code sample demonstrates the usage of the Chargebee library to create an instance and set up checkout callbacks to track custom events during Checkout. In this code, the variable cbInstance is declared and initialized as an instance of Chargebee using the getInstance() function. The setCheckoutCallbacks() function (opens new window) is then called on the cbInstance to define a callback function for the checkout process. Within the callback function, a custom tracking event is triggered using the fbq('trackCustom', step) function, where the step represents a specific step in the checkout process.

var cbInstance = Chargebee.getInstance();
cbInstance.setCheckoutCallbacks(function(cart) {
         return {
            step: function(step) {
               fbq('trackCustom', step)
            }
         });
1
2
3
4
5
6
7

Learn about (opens new window) events passed when you enable Facebook Pixel tracking.

← Google Analytics Tracking →