@graphcommerce/googleanalytics 2.0.6 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 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
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
 ## 2.0.6
 
 ### 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.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/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/GtagAddToCart.graphql

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

package/events/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/gtagAddPaymentInfo.ts

@@ -0,0 +1,24 @@
+import { GtagAddPaymentInfoFragment } from './GtagAddPaymentInfo.gql'
+
+export function gtagAddPaymentInfo(cart?: GtagAddPaymentInfoFragment | null) {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    window.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.ts

@@ -0,0 +1,24 @@
+import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
+
+export const gtagAddShippingInfo = (cart?: GtagAddShippingInfoFragment | null) => {
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    window.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.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.ts

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

@@ -0,0 +1,20 @@
+import { ProductInterface } from '@graphcommerce/graphql-mesh'
+import { itemToEvent } from '../utils'
+
+type GtagSelectItemProps = {
+  item: Partial<ProductInterface>
+  listId?: string
+  title?: string
+}
+
+export function gtagSelectItem({ item, listId, title }: GtagSelectItemProps) {
+  gtag?.('event', 'select_item', {
+    item_list_id: listId,
+    item_list_name: title,
+    items: itemToEvent({
+      ...item,
+      name: item.name ?? '',
+      sku: item.sku ?? '',
+    }),
+  })
+}

package/events/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')
+    // window.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.ts

@@ -0,0 +1,24 @@
+import { ProductListItemFragment } from '@graphcommerce/magento-product'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { useEffect, useMemo } from 'react'
+import { ViewItemList } from '../types/types'
+import { itemToEvent } from '../utils'
+
+export type UseGtagViewItemListProps = {
+  title: string
+  items?: (ProductListItemFragment | null | undefined)[] | null | undefined
+  listId?: string
+}
+
+export function useGtagViewItemList({ title, items, listId }: UseGtagViewItemListProps) {
+  const eventData: ViewItemList = useMemo(
+    () => ({
+      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+      item_list_name: title,
+      items: filterNonNullableKeys(items, ['name', 'sku']).map((item) => itemToEvent(item)),
+    }),
+    [listId, items, title],
+  )
+
+  useEffect(() => gtag?.('event', 'view_item_list', eventData), [eventData])
+}

package/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.0.6",
+  "version": "3.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,15 +11,21 @@
       "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.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@types/gtag.js": "^0.0.10"
   },
   "peerDependencies": {
-    "next": "12.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "5.10.0",
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/types/types.ts

@@ -0,0 +1,31 @@
+import type { ProductInterface } from '@graphcommerce/graphql-mesh'
+import { RequiredKeys } from '@graphcommerce/next-ui'
+
+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 type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: Item[]
+}
+
+export type ProductItem = RequiredKeys<Partial<ProductInterface>, 'name' | 'sku'>

package/utils/index.ts

@@ -0,0 +1,19 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { Item, ProductItem } from '../types/types'
+
+export function itemToEvent(item: ProductItem): Item {
+  const categories = filterNonNullableKeys(item.categories, ['include_in_menu', 'name'])
+
+  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: categories[0]?.name,
+    item_category2: categories[1]?.name,
+    item_category3: categories[2]?.name,
+    item_category4: categories[3]?.name,
+    item_category5: categories[4]?.name,
+  }
+}