How Does AfterSell use UTM Links?

AfterSell can be configured to trigger funnels based on if a customer visited your site with a specific UTM query.

For the basic functionality, check out this video to see how you can quickly get started with UTM triggers.

How to use Direct-to-Checkout UTM links

The setup in the above video does not cover links that lead a customer directly to the checkout. With AfterSell's base functionality, it can only detect UTM parameters while on the main portion of your site since it uses a theme app block, which is only active on the main portion of your store, not the checkout or thank-you page.

In order to get UTM functionality on the checkout, you can add a Shopify Pixel to your store. The only limitation to this is that the user must have a cart token when visiting the checkout via a UTM link.

Setting up Direct-to-Checkout UTM Links

Watch this video to get setup, or follow the instructions below.

In your Shopify admin, go to Settings > Customer Events, click "Add Custom Pixel" and give it any name
Under the "Permission" dropdown, you only need to select analytics as required
In the "Data Sale" dropdown, you're free to choose "Data collected does not qualify as data sale" since AfterSell keeps all data collected private and never shares it with anyone but you
In the code editor, paste in the code below
Click Save, then Connect

/**
 * IMPORTANT: This pixel can only fire on sessions where the
 * customer has a cart object, otherwise it will be skipped.
 * For example, clicking "Buy Now" on a product page skips the cart,
 * going directly to checkout.
**/
function processData({event, cartToken}) {
  // TODO: Edit MYSHOPIFY_DOMAIN to your domain. E.g.
  // const MYSHOPIFY_DOMAIN = 'example-store.myshopify.com';
  const MYSHOPIFY_DOMAIN = '';

  const enableDebug = false;

  // DO NOT EDIT PAST HERE
  const SESSION_STORAGE_KEY = 'as-customer-trigger-data';
  const HOST = 'https://start.aftersell.app';

  if (!MYSHOPIFY_DOMAIN) {
    if (enableDebug) {
      console.log("UTM pixel didn't fire because of missing Shopify domain");
    }
    return;
  }
  if (!cartToken) {
    if (enableDebug) {
      console.log("UTM pixel didn't fire because of missing cart token");
    }
  }
  
  let existingCustomerData = null;
  try {
      existingCustomerData = JSON.parse(
          sessionStorage.getItem(SESSION_STORAGE_KEY) || 'null'
      );
  } catch (ignore) {
    if (enableDebug) {
      console.log("UTM pixel didn't fire because malformed user data json");
    }
  }
  
  const allowedUrlParams = [
        'utm_source',
        'utm_medium',
        'utm_campaign',
        'utm_term',
        'utm_id',
        'utm_content',
    ];
  
  const searchParams = new URLSearchParams(event.context.window.location.search);
  let hasCustomerData = false;
  const customerData = {};
  for (const param of allowedUrlParams) {
    const paramValue = searchParams.get(param) || existingCustomerData?.[param];
    if (paramValue) {
        hasCustomerData = true;
        customerData[param] = paramValue;
    }
  }

  if (hasCustomerData) {
    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(customerData));

    const postBody = {
      shop: MYSHOPIFY_DOMAIN,
      cartToken,
      checkoutToken: event.data.checkout.token ?? undefined,
      customerTriggerData: customerData,
    };

    if (enableDebug) {
      console.log("UTM pixel fired with the following data:", postBody);
    }
    
    fetch(`${HOST}/api/v1/storefrontSessions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postBody),
    });
  } else {
    if (enableDebug) {
      console.log("UTM pixel didn't fire because there was no data to send");
    }
  }
}

analytics.subscribe('checkout_started', (event) => {
   // minimum realistic time between adding item to cart and clicking checkout
    const COOKIE_POLLING_INTERVAL_MS = 500;

    let currentCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });
    processData({event, cartToken: currentCookieValue});

    setInterval(() => {
        const newCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });
        if (newCookieValue !== currentCookieValue) {
            currentCookieValue = newCookieValue;
            processData({event, cartToken: newCookieValue});
        }
    }, COOKIE_POLLING_INTERVAL_MS);
});

function getCookieValue({ cookie, cookieName }) {
    const cartCookieRegex = new RegExp(`^${cookieName}=`);
    const cartCookie = cookie
        .split(';')
        .map((val) => val.trim())
        .find((val) => cartCookieRegex.test(val));
    if (!cartCookie) return null;
    const cartCookieValue = cartCookie.replace(`${cookieName}=`, '');
    return cartCookieValue;
}

Configuring Shopify Web Pixels