@graphcommerce/googleanalytics 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/events/{gtagAddPaymentInfo.ts → gtagAddPaymentInfo/gtagAddPaymentInfo.ts}

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

package/events/{gtagAddShippingInfo.ts → gtagAddShippingInfo/gtagAddShippingInfo.ts}

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

package/events/{gtagBeginCheckout.ts → gtagBeginCheckout/gtagBeginCheckout.ts}

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

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.ts → useGtagPurchase/useGtagPurchase.ts}

@@ -3,7 +3,7 @@ export const useGtagPurchase = () => {
 
   if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
     // console.log(cart, 'trigger gtagPurchase')
-    // window.gtag?.('event', 'purchase', {
+    // globalThis.gtag?.('event', 'purchase', {
     //   currency: cart?.prices?.grand_total?.currency,
     //   // transaction_id:,
     //   // shipping:,

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,8 +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'
+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": "3.0.0",
+  "version": "3.0.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {

package/events/gtagSelectItem.ts

@@ -1,20 +0,0 @@
-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/useGtagViewItemList.ts

@@ -1,24 +0,0 @@
-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/types/types.ts

@@ -1,31 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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,
-  }
-}