@graphcommerce/google-datalayer 8.0.4-canary.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @graphcommerce/google-datalayer
+
+## 8.0.4-canary.1
+
+### Patch Changes
+
+- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events.
+  ([@mikekeehnen](https://github.com/mikekeehnen))

package/Config.graphqls

@@ -0,0 +1,21 @@
+extend input GraphCommerceConfig {
+  analytics: AnalyticsConfig
+}
+
+"""
+EventFormat is an enumatation of different event formats. This decides what the format of the event data will be.
+"""
+enum EventFormat {
+  GA3
+  GA4
+}
+
+"""
+AnalyticsConfig will contain all configuration values for the analytics in GraphCommerce.
+"""
+input AnalyticsConfig {
+  """
+  eventFormat contains the list of fired and formatted events
+  """
+  eventFormat: [EventFormat!]
+}

package/README.md

@@ -0,0 +1,6 @@
+# @graphcommerce/google-datalayer
+
+This package contains utilities that can be used in different app analytics
+trackers.
+
+add_payment_info add_shipping_info

package/components/AnalyticsItemList.tsx

@@ -0,0 +1,63 @@
+import { nonNullable, useMemoObject } from '@graphcommerce/next-ui'
+import { useEventCallback } from '@mui/material'
+import React, { useContext, useEffect, useMemo } from 'react'
+import { Item, ProductToItemFragment, productToItem } from '../lib'
+import { event } from '../lib/event'
+
+export type UseViewItemListProps<P extends ProductToItemFragment = ProductToItemFragment> = {
+  title: string
+  items?: (P | null | undefined)[] | null
+  listId?: string
+}
+
+export type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: Item[]
+}
+
+const GoogleTagManagerItemListContext = React.createContext<{
+  item_list_id: string
+  item_list_name: string
+}>({ item_list_id: '', item_list_name: '' })
+
+export function useListItemHandler(item: ProductToItemFragment) {
+  const { item_list_id, item_list_name } = useContext(GoogleTagManagerItemListContext)
+  return useEventCallback(() =>
+    event('select_item', {
+      item_list_id,
+      item_list_name,
+      items: productToItem(item),
+    }),
+  )
+}
+
+export function ItemList<P extends ProductToItemFragment = ProductToItemFragment>(
+  props: UseViewItemListProps<P> & { children: React.ReactNode },
+) {
+  const { title, items, listId, children } = props
+
+  const eventData: ViewItemList = useMemoObject({
+    item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+    item_list_name: title,
+    items: items?.map((item) => (item ? productToItem(item) : null)).filter(nonNullable) ?? [],
+  })
+
+  useEffect(() => {
+    event('view_item_list', eventData)
+  }, [eventData])
+
+  const value = useMemo(
+    () => ({
+      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+      item_list_name: title ?? listId,
+    }),
+    [listId, title],
+  )
+
+  return (
+    <GoogleTagManagerItemListContext.Provider value={value}>
+      {children}
+    </GoogleTagManagerItemListContext.Provider>
+  )
+}

package/events/add_payment_info/AddPaymentInfoFragment.graphql

@@ -0,0 +1,36 @@
+fragment AddPaymentInfoFragment on Cart
+@inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
+  items {
+    uid
+    prices {
+      price {
+        currency
+        value
+      }
+      discounts {
+        amount {
+          currency
+          value
+        }
+      }
+    }
+    quantity
+    product {
+      uid
+      name
+      sku
+    }
+  }
+  applied_coupons {
+    code
+  }
+  prices {
+    grand_total {
+      currency
+      value
+    }
+  }
+  selected_payment_method {
+    code
+  }
+}

package/events/add_payment_info/addPaymentInfo.ts

@@ -0,0 +1,23 @@
+import { event } from '../../lib/event'
+import { AddPaymentInfoFragment } from './AddPaymentInfoFragment.gql'
+
+export const addPaymentInfo = <C extends AddPaymentInfoFragment>(cart?: C | null) =>
+  event('add_payment_info', {
+    ...cart,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    payment_type: cart?.selected_payment_method?.code,
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/add_payment_info/index.ts

@@ -0,0 +1,2 @@
+export * from './addPaymentInfo'
+export * from './AddPaymentInfoFragment.gql'

package/events/add_shipping_info/AddSchippingInfoFragment.graphql

@@ -0,0 +1,38 @@
+fragment AddShippingInfoFragment on Cart @inject(into: ["ShippingMethodSelected"]) {
+  prices {
+    grand_total {
+      currency
+      value
+    }
+  }
+  applied_coupons {
+    code
+  }
+  items {
+    __typename
+    uid
+    product {
+      uid
+      sku
+      name
+    }
+    prices {
+      price {
+        value
+        currency
+      }
+      discounts {
+        amount {
+          value
+        }
+      }
+    }
+    quantity
+    ... on ConfigurableCartItem {
+      configured_variant {
+        uid
+        sku
+      }
+    }
+  }
+}

package/events/add_shipping_info/addShippingInfo.ts

@@ -0,0 +1,22 @@
+import { event } from '../../lib/event'
+import { AddShippingInfoFragment } from './AddSchippingInfoFragment.gql'
+
+export const addShippingInfo = <C extends AddShippingInfoFragment>(cart?: C) =>
+  event('add_shipping_info', {
+    ...cart,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item && 'configured_variant' in item ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/add_shipping_info/index.ts

@@ -0,0 +1,2 @@
+export * from './addShippingInfo'
+export * from './AddSchippingInfoFragment.gql'

package/events/add_to_cart/AddToCartFragment.graphql

@@ -0,0 +1,30 @@
+fragment AddToCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
+  items {
+    quantity
+    product {
+      sku
+      name
+    }
+    prices {
+      discounts {
+        amount {
+          currency
+          value
+        }
+      }
+      row_total_including_tax {
+        currency
+        value
+      }
+      price {
+        currency
+        value
+      }
+    }
+  }
+  prices {
+    grand_total {
+      currency
+    }
+  }
+}

package/events/add_to_cart/addToCart.ts

@@ -0,0 +1,58 @@
+import type { FetchResult } from '@graphcommerce/graphql'
+import {
+  AddProductsToCartFields,
+  AddProductsToCartMutation,
+  findAddedItems,
+  toUserErrors,
+} from '@graphcommerce/magento-product'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { event } from '../../lib/event'
+
+export const addToCart = (
+  result: FetchResult<AddProductsToCartMutation>,
+  variables: AddProductsToCartFields,
+) => {
+  const { data, errors } = result
+  const cart = data?.addProductsToCart?.cart
+
+  const addedItems = findAddedItems(data, variables)
+
+  const items = addedItems
+    .map(({ itemVariable, itemInCart }) => {
+      if (!itemInCart) return null
+      const { product, prices } = itemInCart
+      return {
+        item_id: product.sku,
+        item_name: product.name,
+        currency: prices?.price.currency,
+        price: (prices?.row_total_including_tax.value ?? 1) / itemInCart.quantity,
+        quantity: itemVariable.quantity,
+        discount: prices?.discounts?.reduce(
+          (sum, discount) => sum + (discount?.amount?.value ?? 0) / itemVariable.quantity,
+          0,
+        ),
+      }
+    })
+    .filter(nonNullable)
+
+  const userErrors = toUserErrors(result.data)
+  if ((errors && errors.length > 0) || userErrors.length > 0) {
+    event('add_to_cart_error', {
+      userErrors: userErrors?.map((e) => e.message),
+      errors: errors?.map((e) => e.message),
+      variables,
+    })
+  }
+
+  if (!items.length) return
+
+  event('add_to_cart', {
+    currency: cart?.prices?.grand_total?.currency,
+    value: addedItems.reduce(
+      (sum, { itemVariable, itemInCart }) =>
+        sum + (itemInCart?.prices?.row_total_including_tax.value ?? 1) / itemVariable.quantity,
+      0,
+    ),
+    items,
+  })
+}

package/events/add_to_cart/index.ts

@@ -0,0 +1,2 @@
+export * from './addToCart'
+export * from './AddToCartFragment.gql'

package/events/begin_checkout/BeginCheckoutFragment.graphql

@@ -0,0 +1,38 @@
+fragment BeginCheckoutFragment on Cart @inject(into: ["CartStartCheckout"]) {
+  prices {
+    grand_total {
+      currency
+      value
+    }
+  }
+  applied_coupons {
+    code
+  }
+  items {
+    __typename
+    uid
+    product {
+      uid
+      sku
+      name
+    }
+    prices {
+      price {
+        value
+        currency
+      }
+      discounts {
+        amount {
+          value
+        }
+      }
+    }
+    quantity
+    ... on ConfigurableCartItem {
+      configured_variant {
+        uid
+        sku
+      }
+    }
+  }
+}

package/events/begin_checkout/beginCheckout.ts

@@ -0,0 +1,22 @@
+import { event } from '../../lib/event'
+import { BeginCheckoutFragment } from './BeginCheckoutFragment.gql'
+
+export const beginCheckout = <C extends BeginCheckoutFragment>(cart?: C | null) =>
+  event('begin_checkout', {
+    ...cart,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/begin_checkout/index.ts

@@ -0,0 +1,2 @@
+export * from './beginCheckout'
+export * from './BeginCheckoutFragment.gql'

package/events/purchase/index.ts

@@ -0,0 +1 @@
+export * from './purchase'

package/events/purchase/purchase.ts

@@ -0,0 +1,27 @@
+import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
+import { event } from '../../lib/event'
+
+export const purchase = <C extends PaymentMethodContextFragment>(
+  orderNumber: string,
+  cart: C | null | undefined,
+) =>
+  event('purchase', {
+    ...cart,
+    transaction_id: orderNumber,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
+    payment_type: cart?.selected_payment_method?.code,
+    tax: cart?.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/remove_from_cart/RemoveFromCartFragment.graphql

@@ -0,0 +1,36 @@
+fragment RemoveFromCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
+  __typename
+  prices {
+    grand_total {
+      currency
+      value
+    }
+  }
+  items {
+    __typename
+    uid
+    product {
+      uid
+      sku
+      name
+    }
+    prices {
+      price {
+        value
+        currency
+      }
+      discounts {
+        amount {
+          value
+        }
+      }
+    }
+    quantity
+    ... on ConfigurableCartItem {
+      configured_variant {
+        uid
+        sku
+      }
+    }
+  }
+}

package/events/remove_from_cart/index.ts

@@ -0,0 +1,2 @@
+export * from './removeFromCart'
+export * from './RemoveFromCartFragment.gql'

package/events/remove_from_cart/removeFromCart.ts

@@ -0,0 +1,21 @@
+import { event } from '../../lib/event'
+import { RemoveFromCartFragment } from './RemoveFromCartFragment.gql'
+
+export const removeFromCart = <C extends RemoveFromCartFragment>(cart: C | null | undefined) =>
+  event('remove_from_cart', {
+    ...cart,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/select_item/index.ts

@@ -0,0 +1 @@
+export * from './select_item'

package/events/select_item/select_item.ts

@@ -0,0 +1,8 @@
+import { event } from '../../lib/event'
+
+export const selectItem = (itemListId: string, itemListName: string, items: unknown[]) =>
+  event('select_item', {
+    item_list_id: itemListId,
+    item_list_name: itemListName,
+    items,
+  })

package/events/view_cart/ViewCartFragment.graphql

@@ -0,0 +1,35 @@
+fragment ViewCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
+  prices {
+    grand_total {
+      currency
+      value
+    }
+  }
+  items {
+    __typename
+    uid
+    product {
+      uid
+      sku
+      name
+    }
+    prices {
+      price {
+        value
+        currency
+      }
+      discounts {
+        amount {
+          value
+        }
+      }
+    }
+    quantity
+    ... on ConfigurableCartItem {
+      configured_variant {
+        uid
+        sku
+      }
+    }
+  }
+}

package/events/view_cart/index.ts

@@ -0,0 +1,2 @@
+export * from './viewCart'
+export * from './ViewCartFragment.gql'

package/events/view_cart/viewCart.ts

@@ -0,0 +1,21 @@
+import { event } from '../../lib/event'
+import { ViewCartFragment } from './ViewCartFragment.gql'
+
+export const viewCart = <C extends ViewCartFragment>(cart: C | null | undefined) =>
+  event('view_cart', {
+    ...cart,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })

package/events/view_item/index.ts

@@ -0,0 +1 @@
+export * from './view_item'

package/events/view_item/view_item.ts

@@ -0,0 +1,8 @@
+import { event } from '../../lib/event'
+
+export const viewItem = (itemListId: string, itemListName: string, items: unknown[]) =>
+  event('view_item', {
+    item_list_id: itemListId,
+    item_list_name: itemListName,
+    items,
+  })

package/events/view_item_list/index.ts

@@ -0,0 +1 @@
+export * from './view_item_list'

package/events/view_item_list/view_item_list.ts

@@ -0,0 +1,8 @@
+import { event } from '../../lib/event'
+
+export const viewItemList = (itemListId: string, itemListName: string, items: unknown[]) =>
+  event('view_item_list', {
+    item_list_id: itemListId,
+    item_list_name: itemListName,
+    items,
+  })

package/lib/event.ts

@@ -0,0 +1,39 @@
+import { EventFormatSchema } from '@graphcommerce/next-config'
+
+type EventMapFunctionType = (
+  eventName: Gtag.EventNames | (string & Record<never, never>),
+  eventData: {
+    [key: string]: unknown
+  },
+) => void
+
+type EventType = keyof (typeof EventFormatSchema)['Enum']
+
+const eventMap: { [key in EventType]: EventMapFunctionType } = {
+  GA4: (eventName, eventData) => {
+    if (import.meta.graphCommerce.googleAnalyticsId) {
+      globalThis.gtag('event', eventName, eventData)
+    }
+
+    if (import.meta.graphCommerce.googleTagmanagerId) {
+      globalThis.dataLayer.push({ event: eventName, ...eventData })
+    }
+  },
+  GA3: (eventName, eventData) => {
+    if (import.meta.graphCommerce.googleAnalyticsId) {
+      console.warn(
+        "Google Analytics 3 format is not supported for Google Analytics 4. Please update your event format to 'GA4'.",
+      )
+    }
+
+    if (import.meta.graphCommerce.googleTagmanagerId) {
+      globalThis.dataLayer.push({ event: eventName, ecommerce: eventData })
+    }
+  },
+}
+
+const eventsToBeFired = import.meta.graphCommerce.analytics?.eventFormat ?? ['GA4']
+
+export const event: EventMapFunctionType = (eventName, eventData) => {
+  eventsToBeFired.map((e) => eventMap[e](eventName, eventData))
+}

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './productToItem/productToItem'
+export * from './productToItem/ProductToItem.gql'

package/lib/productToItem/ProductToItem.graphql

@@ -0,0 +1,20 @@
+fragment ProductToItem on ProductInterface {
+  name
+  sku
+  price_range {
+    minimum_price {
+      final_price {
+        value
+        currency
+      }
+      discount {
+        amount_off
+      }
+    }
+  }
+  categories {
+    uid
+    url_key
+    name
+  }
+}

package/lib/productToItem/productToItem.ts

@@ -0,0 +1,38 @@
+import { ProductToItemFragment } from './ProductToItem.gql'
+
+export type Item = {
+  item_id: string
+  item_name: string
+  affiliation?: string
+  coupon?: string
+  currency?: string
+  discount?: number
+  index?: number
+  item_brand?: string
+  item_category?: string
+  item_category2?: string
+  item_category3?: string
+  item_category4?: string
+  item_category5?: string
+  item_list_id?: string
+  item_list_name?: string
+  item_variant?: string
+  location_id?: string
+  price?: number
+  quantity?: number
+}
+
+export function productToItem<P extends ProductToItemFragment>(item: P): Item {
+  return {
+    item_id: item.sku ?? '',
+    item_name: item.name ?? '',
+    price: item.price_range?.minimum_price.final_price.value ?? undefined,
+    currency: item.price_range?.minimum_price.final_price.currency ?? undefined,
+    discount: item.price_range?.minimum_price.discount?.amount_off ?? undefined,
+    item_category: item.categories?.[0]?.name ?? undefined,
+    item_category2: item.categories?.[1]?.name ?? undefined,
+    item_category3: item.categories?.[2]?.name ?? undefined,
+    item_category4: item.categories?.[3]?.name ?? undefined,
+    item_category5: item.categories?.[4]?.name ?? undefined,
+  }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@graphcommerce/google-datalayer",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "8.0.4-canary.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "peerDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^8.0.4-canary.1",
+    "@graphcommerce/graphql-mesh": "^8.0.4-canary.1",
+    "@graphcommerce/magento-cart": "^8.0.4-canary.1",
+    "@graphcommerce/magento-cart-payment-method": "^8.0.4-canary.1",
+    "@graphcommerce/magento-cart-shipping-method": "^8.0.4-canary.1",
+    "@graphcommerce/magento-product": "^8.0.4-canary.1",
+    "@graphcommerce/next-config": "^8.0.4-canary.1",
+    "@graphcommerce/next-ui": "^8.0.4-canary.1",
+    "@graphcommerce/prettier-config-pwa": "^8.0.4-canary.1",
+    "@graphcommerce/typescript-config-pwa": "^8.0.4-canary.1",
+    "@mui/material": "^5.14.20",
+    "next": "^14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@graphcommerce/magento-cart": {
+      "optional": true
+    },
+    "@graphcommerce/magento-cart-payment-method": {
+      "optional": true
+    },
+    "@graphcommerce/magento-cart-shipping-method": {
+      "optional": true
+    },
+    "@graphcommerce/magento-product": {
+      "optional": true
+    }
+  }
+}

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -0,0 +1,23 @@
+import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { addToCart } from '../events/add_to_cart'
+
+export const component = 'AddProductsToCartForm'
+export const exported = '@graphcommerce/magento-product'
+
+/** When a product is added to the Cart, send a Google Analytics event */
+function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
+  const { Prev, onComplete, ...rest } = props
+
+  return (
+    <Prev
+      {...rest}
+      onComplete={(result, variables) => {
+        addToCart(result, variables)
+        return onComplete?.(result, variables)
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerAddProductsToCartForm

package/plugins/GoogleDatalayerAllPagesPageview.tsx

@@ -0,0 +1,37 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { event } from '../lib/event'
+
+export const component = 'FramerNextPages'
+export const exported = '@graphcommerce/framer-next-pages'
+
+function GoogleDatalayerAllPagesPageview(props: PluginProps<PagesProps>) {
+  const { Prev, ...rest } = props
+
+  const { events } = useRouter()
+
+  useEffect(() => {
+    const onRouteChangeComplete = (url: string) => {
+      /**
+       * Todo: the actual page_view event is currently disabled, because we run the risk of double counting page views.
+       * https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag#manually_send_page_view_events
+       *
+       * https://developers.google.com/analytics/devguides/collection/ga4/single-page-applications?implementation=event
+       */
+      // event('page_view', {
+      //   page_title: '<Page Title>',
+      //   page_location: '<Page Location>',
+      // })
+      // event('pageview', { page: url })
+    }
+
+    events.on('routeChangeComplete', onRouteChangeComplete)
+    return () => events.off('routeChangeComplete', onRouteChangeComplete)
+  }, [events])
+
+  return <Prev {...rest} />
+}
+
+export const Plugin = GoogleDatalayerAllPagesPageview

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -0,0 +1,21 @@
+import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
+import { PluginProps } from '@graphcommerce/next-config'
+import { beginCheckout } from '../events/begin_checkout'
+
+export const component = 'CartStartCheckout'
+export const exported = '@graphcommerce/magento-cart'
+
+export function GoogleDatalayerCartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
+  const { Prev, onStart, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onStart={(e, cart) => {
+        beginCheckout(cart)
+        return onStart?.(e, cart)
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerCartStartCheckout

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -0,0 +1,35 @@
+import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
+import { PluginProps } from '@graphcommerce/next-config'
+import { useMemoObject } from '@graphcommerce/next-ui'
+import { useEffect } from 'react'
+import { beginCheckout } from '../events/begin_checkout'
+import { viewCart } from '../events/view_cart'
+
+export const component = 'CartStartCheckoutLinkOrButton'
+export const exported = '@graphcommerce/magento-cart'
+
+export function GoogleDatalayerCartStartCheckoutLinkOrButton(
+  props: PluginProps<CartStartCheckoutLinkOrButtonProps>,
+) {
+  const { Prev, onStart, ...rest } = props
+
+  const cartObject = useMemoObject({ items: rest.items, prices: rest.prices })
+
+  useEffect(() => {
+    if (cartObject.items) {
+      viewCart(cartObject)
+    }
+  }, [cartObject])
+
+  return (
+    <Prev
+      {...rest}
+      onStart={(e, cart) => {
+        beginCheckout(cart)
+        return onStart?.(e, cart)
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerCartStartCheckoutLinkOrButton

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -0,0 +1,26 @@
+import { useCartQuery } from '@graphcommerce/magento-cart'
+import { PaymentMethodButtonProps } from '@graphcommerce/magento-cart-payment-method'
+import { GetPaymentMethodContextDocument } from '@graphcommerce/magento-cart-payment-method/PaymentMethodContext/GetPaymentMethodContext.gql'
+import { PluginProps } from '@graphcommerce/next-config'
+import { addPaymentInfo } from '../events/add_payment_info'
+
+export const component = 'PaymentMethodButton'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+// @todo This plugin can probably be migrated to the actual form that is submitted.
+function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
+  const { Prev, onSubmitSuccessful, ...rest } = props
+  const methodContext = useCartQuery(GetPaymentMethodContextDocument)
+
+  return (
+    <Prev
+      {...rest}
+      onSubmitSuccessful={() => {
+        addPaymentInfo(methodContext.data?.cart)
+        return onSubmitSuccessful?.()
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerPaymentMethodButton

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -0,0 +1,22 @@
+import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { purchase } from '../events/purchase'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function GoogleDatalayerPaymentMethodContextProvider(
+  props: PluginProps<PaymentMethodContextProviderProps>,
+) {
+  const { Prev, onSuccess, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onSuccess={(orderNumber, cart) => {
+        purchase(orderNumber, cart)
+        return onSuccess?.(orderNumber, cart)
+      }}
+    />
+  )
+}
+export const Plugin = GoogleDatalayerPaymentMethodContextProvider

package/plugins/GoogleDatalayerProductListItem.tsx

@@ -0,0 +1,28 @@
+import { ProductListItemReal } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { useEventCallback } from '@mui/material'
+import { ComponentProps } from 'react'
+import { useListItemHandler } from '../components/AnalyticsItemList'
+
+export const component = 'ProductListItemReal'
+export const exported = '@graphcommerce/magento-product'
+
+function GoogleDatalayerProductListItem(
+  props: PluginProps<ComponentProps<typeof ProductListItemReal>>,
+) {
+  const { Prev, onClick, ...rest } = props
+  const { sku, price_range, name } = rest
+  const handle = useListItemHandler({ sku, price_range, name })
+
+  return (
+    <Prev
+      {...rest}
+      onClick={useEventCallback<NonNullable<typeof onClick>>((e, item) => {
+        handle()
+        return onClick?.(e, item)
+      })}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerProductListItem

package/plugins/GoogleDatalayerProductListItemsBase.tsx

@@ -0,0 +1,17 @@
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { ItemList } from '../components/AnalyticsItemList'
+
+export const component = 'ProductListItemsBase'
+export const exported = '@graphcommerce/magento-product'
+
+export function GoogleDatalayerProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
+  const { Prev, ...rest } = props
+  return (
+    <ItemList {...rest}>
+      <Prev {...rest} />
+    </ItemList>
+  )
+}
+
+export const Plugin = GoogleDatalayerProductListItemsBase

package/plugins/GoogleDatalayerRemoveItemFromCart.tsx

@@ -0,0 +1,29 @@
+import type { RemoveItemFromCart as Original } from '@graphcommerce/magento-cart-items'
+import { ReactPlugin } from '@graphcommerce/next-config'
+import { removeFromCart } from '../events/remove_from_cart'
+
+export const component = 'RemoveItemFromCart'
+export const exported =
+  '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCart'
+
+export const GoogleDatalayerRemoveItemFromCart: ReactPlugin<typeof Original> = (props) => {
+  const { Prev, uid, quantity, prices, product, buttonProps } = props
+
+  return (
+    <Prev
+      {...props}
+      product={product}
+      buttonProps={{
+        onClick: (e) => {
+          removeFromCart({
+            __typename: 'Cart',
+            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
+          })
+          buttonProps?.onClick?.(e)
+        },
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerRemoveItemFromCart

package/plugins/GoogleDatalayerRemoveItemFromCartFab.tsx

@@ -0,0 +1,29 @@
+import type { RemoveItemFromCartFab as Original } from '@graphcommerce/magento-cart-items'
+import { ReactPlugin } from '@graphcommerce/next-config'
+import { removeFromCart } from '../events/remove_from_cart'
+
+export const component = 'RemoveItemFromCartFab'
+export const exported =
+  '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab'
+
+export const GoogleDatalayerRemoveItemFromCartFab: ReactPlugin<typeof Original> = (props) => {
+  const { Prev, uid, quantity, prices, product, fabProps } = props
+
+  return (
+    <Prev
+      {...props}
+      product={product}
+      fabProps={{
+        onClick: (e) => {
+          removeFromCart({
+            __typename: 'Cart',
+            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
+          })
+          fabProps?.onClick?.(e)
+        },
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerRemoveItemFromCartFab

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -0,0 +1,22 @@
+import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
+import { PluginProps } from '@graphcommerce/next-config'
+import { addShippingInfo } from '../events/add_shipping_info'
+
+export const component = 'ShippingMethodForm'
+export const exported = '@graphcommerce/magento-cart-shipping-method'
+
+/** When the ShippingMethod is submitted the result is sent to Google Analytics */
+export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
+  const { Prev, onComplete, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onComplete={(result, variables) => {
+        addShippingInfo(result.data?.setShippingMethodsOnCart?.cart)
+        return onComplete?.(result, variables)
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerShippingMethodForm

package/plugins/GoogleDatalayerUpdateItemQuantity.tsx

@@ -0,0 +1,65 @@
+import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
+import { PluginProps } from '@graphcommerce/next-config'
+import { event } from '../lib/event'
+
+export const component = 'UpdateItemQuantity'
+export const exported =
+  '@graphcommerce/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity'
+
+/**
+ * When a product is added to the Cart, by using the + button on cart page, send a Google Analytics
+ * event
+ */
+function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
+  const { Prev, formOptions, quantity, ...rest } = props
+
+  return (
+    <Prev
+      {...rest}
+      quantity={quantity}
+      formOptions={{
+        ...formOptions,
+        onComplete: (data, variables) => {
+          const original = formOptions?.onComplete?.(data, variables)
+          const diffQuantity = variables.quantity - quantity
+          if (diffQuantity === 0) return original
+
+          const itemId = variables.uid
+          const addedItem = data.data?.updateCartItems?.cart.items?.find(
+            (item) => item?.uid === itemId,
+          )
+
+          if (addedItem && addedItem.prices && addedItem.prices.row_total_including_tax.value) {
+            // we need to manually calculate pricePerItemInclTax (https://github.com/magento/magento2/issues/33848)
+            const pricePerItemInclTax =
+              addedItem.prices.row_total_including_tax.value / addedItem.quantity
+            const addToCartValue = pricePerItemInclTax * diffQuantity
+
+            event('add_to_cart', {
+              currency: addedItem?.prices?.price.currency,
+              value: addToCartValue,
+              items: [
+                {
+                  item_id: addedItem?.product.sku,
+                  item_name: addedItem?.product.name,
+                  currency: addedItem?.prices?.price.currency,
+                  price: pricePerItemInclTax,
+                  quantity: variables.quantity,
+                  discount: addedItem?.prices?.discounts?.reduce(
+                    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                    (sum, discount) => sum + (discount?.amount?.value ?? 0),
+                    0,
+                  ),
+                },
+              ],
+            })
+          }
+
+          return original
+        },
+      }}
+    />
+  )
+}
+
+export const Plugin = GoogleDatalayerUpdateItemQuantity

package/plugins/GoogleDatalayerViewItem.tsx

@@ -0,0 +1,29 @@
+import type { ProductPageMeta } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { useMemoObject } from '@graphcommerce/next-ui'
+import React, { useEffect } from 'react'
+import { productToItem } from '../lib'
+import { event } from '../lib/event'
+
+export const component = 'ProductPageMeta'
+export const exported = '@graphcommerce/magento-product'
+
+/** When a product is added to the Cart, send a Google Analytics event */
+function GoogleDatalayerViewItem(props: PluginProps<React.ComponentProps<typeof ProductPageMeta>>) {
+  const { Prev, product } = props
+  const { price_range } = product
+
+  const viewItem = useMemoObject({
+    currency: price_range.minimum_price.final_price.currency,
+    value: price_range.minimum_price.final_price.value,
+    items: [productToItem(product)],
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  useEffect(() => {
+    event('view_item', viewItem)
+  }, [viewItem])
+
+  return <Prev {...props} />
+}
+
+export const Plugin = GoogleDatalayerViewItem

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}