Skip to main content

​
Custom Pixel Code

// VIDEOWISE TRACKING PIXEL

function VWPixel({ orderId, orderTotal, orderCurrency, orderItems }) {
  var PIXEL_VERSION = "1.9";
  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: JSON.stringify(orderItems),
    };
    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",
      },
    },
  ],
});