​
Pixel Integration for SFCC

​
Introduction

This document provides instructions on how to integrate Order Tracking Pixel with SFCC.
Our Salesforce Commerce Cloud implementation includes the Tracking Pixel pre-installed on the default Order Confirmation Page.If you are utilizing the default Order Confirmation Page, no further action is required.

​
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:
dw.order.Order object must be present in the PipelineDictionary (pdict) as key order
  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>
  1. Add our <isinclude> right before decorator ends
        <isinclude template="videowise/trackingPixelDataContainer" />
    <isdecorate>
Order Tracking Pixel should now be available after the next successful order.

​
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
}
Order Tracking Pixel should now be available after the next successful order.

​
Conclusion

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