> ## Documentation Index
> Fetch the complete documentation index at: https://docs.videowise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Salesforce Commerce Cloud

> Learn how to install the Videowise Order Tracking Pixel on your SFCC instance.

# Pixel Integration for SFCC

## Introduction

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

<Note>
  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.
</Note>

## 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`:
<Warning>`dw.order.Order` object must be present in the PipelineDictionary (pdict) as key `order`</Warning>

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

```HTML theme={null}
    <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

```HTML theme={null}
        <isinclude template="videowise/trackingPixelDataContainer" />
    <isdecorate>
```

<Check>Order Tracking Pixel should now be available after the next successful order.</Check>

## 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:

```JavaScript theme={null}
<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:

```JavaScript theme={null}
{
    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
}
```

<Check>Order Tracking Pixel should now be available after the next successful order.</Check>

## Conclusion

You have successfully integrated Pixel with your SFCC instance. For further customization and advanced features, refer to our [FAQ page](https://videowise.com/faq).