Setting up Facebook Pixel Tracking if I'm using Chargebee Checkout (in-app layout)
Problem Statement
This article helps you understand setting up facebook pixel tracking if i’m using chargebee checkout (in-app layout).
Solution
Tracking Pixels are 1 x 1-pixel images that lets you track the actions of your visitors on your website and measure the conversion.
To set this up, you need to:
-
Setup Facebook Pixel Tracking on your website
-
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
- Locate the header section in your webpage code (i.e.,
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:
- If you are using Drop-in Checkout
-
Go to Setting > 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>
- If you have integrated via Chargebee Checkout API
-
Go to Setting → 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);
}
};
});Related Articles
Show more
Was this article helpful?