​

Pixel Integration for SFCC

​

Introduction

This document provides instructions on how to integrate Order Tracking Pixel with SFCC.

​

Prerequisites

• Salesforce Commerce Cloud instance
• Admin access to your Salesforce Commerce Cloud instance
• Videowise Pixel Tracking activated from Videowise Application
• Videowise Cartridge in your Business Manager Cartridge path

​

Integration Options

There are two options to integrate the Order Tracking Pixel on other pages on your SFCC instance:

​

Option 1: Adding our pre-defined ISML code to your files

You can add our already pre-defined ISML code to your preferred location. This method involves updating your ISML file to include our code. For example let’s modify the template/default/checkout/confirmation/confirmation.isml:

1. You will need to add our <isscript> to the top of the file right under your decorate template (<isdecorate>)

    <isdecorate template="common/layout/page">
        <iscomment> Videowise SFCC </iscomment>
        <isscript>
            var shouldTrackPurchase = dw.system.Site.getCurrent().getCustomPreferenceValue('videoWiseEnabled');
            var trackingAPIUrl = dw.system.Site.getCurrent().getCustomPreferenceValue('videowiseTrackingApiUrl');
            if (shouldTrackPurchase) {
                assets.addJs('/js/videowisePurchaseTracking.js');
            }
        </isscript>

2. Add our <isinclude> right before decorator ends

        <isinclude template="videowise/trackingPixelDataContainer" />
    <isdecorate>

​

Option 2: Adding Custom JavaScript Code

Alternatively, you can add custom JavaScript code to your preferred location after a successful order. You will need to complete the necessary fields in the script. Here is an example:

<script>
(function() {
    const vwPixelUrl = 'https://assets.videowise.com/videowise-info-pixel.js.gz';
    const vwOrderNumber = {{ sfccOrderNumber }};
    const vwOrderGrandtotal = {{ sfccOrderTotal }};
    const vwCurrency = {{ sfccOrderCurrency }};
    const vwOrderTotalProducts = {{ sfccOrderTotalCountItems }};
    const vwShop = {{ sfccSiteId }};
    
    const script = document.createElement('script');
    script.src = vwPixelUrl;
    script.onload = () => {
        window.vwPixel({
            orderId: vwOrderNumber,
            orderTotal: vwOrderGrandtotal,
            orderCurrency: vwCurrency,
            orderItems: vwOrderTotalProducts,
            shop: vwShop
        });
    };
    document.body.appendChild(script);
})();
</script>

Make sure to replace the placeholders ({{ ... }}) with the actual values from your SFCC instance.

All actual values can be retrieved manually with custom code or using our Javascript Helper public method getTrackingPixelData from cartridge/scripts/helpers/videoWiseHelpers.js which will return the following object:

{
    grandTotal: 123, // Order Grand total
    orderNumber: 'ODEV-123', // Order Number
    productQuantityTotal: 5, // Order Total products quantity
    currency: 'USD', // Order Currency Code
    shop: 'https://instanceURL.com' // Order Instance URL
}

​

Conclusion

You have successfully integrated Pixel with your SFCC instance. For further customization and advanced features, refer to our FAQ page.