Shopify - Custom Web Pixel Example

Here is an example of a Shopify Custom Web Pixel that pushes data to GTM.

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

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '<GTM_ID>');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "add_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    url: event.context.document.location.href,
    client_id: init?.data?.customer?.id,
    product_id: event.data?.cartLine?.merchandise?.product?.id,
    variant_id: event.data?.cartLine?.merchandise?.id,
    product_sku: event.data?.cartLine?.merchandise?.sku,
    product_category: event.data?.cartLine?.merchandise?.product?.type,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.price?.currencyCode,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
  });
});

analytics.subscribe("product_removed_from_cart", (event) => {
  window.dataLayer.push({
    event: "remove_from_cart",
    timestamp: event.timestamp,
    id: event.id,
    url: event.context.document.location.href,
    client_id: init?.data?.customer?.id,
    product_id: event.data?.cartLine?.merchandise?.product?.id,
    variant_id: event.data?.cartLine?.merchandise?.id,
    product_sku: event.data?.cartLine?.merchandise?.sku,
    product_category: event.data?.cartLine?.merchandise?.product?.type,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.price?.currencyCode,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_view",
    timestamp: event.timestamp,
    id: event.id,
    client_id: init?.data?.customer?.id,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_view",
    timestamp: event.timestamp,
    id: event.id,
    client_id: init?.data?.customer?.id,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    variant_id: event.data?.productVariant?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

Shopify documentation: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial#create-gtm-custom-pixel