In order to track the engagement and conversion performance of your video content, you will need to install a tracking pixel on your Shopify checkout page.
Follow the steps below:
Standard tracking pixel
Navigate to ⚙️Settings → Tracking Pixel → Copy Code
2. In your Shopify admin → go to Settings → Checkout
3. Scroll down to “Order status page” and paste the script in the text area (without overwriting existing scripts)
Note: DO NOT modify the code in any way when pasting it in the text area!
4. Click on “Save” to save your changes, and you're all done.
Custom tracking pixel
In certain instances where the installation of the standard tracking pixel faced challenges, particularly when order status page scripts were disabled, we recognized the need for a more flexible approach.
For such cases, we've developed the Custom Tracking Pixel, seamlessly integrated into Shopify under Settings → Customer events.
2. Click on Add Custom Pixel → Add Pixel name
3. Paste the following Tracking Pixel code into your custom pixel container:👇
// VIDEOWISE TRACKING PIXEL
const PIXEL_VERSION = "1.7";
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 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, shop) {
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_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("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);
}
});
This tailored solution leverages customer events from Shopify, ensuring comprehensive tracking even in situations where the conventional order status page support is unavailable.
You're all set!🎉
Do you need more help with other Account Details & Settings?
Talk to your CSM and support team by chat or email.