How to Track Facebook Purchase Conversion in ClickFunnels

One of the most popular tool to quickly create highly effective marketing funnels. No wonder why most of my clients are using ClickFunnels when selling few items online.

One of the major problem based on my experienced is the tracking system. It doesn’t have native integration like other platforms. You have to implement it on your own or with the help of a web developer. If you’re just selling one product the implementation is pretty straightforward, but most of the time the main checkout form has different variations that makes the tracking difficult, simply because the conversion value can be dynamic.

Here, I’m going provide a step-by-step tutorial on how to implement FB Pixel Puchase event with correct conversion value.

Requirements:

Javascript Cookie API
Facebook Pixel
jQuery

Requisite:

Tracking Clickfunnels Upsell Conversions using Facebook Purchase & Custom Conversion

Table of Content

• Type A Order Form (Product Variations)
• Type B Order Form (with Add-on checkbox)
• Type C Order Form (2 Steps with Product Variations+Checkbox)
• Firing Purchase Pixel with Correct Purchase Value
• Debugging & Verifying Implementation

Implementing Facebook Pixel Code

1. Login to your ClickFunnels Account
2. Select the Funnel where you want to add the Facebook Pixel Script.
3. Click Setting and paste the code in Header Tracking Section.

If you don’t know how to get the Pixel code. I wrote a simple steps on How to Get Your Facebook Pixel Code

4. Once done. Save your changes.

Adding Needed Script to Track Purchase value in Checkout Form

There are different types of checkout forms. From simple single product form, form with different product variations to product variations with add-on and discount features. Each forms has different javascript implementation.

Types of Checkout Form

Type A

Although this form has product variations. It doesn’t have add-on options and discount field that makes the implementation pretty straight-forward.

1. Go to the funnel Order Form
2. Inside the funnel, click SETTINGS > TRACKING CODE.

3. The Tracking Code window looks like this.

4. Now, we’re going to implement the code of Javascript Cookie API & Total Purchase Value Script in the Header Code section of Order Form funnel.

5. This code is responsible for tracking & saving the total price value and save it to users cookie. Make sure that you copied everything as is, and paste it in Header Section.

6. Now save your changes and we’re done with Type A Checkout Form. Remember that this implementation is for Type A form only.

Type B (with Add-on)

This type of form has add-on option. It’s has a checkbox, once checked an add-on product will be added as additional product and the regular and add-on should be sum up to get the total value. The code is pretty the same, so make sure you copy the code below properly.

Verify, if you have this kind of form then follow the instructions carefully.

1. Go to the funnel Order Form
2. Inside the funnel, click SETTINGS > TRACKING CODE.

3. The Tracking Code window looks like this.

4. Now, we’re going to implement the code of Javascript Cookie API & Total Purchase Value Script in the Header Code section of Order Form funnel.

5. Almost the same code except that it calculates the total price when there’s an add-on selected. Also work on form with Coupon code support.

6. Now save your changes and we’re done with Type B Checkout Form. Remember that this implementation is for Type B form only.

Type C (2 steps form)

Another type of form is the 2 steps order form. Wherein the buyers details is on the first step and the product info + payment info is on the second step.

If you have this kind of form. This is the code you will need to use.
Just follow the same steps from Type A OR Type B form, but make sure you copy and paste the code below.

Firing Purchase Pixel with Correct Purchase Value

Once everything is setup in Order Form. Go to the funnel where the user landed after purchased. Usually, it’s OTO1 or Upsell 1 Funnel or for those who doesn’t have Upsell yet, the landing page would be the Thank You Page.

If you’re asking why implement it in OTO1 or Upsell? The reason is simple. When buyer reached the OTO1 or Upsell 1, the buyer already paid the main offer, and it make since that we capture it right away. Most of the time there are 2 to 3 upsells on your funnel and buyer has the tendency stop on one of these funnels and never reached the thank you page.

Ok let’s go back to implementation and follow the steps below properly.

1. Simply go to the OTO1/Upsell 1 or Thank you page. (whichever you used.)
2. Inside the funnel. Click SETTINGS > TRACKING CODE.
3. In Tracking Code window. Copy and paste the code below.

Debugging & Verifying Implementation

Facebook Pixel Helper

First thing first, we need to check if FB Pixel event is working properly. To test, you need to install Facebook Pixel Helper. It’s a chrome extension so you make sure you’re using Chrome browser to test.

Follow this Guide on How to Test Facebook Pixel events using Pixel Helper.

Check Possible jQuery Conflict

By default, ClickFunnels already support jQuery library. But to make sure that there’s no javascript error cause by jQuery, you need to check the console and look for error related to jQuery.

1. There are two pages you need to check. The Order Form & OTO1 or Upsell 1 Page.
2. Right click on the page and select inspect or inspect element

3. Debugging window will appear and just click the Console tab and you should see if there’s an error.

4. If you see error like jQuery not a function or anything about jQuery error. It means you need to add jQUery library.

5. To fix this, just go to the FUNNEL > SETTING > Head Tracking Code and paste the code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

should look like this.

6. Save and inspect to check if the error still exist and check Facebook Pixel Helper if Pixel events are firing fine.

Other ClickFunnels Tracking Implementation you may need.

– Tracking Clickfunnels Upsell Conversions using Facebook Purchase & Custom Conversion