> ## Documentation Index
> Fetch the complete documentation index at: https://docs.videowise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Install the Videowise order tracking pixel on Shopify via Customer events.

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

<div className="flex gap-2 overflow-x-auto">
  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/store-settings.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=d6bf5a8ae7473ed3cc79259a58c21afc" width="400" height="400" data-path="pixel/store-settings.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/customer-events.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=e0fea0ee3aa6a63012f0880d4a8a4818" width="400" height="400" data-path="pixel/customer-events.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/add-custom-pixel.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=ee213d443cf90cf28a8095b0563d3d13" width="400" height="400" data-path="pixel/add-custom-pixel.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/add-new-pixel.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=96bc787316efaa010a92c0ce8b113df2" width="400" height="400" data-path="pixel/add-new-pixel.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/paste-code.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=3bd36a1cb9a7d0801ac01971d828a686" width="400" height="400" data-path="pixel/paste-code.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/save-pixel.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=b6aa1e8f4a9c41cb703dddaf95a70669" width="400" height="400" data-path="pixel/save-pixel.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/videowise/8_1ghAJvj_CP-3qs/pixel/connect-pixel.png?fit=max&auto=format&n=8_1ghAJvj_CP-3qs&q=85&s=c27f61788b07ac48f3426e1fb3b6e84d" width="400" height="400" data-path="pixel/connect-pixel.png" />
  </Frame>
</div>

```js Customer Events Pixel Code theme={null}
// VIDEOWISE TRACKING PIXEL
const PIXEL_VERSION = "2.0.0";
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, encodeURIComponent(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, orderItemsLength, event, orderProducts, shippingCosts, taxAmount) {
  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: orderItemsLength,
            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(orderProducts)),
            shipping_costs: shippingCosts || 0,
            tax_amount: taxAmount || 0,
            pixel_version: PIXEL_VERSION
        };
        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,
        checkout.lineItems,
        checkout.shippingLine?.price?.amount || 0,
        checkout.totalTax?.amount || 0
    );
});

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,
        pixel_version: PIXEL_VERSION
    };
    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);
    }
});
```

## Related

* [Pixel overview](/pixel/overview)
* [Cookies](/cookies)
* [Shoppable videos order tracking](/shoppable-videos/order-tracking)
* [Live shopping order tracking](/live-shopping/order-tracking)