Skip to main content

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.8";
const UID_COOKIE_NAME = "reeview_uid";
const CAMPAIGN_COOKIE_NAME = "reeview_campaign";
const LS_COOKIE_NAME = "reeview_lsid";
const REFERRAL_COOKIE_NAME = "reeview_referral";
const WIDGET_EXPERIMENT_COOKIE_NAME = "REEVIEW_SESSION";

function setSessionCookie(name, value) {
  document.cookie = `${name}=${value}; path=/`;
}

function setReferralCookieFromParams(ev) {
  const url = ev.context.window.location.href;
  const params = new URL(url).searchParams;
  const sourceId = params.get("vw_source_id");
  const referralChannel = params.get("vw_referral_channel");
  const userIdentifier = params.get("vw_user_identifier");
  if (sourceId && referralChannel && userIdentifier) {
    setSessionCookie(
      REFERRAL_COOKIE_NAME,
      JSON.stringify({
        vw_user_identifier: userIdentifier,
        vw_referral_channel: referralChannel,
        vw_source_id: sourceId,
      })
    );
  }
}

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 = "";
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    result += `${key}=${obj[key]}`;
    if (i < keys.length - 1) {
      result += "&";
    }
  }
  return result;
}

const getDeviceType = () => {
  const size = 1024;
  const isDesktop = window.screen.width > size;
  return isDesktop ? "DESKTOP" : "MOBILE";
};

function VW(orderId, orderTotal, orderCurrency, orderItems, event) {
  const shop = event.context.window.location.host;
  if (getCookie(UID_COOKIE_NAME) && shop && orderId && orderTotal) {
    const params = {
      uid: getCookie(UID_COOKIE_NAME),
      deviceType: getDeviceType(),
      orderId,
      shop,
      checkout_type: "SHOPIFY",
      order_total: orderTotal,
      currency: orderCurrency,
      order_items: orderItems,
      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),
    };
    const 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);
    });
  }
}

analytics.subscribe("checkout_started", (event) => {
  setReferralCookieFromParams(event);
});

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

analytics.subscribe("product_added_to_cart", (event) => {
  const productRefId = event.data.cartLine.merchandise.product.id;
  const shop = event.context.window.location.host;
  const referral = getCookie(REFERRAL_COOKIE_NAME);

  if (!referral) return; //

  const params = {
    uid: getCookie(UID_COOKIE_NAME),
    deviceType: getDeviceType(),
    shop,
    campaignId: getCookie(CAMPAIGN_COOKIE_NAME),
    lsId: getCookie(LS_COOKIE_NAME),
    clientTs: new Date().toISOString(),
    experiment: getCookie(WIDGET_EXPERIMENT_COOKIE_NAME),
    referral: referral,
    productRefId: productRefId,
  };
  const trackingUrl = `https://api.videowise.com/tracking/cart/pixel?${objectToQueryString(
    params
  )}`;
  fetch(trackingUrl).then((res) => {
    console.log(
      `Videowise pixel -- cart -- (version: ${PIXEL_VERSION}) executed correctly`
    );
  });
});

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);
  }
});