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

# Other

> Learn how to install the Videowise Custom Pixel Code on your site.

### Custom Pixel Code

```js theme={null}
// VIDEOWISE TRACKING PIXEL

function VWPixel({ orderId, orderTotal, orderCurrency, orderItems }) {
  var PIXEL_VERSION = "2.0.0";
  var UID_COOKIE_NAME = "reeview_uid";
  var CAMPAIGN_COOKIE_NAME = "reeview_campaign";
  var LS_COOKIE_NAME = "reeview_lsid";
  var REFERRAL_COOKIE_NAME = "reeview_referral";
  var WIDGET_EXPERIMENT_COOKIE_NAME = "REEVIEW_SESSION";

  function getCookie(name) {
    let cookieArr = document.cookie.split(";");
    for (let i = 0; i < cookieArr.length; i++) {
      let cookiePair = cookieArr[i].split("=");
      if (name === cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }

  function deleteCookie(name) {
    document.cookie =
      name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }

  function objectToQueryString(obj) {
    let result = "";
    var keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      var key = keys[i];
      result += `${key}=${obj[key]}`;
      if (i < keys.length - 1) {
        result += "&";
      }
    }
    return result;
  }

  function getDeviceType() {
    var size = 1024;
    var isDesktop = window.screen.width > size;
    return isDesktop ? "DESKTOP" : "MOBILE";
  }
  var shop = window.location.host;
  if (getCookie(UID_COOKIE_NAME) && shop && orderId && orderTotal) {
    var params = {
      uid: getCookie(UID_COOKIE_NAME),
      deviceType: getDeviceType(),
      orderId,
      shop,
      checkout_type: "OTHER",
      order_total: orderTotal,
      currency: orderCurrency,
      order_items: orderItems.length,
      campaignId: getCookie(CAMPAIGN_COOKIE_NAME),
      lsId: getCookie(LS_COOKIE_NAME),
      clientTs: new Date().toISOString(),
      experiment: getCookie(WIDGET_EXPERIMENT_COOKIE_NAME),
      referral: getCookie(REFERRAL_COOKIE_NAME),
      order_products: encodeURIComponent(JSON.stringify(orderItems)),
      pixel_version: PIXEL_VERSION,
    };
    var trackingUrl = `https://api.videowise.com/tracking/pixel?${objectToQueryString(
      params,
    )}`;
    fetch(trackingUrl).then((res) => {
      console.log(
        `Videowise pixel -- order -- (version: ${PIXEL_VERSION}) executed correctly`,
      );
      deleteCookie(CAMPAIGN_COOKIE_NAME);
    });
  }
}
```

```ts The order item object type is: theme={null}
type OrderItem = {
  id: string;
  quantity: number;
  title: string | null;
  variant: {
    id: string;
    image: {
      src: string | null;
    };
    price: {
      amount: number;
      currencyCode: string;
    };
    product: {
      id: string;
      title: string | null;
      vendor: string | null;
      type: string | null;
      untranslatedTitle: string | null;
      url: string;
    };
    sku: string | null;
    title: string;
    untranslatedTitle: string;
  };
  finalLinePrice: {
    amount: number;
    currencyCode: string;
  };
};
```

## Running the pixel

Copy the pixel code and use it as a custom js script on your website. Whenever you have a successful order, call the `VWPixel` function with the following arguments:

* `orderId`: The order ID
* `orderTotal`: The order total
* `orderCurrency`: The order currency
* `orderItems`: The order items

**Note**: some keys are optional, but it's recommended to pass all the arguments.

Example:

```js theme={null}
VWPixel({
  orderId: "1234567890",
  orderTotal: 100,
  orderCurrency: "USD",
  orderItems: [
    {
      id: "1234567890",
      quantity: 1,
      title: "Product 1",
      variant: {
        id: "1234567890",
        image: {
          src: "https://example.com/image.jpg",
        },
        price: {
          amount: 100,
          currencyCode: "USD",
        },
        product: {
          id: "1234567890",
          title: "Product 1",
          vendor: "Vendor 1",
          type: "Type 1",
          untranslatedTitle: "Product 1",
          url: "https://example.com/product/1234567890",
        },
        sku: "1234567890",
        title: "Product 1",
        untranslatedTitle: "Product 1",
      },
      finalLinePrice: {
        amount: 100,
        currencyCode: "USD",
      },
    },
  ],
});
```

## Google Tag Manager (GTM)

If you manage your scripts through [Google Tag Manager](https://tagmanager.google.com/), you can fire the Videowise pixel from a **Custom HTML tag** that reads the order data from the `dataLayer`. This is the recommended approach when you don't have direct access to your theme/template code, or when your order data is already available as a `dataLayer` event (for example a GA4 `purchase` event).

The flow has three parts:

1. Your store/site **pushes** a purchase event with the order data to the `dataLayer`.
2. A GTM **trigger** listens for that event.
3. A GTM **Custom HTML tag** runs the `VWPixel` function using values read from the `dataLayer`.

### 1. Push the order data to the dataLayer

On your order confirmation / thank-you page, push an event to the `dataLayer` as soon as the order is successful. Make sure `window.dataLayer` is initialized **before** the GTM snippet runs.

```html theme={null}
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "vw_purchase",
    order: {
      orderId: "1234567890",
      orderTotal: 100,
      orderCurrency: "USD",
      // The order items must match the OrderItem type documented above
      orderItems: [
        {
          id: "1234567890",
          quantity: 1,
          title: "Product 1",
          variant: {
            /* ... */
          },
          finalLinePrice: { amount: 100, currencyCode: "USD" },
        },
      ],
    },
  });
</script>
```

### 2. Create the data layer variables

In GTM, create **Data Layer Variables** so the tag can read each field:

| Variable name         | Data Layer Variable Name |
| --------------------- | ------------------------ |
| `DLV - orderId`       | `order.orderId`          |
| `DLV - orderTotal`    | `order.orderTotal`       |
| `DLV - orderCurrency` | `order.orderCurrency`    |
| `DLV - orderItems`    | `order.orderItems`       |

### 3. Create the trigger

Create a **Custom Event** trigger that fires on the event name you pushed:

* **Trigger type**: Custom Event
* **Event name**: `vw_purchase` (or your existing `purchase` event)

### 4. Create the Custom HTML tag

Create a **Custom HTML** tag, set it to fire on the trigger above, and paste the `VWPixel` function (from the top of this page) followed by an invocation that uses the GTM variables:

```html theme={null}
<script>
  // Paste the full VWPixel function from the top of this page here.
  function VWPixel({ orderId, orderTotal, orderCurrency, orderItems }) {
    /* ... pixel code ... */
  }

  VWPixel({
    orderId: {{DLV - orderId}},
    orderTotal: {{DLV - orderTotal}},
    orderCurrency: {{DLV - orderCurrency}},
    orderItems: {{DLV - orderItems}},
  });
</script>
```

<Note>
  GTM variable references like `{{DLV - orderId}}` are replaced with their actual
  values when the tag runs. String values are inserted with surrounding quotes
  automatically, while objects/arrays (such as `orderItems`) are injected as JSON,
  so they don't need extra quotes.
</Note>

### 5. Verify

Use **GTM Preview mode** to place a test order and confirm the tag fires on the purchase event. When it runs successfully you'll see the following message in the browser console:

```
Videowise pixel -- order -- (version: 2.0.0) executed correctly
```

## Related

* [Pixel overview](/pixel/overview)
* [Custom platforms](/shoppable-videos/custom-platforms)
* [Live shopping order tracking](/live-shopping/order-tracking)
* [Cookies](/cookies)
* [React Native SDK](/sdk/tracking-pixel) — use `trackingPixel` in apps instead of this snippet