Merge pull request #2158 from graphcommerce-org/feature/GCOM-1312

Refactor GA4 / GTM tracking preferences (GCOM-1312)

.changeset/flat-wombats-lie.md

@@ -0,0 +1,7 @@
+---
+"@graphcommerce/google-datalayer": patch
+"@graphcommerce/googletagmanager": patch
+"@graphcommerce/googleanalytics": patch
+---
+
+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.

docs/framework/config.md

@@ -1,4 +1,12 @@
 <!-- Automatically generated from Config.graphqls -->
+### AnalyticsConfig
+
+AnalyticsConfig will contain all configuration values for the analytics in GraphCommerce.
+
+#### eventFormat: GA3 | GA4[]
+
+eventFormat contains the list of fired and formatted events
+
 # GraphCommerce configuration system
 
 Global GraphCommerce configuration can be configured in your `graphcommerce.config.js` file
@@ -105,6 +113,8 @@ Examples:
 
 All storefront configuration for the project
 
+#### analytics: [AnalyticsConfig](#AnalyticsConfig)
+
 #### cartDisplayPricesInclTax: boolean
 
 Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.

packages/google-datalayer/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!]
+}

packages/google-datalayer/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

packages/google-datalayer/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>
+  )
+}

packages/googleanalytics/events/gtagAddPaymentInfo/GtagAddPaymentInfo.graphql → packages/google-datalayer/events/add_payment_info/AddPaymentInfoFragment.graphql

@@ -1,4 +1,4 @@
-fragment GtagAddPaymentInfo on Cart
+fragment AddPaymentInfoFragment on Cart
 @inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
   items {
     uid

packages/googleanalytics/events/gtagAddPaymentInfo/gtagAddPaymentInfo.ts → packages/google-datalayer/events/add_payment_info/addPaymentInfo.ts

@@ -1,7 +1,9 @@
-import { GtagAddPaymentInfoFragment } from './GtagAddPaymentInfo.gql'
+import { event } from '../../lib/event'
+import { AddPaymentInfoFragment } from './AddPaymentInfoFragment.gql'
 
-export function gtagAddPaymentInfo<C extends GtagAddPaymentInfoFragment>(cart?: C | null) {
-  globalThis.gtag?.('event', 'add_payment_info', {
+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),
@@ -19,4 +21,3 @@ export function gtagAddPaymentInfo<C extends GtagAddPaymentInfoFragment>(cart?:
       quantity: item?.quantity,
     })),
   })
-}

packages/google-datalayer/events/add_payment_info/index.ts

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

packages/googleanalytics/events/gtagAddShippingInfo/GtagAddShippingInfo.graphql → packages/google-datalayer/events/add_shipping_info/AddSchippingInfoFragment.graphql

@@ -1,4 +1,4 @@
-fragment GtagAddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"]) {
+fragment AddShippingInfoFragment on Cart @inject(into: ["ShippingMethodSelected"]) {
   prices {
     grand_total {
       currency

packages/googleanalytics/events/gtagAddShippingInfo/gtagAddShippingInfo.ts → packages/google-datalayer/events/add_shipping_info/addShippingInfo.ts

@@ -1,9 +1,9 @@
-import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
+import { event } from '../../lib/event'
+import { AddShippingInfoFragment } from './AddSchippingInfoFragment.gql'
 
-export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?: C | null) {
-  if (!cart) return
-
-  globalThis.gtag?.('event', 'add_shipping_info', {
+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),
@@ -15,9 +15,8 @@ export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?
         (sum, discount) => sum + (discount?.amount?.value ?? 0),
         0,
       ),
-      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      item_variant: item && 'configured_variant' in item ? item.configured_variant.sku : '',
       price: item?.prices?.price.value,
       quantity: item?.quantity,
     })),
   })
-}

packages/google-datalayer/events/add_shipping_info/index.ts

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

packages/googleanalytics/events/gtagAddToCart/GtagAddToCart.graphql → packages/google-datalayer/events/add_to_cart/AddToCartFragment.graphql

@@ -1,5 +1,10 @@
-fragment GtagAddToCart on Cart @inject(into: ["CartItemCountChanged"]) {
+fragment AddToCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
   items {
+    quantity
+    product {
+      sku
+      name
+    }
     prices {
       discounts {
         amount {
@@ -17,4 +22,9 @@ fragment GtagAddToCart on Cart @inject(into: ["CartItemCountChanged"]) {
       }
     }
   }
+  prices {
+    grand_total {
+      currency
+    }
+  }
 }

packages/google-datalayer/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,
+  })
+}

packages/google-datalayer/events/add_to_cart/index.ts

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

packages/googleanalytics/events/gtagBeginCheckout/GtagBeginCheckout.graphql → packages/google-datalayer/events/begin_checkout/BeginCheckoutFragment.graphql

@@ -1,4 +1,4 @@
-fragment GtagBeginCheckout on Cart @inject(into: ["CartStartCheckout"]) {
+fragment BeginCheckoutFragment on Cart @inject(into: ["CartStartCheckout"]) {
   prices {
     grand_total {
       currency

packages/googleanalytics/events/gtagBeginCheckout/gtagBeginCheckout.ts → packages/google-datalayer/events/begin_checkout/beginCheckout.ts

@@ -1,7 +1,9 @@
-import { GtagBeginCheckoutFragment } from './GtagBeginCheckout.gql'
+import { event } from '../../lib/event'
+import { BeginCheckoutFragment } from './BeginCheckoutFragment.gql'
 
-export function gtagBeginCheckout<C extends GtagBeginCheckoutFragment>(cart?: C | null) {
-  globalThis.gtag?.('event', 'begin_checkout', {
+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),
@@ -18,4 +20,3 @@ export function gtagBeginCheckout<C extends GtagBeginCheckoutFragment>(cart?: C
       quantity: item?.quantity,
     })),
   })
-}

packages/google-datalayer/events/begin_checkout/index.ts

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

packages/google-datalayer/events/purchase/index.ts

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

packages/googleanalytics/events/gtagAddPurchaseInfo/gtagAddPurchaseInfo.ts → packages/google-datalayer/events/purchase/purchase.ts

@@ -1,27 +1,27 @@
 import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
+import { event } from '../../lib/event'
 
-export function gtagAddPurchaseInfo(
+export const purchase = <C extends PaymentMethodContextFragment>(
   orderNumber: string,
-  cart: PaymentMethodContextFragment | null | undefined,
-) {
-  globalThis.gtag?.('event', 'purchase', {
+  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),
+    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(
-        // 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,
     })),
   })
-}

packages/googleanalytics/events/gtagRemoveFromCart/GtagRemoveFromCart.graphql → packages/google-datalayer/events/remove_from_cart/RemoveFromCartFragment.graphql

@@ -1,4 +1,4 @@
-fragment GtagRemoveFromCart on Cart @inject(into: ["CartItemCountChanged"]) {
+fragment RemoveFromCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
   __typename
   prices {
     grand_total {

packages/google-datalayer/events/remove_from_cart/index.ts

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

packages/googleanalytics/events/gtagRemoveFromCart/gtagRemoveFromCart.ts → packages/google-datalayer/events/remove_from_cart/removeFromCart.ts

@@ -1,9 +1,9 @@
-import { GtagRemoveFromCartFragment } from './GtagRemoveFromCart.gql'
+import { event } from '../../lib/event'
+import { RemoveFromCartFragment } from './RemoveFromCartFragment.gql'
 
-export function gtagRemoveFromCart<C extends GtagRemoveFromCartFragment>(cart?: C | null) {
-  if (!cart) return
-
-  globalThis.gtag?.('event', 'remove_from_cart', {
+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) => ({
@@ -19,4 +19,3 @@ export function gtagRemoveFromCart<C extends GtagRemoveFromCartFragment>(cart?:
       quantity: item?.quantity,
     })),
   })
-}

packages/google-datalayer/events/select_item/index.ts

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

packages/google-datalayer/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,
+  })

packages/googleanalytics/events/gtagViewCart/GtagViewCart.graphql → packages/google-datalayer/events/view_cart/ViewCartFragment.graphql

@@ -1,4 +1,4 @@
-fragment GtagViewCart on Cart @inject(into: ["CartItemCountChanged"]) {
+fragment ViewCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
   prices {
     grand_total {
       currency

packages/google-datalayer/events/view_cart/index.ts

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