In this article, we'll go over how to track all the purchases that can happen in a ClickFunnels funnel.

This tracking method is only used for tracking multi-step order forms and cannot be used out of the box on a multi-step order form. To track single-step order form, please refer to this guide.

1. Install the Funnelytics base script in Clickfunnels

Install the base Funnelytics script in the <body> section of the global tracking settings fields. Please refer to this guide for more detailed instructions.

2. Map the URL of each step to a page icon in Funnelytics.

Each step in ClickFunnels has a unique URL. Map the URL of each step to a page icon inside of Funnelytics. Be careful not use the "redirect link" that CF gives you. Be sure to use the actual URL of the page.

The URL of the step can be found by taking your domain + the page path found in the settings of the step. 

In this example, we'll be tracking a funnel that has a landing page, order page, 2 upsell pages, 2 downsell pages, and a thank you page. It will look like this in Funnelytics: 

3. Install the action scripts to the pages in ClickFunnels

a. To track the form submission action on the landing page please refer to this guide.
b. Add the following script to the order form footer.

<script>
jQuery(function($){      
   $('[href^="#submit-form-2step-order"]').click(function(){
    var mainName = $('.product-name').eq(0).text();
    var bumpName = $('.product-name').eq(1).text();
    var mainPrice = $('.product-price').eq(0).text().substr(1);
    var bumpPrice = $('.product-price').eq(1).text().substr(1);
    var totalOrderValue = parseFloat(mainPrice || 0) + parseFloat(bumpPrice || 0);
    var visitorName = $('input[name~="name"]')[0].value;
    var visitorEmail = $('input[name~="email"]')[0].value;
    console.log('Purchase Was Made');
    //If Bump Was Taken Save Variables and Trigger actions
        if ($('.product-name').length !==1) {
        //Trigger Funnelytics Actions for Main and Bump
        //main product
            window.funnelytics.events.trigger("purchase", {
                mainProductName: mainName,
                mainProductPrice: mainPrice,
                name: visitorName,
                email: visitorEmail,
                orderTotal: totalOrderValue,
                purchaseBump: 'true',
            }, function() {
                // continue with process..
            });
        //bump product
            window.funnelytics.events.trigger("purchase", {
                bumpProductName: bumpName,
                bumpProductPrice: bumpPrice,
            }, function() {
                // continue with process..
            });
        } else {
        //Trigger Funnelytics Action for Main Only
            window.funnelytics.events.trigger("purchase", {
                mainProductName: mainName,
                mainProductPrice: mainPrice,
                name: visitorName,
                email: visitorEmail,
                orderTotal: totalOrderValue,
                purchaseBump: 'false'
            }, function() {
                // continue with process..
            });
        }
    })  
});
</script>

c. Then go to the SETTINGS and then TRACKING CODE.

d. Paste the script in the FOOTER CODE section.

e. Save the page.

This tracking script will trigger Funnelytics actions for the main product and the bump product only if the bump product was purchased. 

4. Create the action in Funnelytics

To visually see if users have taken made the purchase or not on the Funnelytics canvas, we need to add an action and change the settings to match the event name and attributes used in the script. 

a. Drag 2 purchase actions from the action folder on the left onto the canvas. 

b. Under the settings of the first one, let's give it a name of "purchase w/ bump" and the other a name of "purchase w/o bump".

c. In the "purchase w/ bump" icon, under tracking settings, we're going to make sure that it has an event name of purchase and attributes of purchaseBump: true.

d. For the "purchase w/o bump" icon, we'll make sure that it has an event name of purchase as well and an attribute of purchaseBump: false.

These actions in Funnelytics will now display the number of times that a user was on the sales page, triggered the bit of code, and went to the OTO 1 page.

5. Verify and Troubleshoot

To verify that your purchase actions are working as expected, visit order form page. Then, open up developer tools and go to the 'console'

With the console open, complete the purchase. If it worked, you should see a message appear in the console "Purchase Was Made".

If the message says "Nope, not validated" it means that the name, email, and address fields could not detect values.

Alternatively, you can follow these steps to troubleshoot and verify.
http://help.funnelytics.io/en/articles/3751144-how-to-verify-actions-are-working-properly

If you have any questions or need further clarification about tracking purchases in ClickFunnels, remember to reach out to our support team anytime by clicking the support icon in the bottom-right corner of your dashboard, we are always ready to assist you!

Did this answer your question?