@graphcommerce/googleanalytics 5.1.0-canary.4 → 5.1.0-canary.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 5.1.0-canary.6
+
+### Minor Changes
+
+- [#1754](https://github.com/graphcommerce-org/graphcommerce/pull/1754) [`f9cc9d45e`](https://github.com/graphcommerce-org/graphcommerce/commit/f9cc9d45ec500a719fd0b5f4c5673d23838ee77e) - Google analytics now supports configuration for multiple locales ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#1754](https://github.com/graphcommerce-org/graphcommerce/pull/1754) [`f9cc9d45e`](https://github.com/graphcommerce-org/graphcommerce/commit/f9cc9d45ec500a719fd0b5f4c5673d23838ee77e) - New events added to Google analytics: purchase and add_to_cart (when adding and updating items) ([@FrankHarland](https://github.com/FrankHarland))
+
+## 5.1.0-canary.5
+
 ## 5.1.0-canary.4
 
 ## 5.1.0-canary.3

package/README.md

@@ -1,11 +1,31 @@
 # @graphcommerce/googleanalytics
 
-This package makes it easy to add Google Analytics to your GraphCommerce
+This package makes it easy to add Google Analytics GA4 to your GraphCommerce
 webshop.
 
-### Usage
+Besides the GA4 integration it also tracks the following events:
 
-1. Fill `NEXT_PUBLIC_GOOGLE_ANALYTICS` in your .env file
-   [example](../../examples/magento-graphcms/.env.example)
-2. Add `<GoogleAnalyticsScript/>` to your `pages/_app.tsx` file.
-   [example](../../examples/magento-graphcms/pages/_app.tsx)
+- add_payment_info
+- purchase
+- add_shipping_info
+- add_to_cart (also triggered when updating quantity)
+- begin_checkout
+- select_item
+- view_item_list
+
+### Configuration
+
+Fill `NEXT_PUBLIC_GOOGLE_ANALYTICS` in your .env file. The value of
+`NEXT_PUBLIC_GOOGLE_ANALYTICS` can be string or JSON stringified object:
+
+```
+# your .env file
+
+# Google Analytics v4 ID
+NEXT_PUBLIC_GOOGLE_ANALYTICS="G-XXXXXXXX"
+
+# or
+
+# Google Analytics v4 ID per locale
+NEXT_PUBLIC_GOOGLE_ANALYTICS='{"en-us": "G-XXXXXXXX", "nl-nl": "G-XXXXXXXX"}'
+```

package/components/GoogleAnalyticsScript.tsx

@@ -1,9 +1,19 @@
+import { useRouter } from 'next/router'
 import Script from 'next/script'
 
 export function GoogleAnalyticsScript() {
-  const id = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
+  const gaEnv = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
+  const { locale } = useRouter()
+  let id = ''
 
-  if (!id) return null
+  if (!gaEnv) return null
+
+  if (gaEnv.startsWith('{') && locale) {
+    const GAConfig = JSON.parse(gaEnv)
+    id = GAConfig[locale]
+  } else {
+    id = gaEnv
+  }
 
   return (
     <>

package/events/gtagAddPurchaseInfo/gtagAddPurchaseInfo.ts

@@ -0,0 +1,29 @@
+import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
+
+export function gtagAddPurchaseInfo(
+  orderNumber: string,
+  cart: PaymentMethodContextFragment | null | undefined,
+) {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    globalThis.gtag?.('event', 'purchase', {
+      transaction_id: orderNumber,
+      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,
+      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,
+      })),
+    })
+  }
+}

package/events/gtagAddShippingInfo/gtagAddShippingInfo.ts

@@ -1,6 +1,8 @@
 import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
 
 export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?: C | null) {
+  if (!cart) return
+
   globalThis.gtag?.('event', 'add_shipping_info', {
     currency: cart?.prices?.grand_total?.currency,
     value: cart?.prices?.grand_total?.value,

package/events/gtagAddToCart/GtagAddToCart.graphql

@@ -1,6 +1,16 @@
 fragment GtagAddToCart on Cart @inject(into: ["CartItemCountChanged"]) {
   items {
     prices {
+      discounts {
+        amount {
+          currency
+          value
+        }
+      }
+      row_total_including_tax {
+        currency
+        value
+      }
       price {
         currency
         value

package/events/gtagAddToCart/gtagAddToCart.ts

@@ -1,25 +1,40 @@
-import { FetchResult } from '@graphcommerce/graphql'
+import type { FetchResult } from '@graphcommerce/graphql'
 import {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from '@graphcommerce/magento-product'
-import { GtagAddToCartFragment } from './GtagAddToCart.gql'
 
-// @todo add types
-// @todo some thing still needs to be done for configurables and bundles as you can have multiple items of the same SKU in your cart, but with different configurations/prices
-// F.E. 'sock-red' has 2 variants, 'sock-red:small' (€ 5) and 'sock-red:large' (€ 7,50). At this time we dont know the value of the item added if multiple variants are added
-export const gtagAddToCart = async (
+export const gtagAddToCart = (
   result: FetchResult<AddProductsToCartMutation>,
   variables: AddProductsToCartMutationVariables,
 ) => {
   if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
     const addedItem = result.data?.addProductsToCart?.cart.items?.slice(-1)[0]
 
-    // console.log(result.data?.addProductsToCart, variables)
-    // console.log({
-    //   currency,
-    //   value,
-    //   items,
-    // })
+    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 * variables.cartItems[0].quantity
+
+      globalThis.gtag?.('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.cartItems[0].quantity,
+            discount: addedItem?.prices?.discounts?.reduce(
+              // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+              (sum, discount) => sum + (discount?.amount?.value ?? 0),
+              0,
+            ),
+          },
+        ],
+      })
+    }
   }
 }

package/index.ts

@@ -2,6 +2,7 @@ export * from './components'
 export * from './events/useGtagViewItemList/useGtagViewItemList'
 export * from './events/gtagBeginCheckout/gtagBeginCheckout'
 export * from './events/gtagAddPaymentInfo/gtagAddPaymentInfo'
+export * from './events/gtagAddPurchaseInfo/gtagAddPurchaseInfo'
 export * from './events/gtagAddShippingInfo/gtagAddShippingInfo'
 export * from './events/gtagSelectItem/gtagSelectItem'
 export * from './events/useGtagPurchase/useGtagPurchase'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.4",
+  "version": "5.1.0-canary.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,18 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-mesh": "5.1.0-canary.4",
-    "@graphcommerce/magento-cart": "5.1.0-canary.4",
-    "@graphcommerce/magento-cart-payment-method": "5.1.0-canary.4",
-    "@graphcommerce/magento-cart-shipping-method": "5.1.0-canary.4",
-    "@graphcommerce/magento-product": "5.1.0-canary.4",
-    "@graphcommerce/next-config": "5.1.0-canary.4",
-    "@graphcommerce/next-ui": "5.1.0-canary.4"
+    "@graphcommerce/graphql-mesh": "5.1.0-canary.6",
+    "@graphcommerce/magento-cart": "5.1.0-canary.6",
+    "@graphcommerce/magento-cart-payment-method": "5.1.0-canary.6",
+    "@graphcommerce/magento-cart-shipping-method": "5.1.0-canary.6",
+    "@graphcommerce/magento-product": "5.1.0-canary.6",
+    "@graphcommerce/next-config": "5.1.0-canary.6",
+    "@graphcommerce/next-ui": "5.1.0-canary.6"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.4",
-    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.4",
-    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.4",
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.6",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.6",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.6",
     "@types/gtag.js": "^0.0.12"
   },
   "peerDependencies": {

package/plugins/GaAddProductsToCartForm.tsx

@@ -12,8 +12,9 @@ function GaAddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>)
   return (
     <Prev
       {...rest}
-      onComplete={async (data, variables) => {
-        await Promise.all([gtagAddToCart(data, variables), onComplete?.(data, variables)])
+      onComplete={(data, variables) => {
+        gtagAddToCart(data, variables)
+        return onComplete?.(data, variables)
       }}
     />
   )

package/plugins/GaCartStartCheckout.tsx

@@ -12,7 +12,7 @@ export function GaCartStartCheckout(props: PluginProps<CartStartCheckoutProps>)
       {...rest}
       onStart={(e, cart) => {
         gtagBeginCheckout(cart)
-        onStart?.(e, cart)
+        return onStart?.(e, cart)
       }}
     />
   )

package/plugins/GaCartStartCheckoutLinkOrButton.tsx

@@ -14,7 +14,7 @@ export function GaCartStartCheckoutLinkOrButton(
       {...rest}
       onStart={(e, cart) => {
         gtagBeginCheckout(cart)
-        onStart?.(e, cart)
+        return onStart?.(e, cart)
       }}
     />
   )

package/plugins/GaPaymentMethodButton.tsx

@@ -7,6 +7,7 @@ import { gtagAddPaymentInfo } from '../events/gtagAddPaymentInfo/gtagAddPaymentI
 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 GaPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
   const { Prev, onSubmitSuccessful, ...rest } = props
   const methodContext = useCartQuery(GetPaymentMethodContextDocument)
@@ -16,7 +17,7 @@ function GaPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
       {...rest}
       onSubmitSuccessful={() => {
         gtagAddPaymentInfo(methodContext.data?.cart)
-        onSubmitSuccessful?.()
+        return onSubmitSuccessful?.()
       }}
     />
   )

package/plugins/GaPaymentMethodContextProvider.tsx

@@ -1,5 +1,6 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
 import type { PluginProps } from '@graphcommerce/next-config'
+import { gtagAddPurchaseInfo } from '../events/gtagAddPurchaseInfo/gtagAddPurchaseInfo'
 
 export const component = 'PaymentMethodContextProvider'
 export const exported = '@graphcommerce/magento-cart-payment-method'
@@ -9,9 +10,9 @@ function GaPaymentMethodContextProvider(props: PluginProps<PaymentMethodContextP
   return (
     <Prev
       {...rest}
-      onSuccess={async (orderNumber, cart) => {
-        // Todo - add GA event here
-        await onSuccess?.(orderNumber, cart)
+      onSuccess={(orderNumber, cart) => {
+        gtagAddPurchaseInfo(orderNumber, cart)
+        return onSuccess?.(orderNumber, cart)
       }}
     />
   )

package/plugins/GaProductListItemsBase.tsx

@@ -16,7 +16,7 @@ export function GaProductListItemsBase(props: PluginProps<ProductItemsGridProps>
       {...rest}
       onClick={(e, item) => {
         gtagSelectItem({ item })
-        onClick?.(e, item)
+        return onClick?.(e, item)
       }}
     />
   )

package/plugins/GaShippingMethodForm.tsx

@@ -11,10 +11,9 @@ export function GaShippingMethodForm(props: PluginProps<ShippingMethodFormProps>
   return (
     <Prev
       {...rest}
-      onComplete={(result) => {
-        const cart = result.data?.setShippingMethodsOnCart?.cart
-        if (!cart) return
-        gtagAddShippingInfo(cart)
+      onComplete={(result, variables) => {
+        gtagAddShippingInfo(result.data?.setShippingMethodsOnCart?.cart)
+        return onComplete?.(result, variables)
       }}
     />
   )

package/plugins/GaUpdateItemQuantity.tsx

@@ -0,0 +1,61 @@
+import { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
+import { PluginProps } from '@graphcommerce/next-config'
+
+export const component = 'UpdateItemQuantity'
+export const exported = '@graphcommerce/magento-cart-items/UpdateItemQuantity/UpdateItemQuantity'
+export const ifEnv = 'NEXT_PUBLIC_GOOGLE_ANALYTICS' // @frank: chekcen of dit werr
+
+/**
+ * When a product is added to the Cart, by using the + button on cart page, send a Google Analytics
+ * event
+ */
+function GaUpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
+  const { Prev, onComplete, quantity, ...rest } = props
+
+  return (
+    <Prev
+      {...rest}
+      quantity={quantity}
+      onComplete={(data, variables) => {
+        const original = 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
+
+          globalThis.gtag?.('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 = GaUpdateItemQuantity

package/events/useGtagPurchase/useGtagPurchase.ts

@@ -1,28 +0,0 @@
-export const useGtagPurchase = () => {
-  // const bla = useCartQuery(CartItemSummaryDocument)
-
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    // console.log(cart, 'trigger gtagPurchase')
-    // globalThis.gtag?.('event', 'purchase', {
-    //   currency: cart?.prices?.grand_total?.currency,
-    //   // transaction_id:,
-    //   // shipping:,
-    //   // tax:,
-    //   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,
-    //   })),
-    // })
-  }
-}