basic gtm pattern + enhanced commerce

analytics.js

const BRAND_NAME = 'Lorem Ipsum'

export function gtmProduct(product, variant) {
  return {
    name: product.title,
    id: variant.sku,
    price: parseFloat(variant.price),
    variant: variant.title,
    brand: BRAND_NAME,
    category: 'All',
  }
}

export function productLabel(product, variant) {
  return `${product.title}${
    variant.title !== 'Default Title' ? ` - ${variant.title}` : ``
  }`
}

export function track(eventName, payload = {}) {
  window.dataLayer = window.dataLayer || []
  window.dataLayer.push({
    event: eventName,
    ...payload,
  })
}

export function trackNewsletterSignup() {
  track('newsletter_signup')
}

export function trackProductImpression({
  product,
  variant = product.variants[0],
  list,
}) {
  track('product_impression', {
    ecommerce: {
      impressions: [
        {
          ...gtmProduct(product, variant),
          list,
        },
      ],
    },
    eventDetail: {
      category: 'Ecommerce',
      action: 'Product Impression',
      label: productLabel(product, variant),
    },
  })
}

export function trackProductClick({
  product,
  variant = product.variants[0],
  list,
  position,
}) {
  track('product_click', {
    ecommerce: {
      click: {
        actionField: { list: '' },
      },
      products: [
        {
          ...gtmProduct(product, variant),
          list,
          position,
        },
      ],
    },
    eventDetail: {
      category: 'Ecommerce',
      action: 'Product Click',
      label: productLabel(product, variant),
    },
  })
}

export function trackAddToCart({
  product,
  variant = product.variant,
  quantity = 1,
}) {
  track('add_to_cart', {
    ecommerce: {
      add: {
        products: [
          {
            ...gtmProduct(product, variant),
            quantity,
          },
        ],
      },
    },
    eventDetail: {
      category: 'Ecommerce',
      action: 'Add to Cart',
      label: productLabel(product, variant),
    },
  })
}

export function trackRemoveFromCart({
  product,
  variant = product.variant,
  quantity = 1,
}) {
  track('remove_from_cart', {
    ecommerce: {
      remove: {
        products: [
          {
            ...gtmProduct(product, variant),
            quantity,
          },
        ],
      },
    },
    eventDetail: {
      category: 'Ecommerce',
      action: 'Remove from Cart',
      label: productLabel(product, variant),
    },
  })
}

export function trackCartView(checkout) {
  track('cart_view', {
    ecommerce: {
      view: {
        products: checkout.lineItems.map((product) => ({
          ...gtmProduct(product, product.variant),
          quantity: product.quantity,
        })),
      },
    },
    eventDetail: {
      category: 'Ecommerce',
      action: 'Cart View',
      label: '',
    },
  })
}