Google Analytics 4 Shopify Custom Pixel

ga4-shopify-custom-pixel.js

// Step 1. Add and initialize your third-party JavaScript pixel (make sure to exclude HTML)
// Replace with you GA4 Tag
const TAG_ID = 'G-XXXXXXXXXX';

const script = document.createElement('script');
script.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${TAG_ID}`);
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());
gtag('config', TAG_ID);

// Step 2. Subscribe to customer events using the analytics.subscribe() API
const sendGAEvent = (eventName, eventData) => {
  gtag("event", eventName, eventData);
};

const createItemData = (product) => {
  return {
    item_id: product.sku,
    item_name: product.product.title,
    item_variant: product.title,
    currency: product.price.currencyCode,
    item_brand: product.product.vendor,
    price: product.price.amount,
  };
};

const createLineItemsData = (lineItems) => {
  return lineItems.map((item) => {
    return {
      item_id: item.variant.sku,
      item_name: item.title,
      item_variant: item?.variant.title,
      currency: item.variant.price.currencyCode,
      item_brand: item.variant.product.vendor,
      price: item.variant.price.amount,
      quantity: item.quantity,
    };
  });
};

analytics.subscribe("search_submitted", (event) => {
  const { query } = event.data.searchResult;
  sendGAEvent("search", { search_term: query });
  sendGAEvent("view_search_results", { search_term: query, items: [] });
});

analytics.subscribe("collection_viewed", (event) => {
  const { id, title } = event.data.collection;
  sendGAEvent("view_item_list", { item_list_id: id, item_list_name: title, items: [] });
});

analytics.subscribe("product_added_to_cart", (event) => {
  const { cartLine } = event.data;
  const totalPrice = cartLine.merchandise.price.amount * cartLine.quantity;
  const itemData = createItemData(cartLine.merchandise.product);

  sendGAEvent("add_to_cart", {
    currency: cartLine.merchandise.price.currencyCode,
    value: totalPrice.toFixed(2),
    items: [Object.assign(itemData, { quantity: cartLine.quantity })],
  });
});

analytics.subscribe("product_viewed", (event) => {
  const { productVariant } = event.data;
  const itemData = createItemData(productVariant);

  sendGAEvent("view_item", {
    currency: productVariant.price.currencyCode,
    value: productVariant.price.amount,
    items: [itemData],
  });
});

analytics.subscribe("checkout_started", (event) => {
  const checkoutData = ga4CheckoutEvents(event);
  sendGAEvent("begin_checkout", checkoutData);
});

analytics.subscribe("payment_info_submitted", (event) => {
  const checkoutData = ga4CheckoutEvents(event);
  sendGAEvent("add_payment_info", checkoutData);
});

analytics.subscribe("checkout_completed", (event) => {
  const checkoutData = ga4CheckoutEvents(event);
  const { checkout } = event.data;
  
  checkoutData.transaction_id = checkout.order?.id || checkout.token;
  checkoutData.shipping = checkout.shippingLine?.price.amount || checkout.shipping_line?.price.amount || 0;
  checkoutData.tax = checkout.totalTax?.amount || 0;
  
  sendGAEvent("purchase", checkoutData);
});

function ga4CheckoutEvents(event) {
  const { checkout } = event.data;
  const lineItems = createLineItemsData(checkout.lineItems);
  
  return {
    currency: checkout.totalPrice.currencyCode,
    value: checkout.totalPrice.amount,
    items: lineItems,
  };
}

This a refactored version of the original one create by Kevin Dees in his blog:

• https://kevdees.com/how-to-install-ga4-on-shopify-using-customer-events-pixels-and-gtm

Hey @blanklob, pretty good script. You should add that the customer event pixel doesn't send decent page view data to GA4 (https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial). Best to do the following:

• disable default page view tracking:
  gtag('config', TAG_ID, {'send_page_view': false});

• send page view data with custom event instead:

analytics.subscribe("page_viewed", event => {
  gtag("event", "page_view", {
    page_location: event.context.window.location.href,
    page_title: event.context.document.title,
    language: event.context.navigator.language,
    page_encoding: event.context.document.characterSet,
    user_agent:  event.context.navigator.userAgent,
    client_id: event.clientId
  });
});

reference: https://developers.google.com/tag-platform/gtagjs/reference/events#page_view

Also worth noting is that "enhanced conversions" don't work. You can add outbound link tracking via custom event, but it's easier to disable all of it in GA4 like so:

also disable here for a big pagespeed boost:

@blanklob

For line 59 I'm wondering if there is a difference between look at cartline.cost.totalAmount.amount instead of cartLine.merchandise.price.amount * cartLine.quantity. It seems that with the first option, no calculation is needed. I'm not sure if it gives back the same price. I'm happy to hear so if you have an idea.