Last updated on March 26th, 2021 at 03:18 pm
Reading Time: 3 minutesOne of the most popular tools to quickly create highly effective marketing funnels. No wonder why most of my clients are using ClickFunnels when selling products online.
One of the major problems based on my experience 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 make the tracking difficult, simply because the conversion value can be dynamic.
Here, I’m going provide a very simple step-by-step tutorial on how to implement FB Pixel Puchase event with correct dynamic conversion value.
Requirements:
– Google Tag Manager
First you need GTM account, you can use your GMAIL account to create it. Just follow this steps on:
How to Create Google Tag Manager Account
Next, you need to implement your GTM to your ClickFunnels account.
– Here’s the Step-by-Step guide on How to Implement GTM to Clickfunnels.
If you already have GTM account, then skip the steps above.
– Facebook Pixel
Included Facebook Events:
- AddToCart
- InitiateCheckout
- AddPaymentInfo (Stripe only)
- Purchase
Awesome Features
– Support Stripe Gateway
– Support PayPal Gateway
– Support Any Type of Forms [ 1 step & 2 Steps ]
– Support Order Bump
– Super Easy Installation
– Use to all your Funnels [No Limit]
– You’ll get support from me.
– Pure Javascript [ jQuery not needed ]
Implementing Facebook Pixel via ClickFunnels
First Part
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.
Note
* If you want to implement it inside GTM instead of ClickFunnels, all you need to do is unpaused the imported tag name facebook.pixel and replace the FB Pixel code, then publish your changes.
Needed GTM dataLayer
Second Part
Below is the needed dataLayer code that needs to be added to the following funnel: Order Form, First Upsell (OTO1) or if you don’t have OTO1 add it to the order confirmation page. Make sure to add the codes in the funnel Tracking Code section.
Order Form
Quick Guide on How to Add script on a Funnel.
First Upsell (OTO1)
Another required code, add this script on your first OTO page, again if ever you don’t have OTO1 page, then add this to your Order Confirmation/Thank You Page.
Add in Head Section of First OTO:
Import JSON File to Google Tag Manager
Third Part
All the needed scripts are on the JSON file that you need to import to your GTM account. This file won’t take a minute to import and once imported all the script will work accordingly.
Watch this on How to Import JSON to GTM
Note: You need to publish the GTM after importing the JSON file.
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.
For UPSELL Tracking, click the link below:
– Tracking Clickfunnels Upsell Conversions using Facebook Purchase & Custom Conversion
Hi John, once I do all of this, how do I setup the custom conversion to track how many people bought the order bump?
Hi Jason, I know I already sent you email regarding this.
“The Order Bump is automatically captured by the script and it adds up to the main product price then trigger the Purchase event on OTO (or page right after Order Form). You don’t need to create custom conversion since we’re using the standard events to track purchases.
This is great stuff and worked immediately. If I know my product ID’s… is there any way to report to Facebook my net revenue (money I’m keeping after material costs) instead of gross revenue (purchase price)? Example, the customer pays $99. But I don’t want to post to my FB dashboard $99. The product might cost $50 to manufacture. I want to post to FB dashboard $49, the profit I keep after a sale. And these values are different per product in my available checkout product. Thanks!
I missed this. It’s possible with minor modification on the code.
If you have can you tell me i need too
great work here. thanks! can i get this mod as well pls?
Hi, what do you mean about mod? Thanks!
Can I get the code for the modification that Eric is talking about?
Hi John, is the code for form Type C also for the case when I have a 2-step order form AND an order bump?
Yes Type C support 2 steps form with Order Bump
Hi. If I hire you to implement this for $150, will you implement the full tracking both for the order page and the OTO pages? And will you also give me the codes for later use myself? And could you do a screen recording while implementing it so I can refer to it for later use on other funnels?
Man you are amazing 🙂
Thank you!
Hey,
Im using type b but when the purchase was made it didn’t show the value in fb and i received a diagnostic error of “Missing Purchase Value Parameter”
The type b works even if the person doesn’t select the order bump correct?
I have 3 packages (different quantities) for the same product in the checkout page to choose from. Do i have to select the id for each product, then a value, then currency manually to get it to work?
the pixel helper shows a green check beside it and the console in inspect shows no error as i added the jquery code to the funnel settings above the google tag and pixel code.
thanks for your help
Send me the link of order form and first oto. I’ll help you check. thanks
Hey, don’t see the links I put here, just want to make sure you got them as I don’t see an email. Should I send them again or you are checking it out?
I just updated the whole code 🙂 It’s now on the latest version and it support PayPal.
Hi John,
This is the second variation of the same thing I have implemented on my site. For some reasons I cant get any to work.
So I have done all of the above. FB pixel events are all firing at the correct times and showing purchase, but it doesn’t ever add my order bump into the purchase, it just shows the value of my initial offer/product.
Please help.
Thanks
David
Hi David, sorry to hear that your order bump is not tracking. Probably the summary row is not present on the order form that’s why it can’t get the value. I can help you check and fix it if you provide me the link to your order form. Send me an email 🙂
john@retargetingpx.com
Yes I think this could be the issue. I explored the code from previous attempts and came to a similar conclusion but wasn’t sure due to my limited knowledge of coding! Thanks man I’ll email you now!
John,
I have implemented your new version of your code onto a new funnel and I’m getting no errors but I am having some issues.
The total is adding up wrong when order bump is ticked. I have 1 product at 19.98 and a bump product at 8.99. When I just click the one product it adds the correct value of 19.98 but when I add the order bump it totals it as 69.98 for some reason? (Total should be 28.97)
Also I cant get the AddToCart, InitiateCheckout, AddPaymentInfo.
I have tried adding the ajax.google code to the head too to see and same issue.
I do have some other custom code in my funnel but I have tried removing this to see if it causing the problem but made no difference.
Please help!
Thanks
Hi John,
.
I can’t get the below events to trigger on my funnel after installing your code?
Please could you have a look for me?
AddToCart
InitiateCheckout
AddPaymentInfo (Stripe only)
.
Also, can you please let me know what the exact triggers are for each exactly? I cant figure out the code to investigate myself.
.
Thanks
David