@graphcommerce/googleanalytics 2.0.7 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.0.1
+
+### Patch Changes
+
+- [#1676](https://github.com/graphcommerce-org/graphcommerce/pull/1676) [`55cabbbc5`](https://github.com/graphcommerce-org/graphcommerce/commit/55cabbbc517b35c5f909bd771e619a87614e4c97) Thanks [@paales](https://github.com/paales)! - Fix issue where gtag wouldn't exist
+
+## 3.0.0
+
+### Major Changes
+
+- [#1655](https://github.com/graphcommerce-org/graphcommerce/pull/1655) [`3dde492ad`](https://github.com/graphcommerce-org/graphcommerce/commit/3dde492ad3a49d96481eeb7453fb305d0017b1a5) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Added Google Analytics support.
+
+### Patch Changes
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/magento-product@4.7.3
+
 ## 2.0.7
 
 ### Patch Changes

package/components/GoogleAnalyticsScript.tsx

@@ -18,7 +18,7 @@ export function GoogleAnalyticsScript() {
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
-          gtag('config', '${id}');
+          gtag('config', '${id}', { 'debug_mode':true });
       `}</Script>
     </>
   )

package/events/gtagAddPaymentInfo/GtagAddPaymentInfo.graphql

@@ -0,0 +1,36 @@
+fragment GtagAddPaymentInfo 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/gtagAddPaymentInfo/gtagAddPaymentInfo.ts

@@ -0,0 +1,24 @@
+import { GtagAddPaymentInfoFragment } from './GtagAddPaymentInfo.gql'
+
+export function gtagAddPaymentInfo<C extends GtagAddPaymentInfoFragment>(cart?: C | null) {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    globalThis.gtag?.('event', 'add_payment_info', {
+      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/gtagAddShippingInfo/GtagAddShippingInfo.graphql

@@ -0,0 +1,38 @@
+fragment GtagAddShippingInfo on Cart @inject(into: ["ShippingPageFragment"]) {
+  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/gtagAddShippingInfo/gtagAddShippingInfo.ts

@@ -0,0 +1,24 @@
+import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
+
+export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?: C | null) {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    globalThis.gtag?.('event', 'add_shipping_info', {
+      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/gtagAddToCart/GtagAddToCart.graphql

@@ -0,0 +1,10 @@
+fragment GtagAddToCart on Cart @inject(into: ["CartItemCountChanged"]) {
+  items {
+    prices {
+      price {
+        currency
+        value
+      }
+    }
+  }
+}

package/events/gtagAddToCart/gtagAddToCart.ts

@@ -0,0 +1,25 @@
+import { 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 = (
+  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,
+    // })
+  }
+}

package/events/gtagBeginCheckout/GtagBeginCheckout.graphql

@@ -0,0 +1,38 @@
+fragment GtagBeginCheckout 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/gtagBeginCheckout/gtagBeginCheckout.ts

@@ -0,0 +1,24 @@
+import { GtagBeginCheckoutFragment } from './GtagBeginCheckout.gql'
+
+export function gtagBeginCheckout<C extends GtagBeginCheckoutFragment>(cart?: C | null) {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    globalThis.gtag?.('event', 'begin_checkout', {
+      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/gtagSelectItem/gtagSelectItem.ts

@@ -0,0 +1,17 @@
+import { ProductToGtagItemFragment } from '../productToGtagItem/ProductToGtagItem.gql'
+import { productToGtagItem } from '../productToGtagItem/productToGtagItem'
+
+type GtagSelectItemProps<T extends ProductToGtagItemFragment> = {
+  item: T
+  listId?: string
+  title?: string
+}
+
+export function gtagSelectItem<T extends ProductToGtagItemFragment>(props: GtagSelectItemProps<T>) {
+  const { item, listId: item_list_id, title: item_list_name } = props
+  globalThis.gtag?.('event', 'select_item', {
+    item_list_id,
+    item_list_name,
+    items: productToGtagItem(item),
+  })
+}

package/events/productToGtagItem/ProductToGtagItem.graphql

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

package/events/productToGtagItem/productToGtagItem.ts

@@ -0,0 +1,38 @@
+import { ProductToGtagItemFragment } from './ProductToGtagItem.gql'
+
+export type GtagItem = {
+  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 productToGtagItem<P extends ProductToGtagItemFragment>(item: P): GtagItem {
+  return {
+    item_name: item.name ?? '',
+    item_id: item.sku ?? '',
+    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/events/useGtagPurchase/useGtagPurchase.ts

@@ -0,0 +1,28 @@
+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,
+    //   })),
+    // })
+  }
+}

package/events/useGtagViewItemList/useGtagViewItemList.ts

@@ -0,0 +1,36 @@
+import { nonNullable, useMemoDeep } from '@graphcommerce/next-ui'
+import { useEffect } from 'react'
+import { ProductToGtagItemFragment } from '../productToGtagItem/ProductToGtagItem.gql'
+import { GtagItem, productToGtagItem } from '../productToGtagItem/productToGtagItem'
+
+export type UseGtagViewItemListProps<
+  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
+> = {
+  title: string
+  items?: (P | null | undefined)[] | null
+  listId?: string
+}
+
+export type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: GtagItem[]
+}
+
+export function useGtagViewItemList<P extends ProductToGtagItemFragment>(
+  props: UseGtagViewItemListProps<P>,
+) {
+  const { title, items, listId } = props
+
+  const eventData: ViewItemList = useMemoDeep(
+    () => ({
+      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+      item_list_name: title,
+      items:
+        items?.map((item) => (item ? productToGtagItem(item) : null)).filter(nonNullable) ?? [],
+    }),
+    [listId, items, title],
+  )
+
+  useEffect(() => globalThis.gtag?.('event', 'view_item_list', eventData), [eventData])
+}

package/index.ts

@@ -1 +1,8 @@
 export * from './components'
+export * from './events/useGtagViewItemList/useGtagViewItemList'
+export * from './events/gtagBeginCheckout/gtagBeginCheckout'
+export * from './events/gtagAddPaymentInfo/gtagAddPaymentInfo'
+export * from './events/gtagAddShippingInfo/gtagAddShippingInfo'
+export * from './events/gtagSelectItem/gtagSelectItem'
+export * from './events/useGtagPurchase/useGtagPurchase'
+export * from './events/gtagAddToCart/gtagAddToCart'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.0.7",
+  "version": "3.0.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,6 +11,11 @@
       "project": "./tsconfig.json"
     }
   },
+  "dependencies": {
+    "@graphcommerce/graphql-mesh": "4.2.0",
+    "@graphcommerce/magento-product": "4.7.3",
+    "@graphcommerce/next-ui": "4.28.1"
+  },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
@@ -18,6 +23,7 @@
     "@types/gtag.js": "^0.0.10"
   },
   "peerDependencies": {
+    "@mui/material": "5.10.0",
     "next": "^12.1.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"