Other - Videowise

Custom Pixel Code

// VIDEOWISE TRACKING PIXEL

function VWPixel({ orderId, orderTotal, orderCurrency, orderItems }) {
  var PIXEL_VERSION = "1.9.1";
  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);
    });
  }
}

The order item object type is:

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:

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

Your store/site pushes a purchase event with the order data to the dataLayer.
A GTM trigger listens for that event.
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.

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

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

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.

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: 1.9.1) executed correctly

​Custom Pixel Code

​Running the pixel

​Google Tag Manager (GTM)

​1. Push the order data to the dataLayer

​2. Create the data layer variables

​3. Create the trigger

​4. Create the Custom HTML tag

​5. Verify

Custom Pixel Code

Running the pixel

Google Tag Manager (GTM)

1. Push the order data to the dataLayer

2. Create the data layer variables

3. Create the trigger

4. Create the Custom HTML tag

5. Verify