Let's go over how to track upsells and downsells in Click Funnels

1. Add the Listener script to the upsell pages

Add the following script to the footer of the 1st upsell page

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        console.log('OTO1 Was Purchased')
        //Trigger Funnelytics Action For Purchase
        window.funnelytics.events.trigger("purchase", {
            product: "OTO1",
        }, function() {
            // continue with process..
        })
    })
    $('a[href*="#no"]').on('click',function() {
        console.log('OTO1 Was Rejected')
        //Trigger Funnelytics Action For Not Purchasing
        window.funnelytics.events.trigger("reject-click", {
            product: "OTO1",
        }, function() {
            // continue with process..
        })
    })
});
</script>

Customize the code for future upsell pages

The same bit of code can be used for future upsell pages. All you have to do, is change all the instances of "OTO1" to something else like "OTO2", "OTO3", etc. 

For example the code I would use for OTO 2 would look like this: 

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        console.log('OTO2 Was Purchased')
        //Trigger Funnelytics Action For Purchase
        window.funnelytics.events.trigger("purchase", {
            product: "OTO2",
        }, function() {
            // continue with process..
        })
    })
    $('a[href*="#no"]').on('click',function() {
        console.log('OTO2 Was Rejected')
        //Trigger Funnelytics Action For Not Purchasing
        window.funnelytics.events.trigger("reject-click", {
            product: "OTO2",
        }, function() {
            // continue with process..
        })
    })
});
</script>

2. Add the Listener script to the downsell pages

Add the following listener script to the footer of the 1st downsell page

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        console.log('Downsell 1 Was Purchased');
        //Trigger Funnelytics Action For Purchase
        window.funnelytics.events.trigger("purchase", {
            product: "Downsell1",
        }, function() {
            // continue with process..
        })
    })
    $('a[href*="#no"]').on('click',function() {
        console.log('Downsell 1 Was Rejected');
        //Trigger Funnelytics Action For Not Purchasing
        window.funnelytics.events.trigger("reject-click", {
            product: "Downsell1",
        }, function() {
            // continue with process..
        })
    })
});
</script>

Customize the code for future downsell pages

Just like with the upsells pages, this bit of code can be used for future downsell pages. 

All you have to do is change any occurrence of the word "Downsell1" or "Downsell 1" to the next downsell number. 

For example, the code that should be placed in the footer of downsell #2 page would look like this: 

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        console.log('Downsell 2 Was Purchased');
        //Trigger Funnelytics Action For Purchase
        window.funnelytics.events.trigger("purchase", {
            product: "Downsell2",
        }, function() {
            // continue with process..
        })
    })
    $('a[href*="#no"]').on('click',function() {
        console.log('Downsell 2 Was Rejected');
        //Trigger Funnelytics Action For Not Purchasing
        window.funnelytics.events.trigger("reject-click", {
            product: "Downsell2",
        }, function() {
            // continue with process..
        })
    })
});
</script>

3. Mapping the Actions out in Funnelytics

In this example we have 6 actions that we're tracking. 

  1. Purchase OTO 1
  2. Purchase OTO 2
  3. Purchase Downsell 1
  4. Purchase Downsell 2
  5. Did not Purchase Downsell 1
  6. Did not Purchase Downsell 2

Map each action to live in between the two steps it's related to. For example, Purchase OTO 1 should live between the OTO1 page and the OTO2 page. 

Between the downsell page and the next OTO page, map two actions. 1 For purchasing the downsell and 1 for not purchasing, or rejecting, the downsell.

Purchase Action Settings

All purchase actions (upsell 1, upsell 2, downsell 1, downsell 2) will have an event name of "purchase" and a property of "product" and a value that matches the name of the product. OTO1 in this case. 

These values need to match the values that were set in the actual script from section 1 of this guide. 

Here's an example of how these settings look with Purchase OTO2, Purchase Downsell 1, Reject Downsell 1, Purchase Downsell 2, and Reject Downsell 2.

Purchase OTO2

Purchase Downsell 1

Reject Downsell 1

Event Name: reject-click

Purchase Downsell 2

Reject Downsell 2

Event Name: reject-click

4. 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 "[Product] Was Purchased" or "[OTO#} Was Rejected"

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?