This article will go over how to track upsells and downsells where there are multiple products that can be added on the single page.

This article is similar http://help.funnelytics.io/en/articles/3792919-how-to-track-upsells-and-downsells-in-click-funnels but covers the case when there are multiple product addons that are available on the page. 

The same script will be used on all upsell and downsell pages with only slight customizations. 

1. Add the Listener Script to Your First Upsell Page

Add the following script to your first upsell page:

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        var prodAddonArr = $('[data-title*="bump-button"]:visible')
        for (var i = 0; i < prodAddonArr.length; i++) {
        if (prodAddonArr[i].innerText.trim().toLowerCase() == "added"){            
            console.log(i+1 + " " + "Product(s) Added")
            //Trigger Funnelytics Action For Purchase(s)
            window.funnelytics.events.trigger("purchase", {
                product: "OTO1"
                addonNumber: i+1,
            }, 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>

This method will only work if the text on the button is equal to "ADDED" when the product was actually selected. 

If you're button says something different when the product is actually added to the order, you will need to modify the script to account for that.

2. Customize the Script for Future Upsell and Downsell Pages

Slight modifications are required for future upsell and downsell pages. 

All you need to do to modify the script for other pages is change any instance of it being the first OTO1 page to whatever the desired page is. 

Here is an example of what the script would look like for Upsell 2 page:

<script>  
jQuery(function($){
    $('a[href*="#yes"]').on('click',function() {
        var prodAddonArr = $('[data-title*="bump-button"]:visible')
        for (var i = 0; i < prodAddonArr.length; i++) {
        if (prodAddonArr[i].innerText.trim().toLowerCase() == "added"){            
            console.log(i+1 + " " + "Product(s) Added")
            //Trigger Funnelytics Action For Purchase(s)
            window.funnelytics.events.trigger("purchase", {
                product: "OTO2"
                addonNumber: i+1,
            }, 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>

3. Configure the Advanced Actions in Funnelytics

In order to show the number of each addon product inside of Funnelytics, we need to configure the settings of each action icon individually.

OTO 1 - Purchased Addon 1

This action represent the first OTO/upsell page AND the first addon product on the page.

Event Name: purchase
Properties:
key: product value: OTO1
key: addonNumber value: 1

OTO 1 - Purchased Addon 2

This action represent the first OTO/upsell page AND the second addon product on the page.

Event Name: purchase
Properties:
key: product value: OTO1
key: addonNumber value: 2

All Other Pages and Product Addons

All the other possible variations can be added by changing one or more of the variables listed above. Just remember to match the Funnelytics inputs exactly (case sensitive) to the values used in the actual script you put on the pages. 

Did Not Purchase the Upsell/Downsell

You can customize the event for not purchasing the upsell/downsell with these parameters. Just change the product name to match the script on the actual page.

Event Name: reject-click
Properties:
key: product value: Downsell 2

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(s) Added" 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?