​
Customer Events Pixel Code

If your Shopify version supports web pixels go to “Settings -> Customer events” and click the “Add custom pixel”. Give the new pixel a name like “Videowise Pixel” and add the following pixel code:

Customer Events Pixel Code
// VIDEOWISE TRACKING PIXEL
const PIXEL_VERSION = "1.6";
const UID_COOKIE_NAME = "reeview_uid";
const CAMPAIGN_COOKIE_NAME = "reeview_campaign";
const LS_COOKIE_NAME = "reeview_lsid";
const WIDGET_EXPERIMENT_COOKIE_NAME = "REEVIEW_SESSION";
function setSessionCookie(name, value) {
  document.cookie = `${name}=${value}; path=/`;
}
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 VW(orderId, orderTotal, orderCurrency, orderItems, shop) {
  const getDeviceType = () => {
    const size = 1024;
    const isDesktop = window.screen.width > size;
    return isDesktop ? "DESKTOP" : "MOBILE";
  };

  if (getCookie(UID_COOKIE_NAME) && shop && orderId && orderTotal) {
    const clientTs = new Date();
    const trackingUrl = `https://api.videowise.com/tracking/pixel?uid=${getCookie(
      UID_COOKIE_NAME
    )}&deviceType=${getDeviceType()}&orderId=${orderId}&shop=${shop}&checkout_type=SHOPIFY&order_total=${orderTotal}&currency=${orderCurrency}&order_items=${orderItems}&campaignId=${getCookie(
      CAMPAIGN_COOKIE_NAME
    )}&lsId=${getCookie(
      LS_COOKIE_NAME
    )}&clientTs=${clientTs.toISOString()}&experiment=${getCookie(
      WIDGET_EXPERIMENT_COOKIE_NAME
    )}`;
    fetch(trackingUrl).then((res) => {
      console.log(
        `Videowise pixel (version: ${PIXEL_VERSION}) executed correctly`
      );
      deleteCookie(CAMPAIGN_COOKIE_NAME);
    });
  }
}

analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data.checkout;
  VW(
    checkout.order.id,
    checkout.totalPrice.amount,
    checkout.currencyCode,
    checkout.lineItems.length,
    event.context.window.location.host
  );
});

analytics.subscribe("page_viewed", (event) => {
  if (!event.context.window.location.search.includes("videowise_campaign_id")) {
    console.log("Videowise no campaign cookie detected");
    return;
  }
  const vars = new URLSearchParams(event.context.window.location.search);
  const campaignId = vars.get("videowise_campaign_id");
  if (campaignId) {
    setSessionCookie(CAMPAIGN_COOKIE_NAME, campaignId);
  }
});

You don’t need to create a custom pixel if the Videowise Pixel was automatically created and shows as “Connected”

​
Checkout Page Pixel Code

If your Shopify version does not support web pixels, you have to add the following code in the “Settings -> Checkout -> Order status page”

If your Shopify store uses a headless theme, you should execute the pixel code after the orderCreate mutation.

Order status / Headless implementation pixel code
<!--VIDEOWISE TRACKING PIXEL-->
<script>
  (function (orderId, orderTotal, orderCurrency, orderItems, shop) {
    const PIXEL_VERSION = "1.6";
    const UID_COOKIE_NAME = "reeview_uid";
    const CAMPAIGN_COOKIE_NAME = "reeview_campaign";
    const LS_COOKIE_NAME = "reeview_lsid";
    const WIDGET_EXPERIMENT_COOKIE_NAME = "REEVIEW_SESSION";
    setSessionCookie = (name, value) => {
      document.cookie = `${name}=${value}; path=/`;
    };
    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;
    };
    deleteCookie = (name) => {
      document.cookie =
        name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    };

    VW = (orderId, orderTotal, orderCurrency, orderItems, shop) => {
      const getDeviceType = () => {
        const size = 1024;
        const isDesktop = window.screen.width > size;
        return isDesktop ? "DESKTOP" : "MOBILE";
      };

      if (getCookie(UID_COOKIE_NAME) && shop && orderId && orderTotal) {
        const clientTs = new Date();
        const trackingUrl = `https://api.videowise.com/tracking/pixel?uid=${getCookie(
          UID_COOKIE_NAME
        )}&deviceType=${getDeviceType()}&orderId=${orderId}&shop=${shop}&checkout_type=SHOPIFY&order_total=${orderTotal}&currency=${orderCurrency}&order_items=${orderItems}&campaignId=${getCookie(
          CAMPAIGN_COOKIE_NAME
        )}&lsId=${getCookie(
          LS_COOKIE_NAME
        )}&clientTs=${clientTs.toISOString()}&experiment=${getCookie(
          WIDGET_EXPERIMENT_COOKIE_NAME
        )}`;
        fetch(trackingUrl).then((res) => {
          console.log(
            `Videowise pixel (version: ${PIXEL_VERSION}) executed correctly`
          );
          deleteCookie(CAMPAIGN_COOKIE_NAME);
        });
      }
    };

    VW(orderId, orderTotal, orderCurrency, orderItems, shop);
  })(orderId, orderTotal, orderCurrency, orderItems, shop);
</script>

Make sure that the variables needed for the pixel are set correctly, before the function is invoked.

orderId (String): your order id

orderTotal (Number): the total order amount, including taxes and shipping (for Shopify stores, the order total should be divided by 100)

orderCurrency (String): the order currency, 3 letters ISO code (USD,GBP,JPY,etc)

orderItems (Number): number of items in the order

shop (String): your shops domain (mystore.myshopify.com)