How to Track Facebook Purchase Conversion Value and Order Total in ClickFunnels

AnthonyEcommerce, News

Are you tracking every aspect of your funnel⁉

Do you know what drives your highest ROI… and your lowest ROI? (Where you need to focus your attention)

If you’re advertising on Facebook or driving any paid traffic, tracking your funnel — down to the dollar — is the key to boosting your results.

Your campaign should be guided by conversions and, even more importantly, which elements have the highest ROI.

Different customers, different leads, and different purchases have different values… 📊

And ClickFunnels has extra variables including order bumps, upsells, and more.

So it’s critical that we track our most valuable visitors so we can focus our customer acquisition on what is most profitable.

You need to know…

  1. How many people waited for your landing page to load versus bouncing (Landing Page Views)
  2. What products people viewed (View Content)
  3. How many people started the checkout process (Initiate Checkout)
  4. And how many Purchased
steps of an ecommerce funnel to purchase

Where does your funnel need work?

Need help with your advertising campaigns?
Email me at anthony@modernmedia.io

 

Because this lets you analyze your funnel to determine how each stage is performing and where you need to focus.

And if your funnel offers more than one product, option, order bump, and upsell, you likely need to calculate this value dynamically during the checkout process as your customer selects these options — so you can track Purchase Conversion Value and Purchase ROAS (Return on Ad Spend).

Graph showing number of purchases over a period of time

See your Conversion Value (Revenue) and ROAS in Ads Manager when you log Purchase Value.

 

If you have more than one product or price, ROAS is your key metric in Facebook Ads Manager to determining how you will optimize your campaign.

If one ad drives purchases of a cheaper product, but another ad creates more urgency and excitement in your customer and attracts larger orders including upsells, you obviously want to know which messaging and creative is most effective so you can optimize accordingly. 🔍

For example, say you have two carousel ads containing the same product set of clothing items. If two ads run equally, do you keep the ad that converts 10 purchases of $10 socks, or do you keep the ad that converts 5 purchases of $200 jackets? 🧦🧥

 

Facebook Ads Manager showing 5 ads and their number of purchases and purchases return on ad spend

Know exactly which ads are most effective by watching ROAS

 

This is even more important with Facebook’s new Value Optimization option and Value-Based Lookalike Audiences. Now, instead of just optimizing for conversions, you can optimize for conversions of the highest value… which, of course, we want to do! But to do so, we need to be tracking our purchase value.

Screenshot of Facebook Ads Optimize for Value option

To optimize for value, you must track value.

 

So, let’s find out how to dynamically track the order value in ClickFunnels…

Join the Modern Community of Advertisers. Stay up to date on best practices & techniques.

Join Modern Advertisers 🚀 →

ClickFunnels and the Facebook Pixel

ClickFunnels is a great website builder, but I’m shocked that it does not have a Facebook Pixel plug-in or built-in feature (without paying $300+ for CF Pro Tools…)

Shopify has it… BigCommerce has it… even WooCommerce’s plug-in does a great job.

Our challenge is some ClickFunnels functionality can be difficult to track…

  • Do you use the 2-step order checkout form?
  • What if they add an order bump?
  • How do you know the transaction was processed?
  • What about tracking OTO offers?
Billing form states credit card is not valid

Be careful to only log successful transactions

 

All of these are very common checkout funnel add-ons that we want to use (and track!) because they often enhance our average order value (AOV).

So… fine… I’ll do it myself! 🤷‍♂️

Here are the steps we’re going to need:

  1. Add Google Tag Manager (GTM) to your funnel.
  2. Add your Facebook Pixel Base Code in GTM.
  3. Add triggers and Standard Events to your funnel.
  4. Calculate the order total on check out.
  5. Save the order value.
  6. Log the purchase and value on the order confirmation.

 

1. Add Google Tag Manager to Your Funnel

Google Tag Manager is a code management tool from Google. GTM is great because it gives us control on how and when to trigger our Facebook events, such as on a button click. And when those triggers fire, we can input the specific code we want to execute at that time.

Add GTM by going to your funnel > Settings and dropping the code into the Head Tracking Code and Body Tracking Code sections.

ClickFunnels Settings Adding GTM to Head Tracking Code

Add Tag Manager in Your Funnel Settings

 

2. Add your Facebook Pixel in GTM.

Once you have Google Tag Manager added to your funnel, then add your Facebook Pixel inside of Google Tag Manager.

Get your Pixel’s code from Facebook Business Manager > Pixels > Events Manager > Set Up > Install Pixel

Facebook Pixel Manager copying code to clipboard

Don’t be scared of code – this is easy!

 

Create a new tag for your Pixel Base Code and set it to fire on All Pages.

This base pixel code also tracks each page view event, or landing page view, with the line fbq(‘track’, ‘PageView’);

I like to put the Pixel Base code in Google Tag Manager because then it will be added funnel wide to any new funnel steps I may add in the future. Also, sometimes we’re using the same GTM container on a ClickFunnels site and another site.

Adding facebook pixel code inside google tag manager

Tag Manager Is Da’ Bomb

 

3. Add triggers and Standard Events to your funnel

For a funnel that looks like the following, there are different events that we want to be sure to track to see how our visitors are progressing through our funnel so that both we and Facebook’s algorithm can optimize for us.

With an eCommerce funnel, you’re probably most interested in View Content, Initiate Checkout, and Purchase.

Funnel Steps in a ClickFunnels funnel

Every funnel is different – tag yours appropriately

Need help boosting your sales funnel?
Get in touch with us at hello@modernmedia.io

 

There are two order pages and two different products which they can purchase. Therefore we want to know which product they view, so we can retarget them effectively.

On the product-specific order pages, we want to add a View Content event for the matching product. 🏷

If you’re using a Facebook Product Catalog (maybe if you have a Shopify or WooCommerce storefront), be sure to include the content ID (a metadata field that each product has).

If you’re using Dynamic Product Ads (DPAs), logging View Content events with the ID tells the Pixel which products each visitor is viewing, so that the dynamic ad can show that same product in an ad to the same customer later. ✨These are super effective for eCommerce stores! ✨

If you’re using a FB Product Catalog, you can find your product IDs by going to Catalogs > Product Data Sources > Products > Item

Steps to find Item Group ID in a Facebook Product Catalog

Dig into your Product Catalog to find the ID. This is an example fitness product.

 

View Content

Then add the following code to your page:

  • If you’re using a product catalog with content IDs.Be sure to edit the value and content_ids for your products.

    <script>
      fbq('track', ViewContent', {
        value: 1999.00,
        currency: 'USD',
        content_ids: 'silver_141,
        content_type: 'product',
      });
    </script>
  • If you’re not using a product catalog.

    <script>
      fbq('track', ViewContent'});
    </script>

 

The View Content code I like to put on the actual ClickFunnels page itself because I only want it to trigger on this specific page for this specific product.

To add it this page, open the ClickFunnels page builder and go to Settings > Tracking Code.

Menus navigating to ClickFunnels tracking code editor

Pop open your tracking code editor

 

Facebook pixel view content code with parameter values

Facebook Pixel View Content Event Script — with Parameters!

Your funnel may be different and you may have different events that you want to track. See the Facebook Standard Events for all of the ones that are possible to add. You can also create your own Custom Conversions, but we recommend doing so only if really necessary. Standard Events allow the Facebook algorithm to learn across all advertisers.

Join the Modern Community of Advertisers. Stay up to date on best practices & techniques.

Join Modern Advertisers 🚀 →

Initiate Checkout

I also like to add the Initiate Checkout event to my funnels, because someone who begins entering their shipping address and payment information is a very warm prospect that I typically want to retarget.

I choose to fire Initiate Checkout when someone clicks the Go To Billing button (after they enter their email address) on the 2-step order form.

Green go to billing button

If you click this – I’m watching you 👀

To do so, we’ll need to use a Google Tag Manager trigger on a link click. If you hover your mouse over this button on your order page, you’ll see that it ends with #submit-form-2step.

Therefore, we’ll use a trigger that fires with URLs containing that.

Configure that by selecting Triggers Clicks – Just Links and set Some Link Clicks where the Click URL contains #submit-form-2step

If you’re using a different order form, the URL and the fragment after the “#” may be different. Copy the part of the URL after and including the fragment “#”.

The tag should then fire fbq(‘track’, ‘InitiateCheckout’); to log the FB Standard Event 🔥

Arrow revealing the URL of the billing button

Check your button URL for your order form

 

Google Tag Manager billing click trigger setup

Set your trigger to the fragment after the “#”

 

InitiateCheckout code in Google Tag Manager

The checkout – it has begun!

If you’re using a 1-page order form, you may want to set Initiate Checkout to fire on the order page load, similar to how we did with ViewContent or some other event that indicates the prospect is starting to check out.

4. Calculate the order total before checking out.

Now for the important, and tricky, part…

ClickFunnels doesn’t display an order total that we need when our order page has different product choices and order bumps.

So what we need to do is scan the order summary section and manually add together the prices of the products in the “cart” to calculate our total. 🧮

Arrow revealing the HTML code for the ClickFunnels order summary

Tricky ClickFunnels… Gimmie those prices

 

So, we are going to use a piece of JavaScript code that will find our cf-order-summary section and gather the products (elOrderProductOptinProducts) to sum their prices (elOrderProductOptinPrice).

We want this to trigger as they are clicking Complete Your Order to capture the final cart items.

The trigger is Clicks – Just Links and set Some Link Clicks where the Click URL contains #submit-form-2step-order (be sure this one has “-order” at the end of the Click URL).

 

Code snippet for calculating order value and saving the cookie

This is where the magic happens

Need help?
Contact me at anthony@modernmedia.io

 

5. Save the order value.

Now we want to be sure the order goes through before we log the actual purchase as we may have cases where the credit card is entered incorrectly or declined. 💳

Therefore, we are going to wait until we reach the following page (which may be the order confirmation/thank you page OR it may be an OTO page) before firing the Purchase event.

Since these next pages do not have the order total on them, we need to save the value we just calculated so we can reuse it once we reach this page.

The simplest way to do that is in a browser cookie that we can later retrieve.

On the last line of our JavaScript code, we use the jQuery method $.cookie(“my_order_value”,myOrderTotal); to store the cookie.

 

6. Log the Purchase and Value on Order Confirmation.

Finally, when the payment is processed and our customer reaches the next page, which again may be an OTO page or it may be a thank you page… we then know the purchase has gone through and we want to log the Purchase event with the order value to Facebook. 🙌

In the funnel page editor, add this code to the Footer Code section (we want to be sure jQuery loads before attempting to use the jQuery cookie method).

Code snippet retrieving the cookie and logging the purchase with order total to facebook

Grab the cookie from the cookie jar!

 

 

This script will retrieve the cookie which we previously stored.

We recommend adding an if-not-found section, just in case, where you want to default to your standard price (your base price without order bumps).

Then we use the fbq(‘track’, ‘Purchase’, …) method to log the Purchase event to facebook with the order total.

Voila!

 

BONUS: Test your events with Pixel Helper and Facebook Events Diagnostics

Since we’re slinging code, custom triggers, and calculated prices, it’s important that we test our configuration and verify that these events and parameters are being recognized by Facebook correctly.

First, navigate through your ClickFunnels site and verify that Pixel Helper is showing the correct events firing as you view products, adds to cart 🛒(if you’re using that tag), initiate checkout, and purchase. Also, if you’re passing in parameters for content IDs and value, check that those are correct on the front-end.

Facebook Pixel Helper showing the Add to Cart event with parameters

This Chrome Plug-in is a Must-Have!


Next, verify that FB is then receiving those events correctly on the backend.

FB Events Manager has a handy Test Events feature that allows you to monitor the events that you personally are triggering.

Confirm that the Events Manager is then receiving these events and parameters correctly. This Test Events page must be open at the time the event fires to appear here.

 

Screenshot of an add to cart event matching in events manager

Green means good to go!

 

Events Manager showing Page View and Purchase events

Analyze your own personal Facebook events in real-time

 

If everything matches, you’re good to go! 🙌

 

Ready to boost your sales with great Facebook Ads?
Book a call today >>