@segment/analytics-browser-actions-google-analytics-4 1.0.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-google-analytics-4",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/actions-core": "^3.71.0",
+    "@segment/browser-destination-runtime": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

package/src/__tests__/addPaymentInfo.test.ts

@@ -0,0 +1,101 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'addPaymentInfo',
+    name: 'Add Payment Info',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      currency: {
+        '@path': '$.properties.currency'
+      },
+      value: {
+        '@path': '$.properties.value'
+      },
+      coupon: {
+        '@path': '$.properties.coupon'
+      },
+      items: [
+        {
+          item_name: {
+            '@path': `$.properties.products.0.name`
+          },
+          item_id: {
+            '@path': `$.properties.products.0.product_id`
+          },
+          currency: {
+            '@path': `$.properties.products.0.currency`
+          },
+          price: {
+            '@path': `$.properties.products.0.price`
+          },
+          quantity: {
+            '@path': `$.properties.products.0.quantity`
+          }
+        }
+      ]
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.addPaymentInfo', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let addPaymentInfoEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    addPaymentInfoEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 addPaymentInfo Event', async () => {
+    const context = new Context({
+      event: 'Payment Info Entered',
+      type: 'track',
+      properties: {
+        currency: 'USD',
+        value: 10,
+        coupon: 'SUMMER_123',
+        payment_method: 'Credit Card',
+        products: [
+          {
+            product_id: '12345',
+            name: 'Monopoly: 3rd Edition',
+            currency: 'USD'
+          }
+        ]
+      }
+    })
+    await addPaymentInfoEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('add_payment_info'),
+      expect.objectContaining({
+        coupon: 'SUMMER_123',
+        currency: 'USD',
+        items: [{ currency: 'USD', item_id: '12345', item_name: 'Monopoly: 3rd Edition' }],
+        value: 10
+      })
+    )
+  })
+})

package/src/__tests__/addToCart.test.ts

@@ -0,0 +1,95 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'addToCart',
+    name: 'Add To Cart',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      currency: {
+        '@path': '$.properties.currency'
+      },
+      value: {
+        '@path': '$.properties.value'
+      },
+      items: [
+        {
+          item_name: {
+            '@path': `$.properties.products.0.name`
+          },
+          item_id: {
+            '@path': `$.properties.products.0.product_id`
+          },
+          currency: {
+            '@path': `$.properties.products.0.currency`
+          },
+          price: {
+            '@path': `$.properties.products.0.price`
+          },
+          quantity: {
+            '@path': `$.properties.products.0.quantity`
+          }
+        }
+      ]
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.addToCart', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let addToCartEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    addToCartEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 addToCart Event', async () => {
+    const context = new Context({
+      event: 'Add To Cart',
+      type: 'track',
+      properties: {
+        currency: 'USD',
+        value: 10,
+        products: [
+          {
+            product_id: '12345',
+            name: 'Monopoly: 3rd Edition',
+            currency: 'USD'
+          }
+        ]
+      }
+    })
+    await addToCartEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('add_to_cart'),
+      expect.objectContaining({
+        currency: 'USD',
+        items: [{ currency: 'USD', item_id: '12345', item_name: 'Monopoly: 3rd Edition' }],
+        value: 10
+      })
+    )
+  })
+})

package/src/__tests__/addToWishlist.test.ts

@@ -0,0 +1,95 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'addToWishlist',
+    name: 'Add To Wishlist',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      currency: {
+        '@path': '$.properties.currency'
+      },
+      value: {
+        '@path': '$.properties.value'
+      },
+      items: [
+        {
+          item_name: {
+            '@path': `$.properties.products.0.name`
+          },
+          item_id: {
+            '@path': `$.properties.products.0.product_id`
+          },
+          currency: {
+            '@path': `$.properties.products.0.currency`
+          },
+          price: {
+            '@path': `$.properties.products.0.price`
+          },
+          quantity: {
+            '@path': `$.properties.products.0.quantity`
+          }
+        }
+      ]
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.addToWishlist', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let addToWishlistEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    addToWishlistEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('Track call without parameters', async () => {
+    const context = new Context({
+      event: 'Add To Wishlist',
+      type: 'track',
+      properties: {
+        currency: 'USD',
+        value: 10,
+        products: [
+          {
+            product_id: '12345',
+            name: 'Monopoly: 3rd Edition',
+            currency: 'USD'
+          }
+        ]
+      }
+    })
+    await addToWishlistEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('add_to_wishlist'),
+      expect.objectContaining({
+        currency: 'USD',
+        items: [{ currency: 'USD', item_id: '12345', item_name: 'Monopoly: 3rd Edition' }],
+        value: 10
+      })
+    )
+  })
+})

package/src/__tests__/beginCheckout.test.ts

@@ -0,0 +1,101 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'beginCheckout',
+    name: 'Begin Checkout',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      currency: {
+        '@path': '$.properties.currency'
+      },
+      value: {
+        '@path': '$.properties.value'
+      },
+      coupon: {
+        '@path': '$.properties.coupon'
+      },
+      items: [
+        {
+          item_name: {
+            '@path': `$.properties.products.0.name`
+          },
+          item_id: {
+            '@path': `$.properties.products.0.product_id`
+          },
+          currency: {
+            '@path': `$.properties.products.0.currency`
+          },
+          price: {
+            '@path': `$.properties.products.0.price`
+          },
+          quantity: {
+            '@path': `$.properties.products.0.quantity`
+          }
+        }
+      ]
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.beginCheckout', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let beginCheckoutEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    beginCheckoutEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 beginCheckout Event', async () => {
+    const context = new Context({
+      event: 'Begin Checkout',
+      type: 'track',
+      properties: {
+        currency: 'USD',
+        value: 10,
+        coupon: 'SUMMER_123',
+        payment_method: 'Credit Card',
+        products: [
+          {
+            product_id: '12345',
+            name: 'Monopoly: 3rd Edition',
+            currency: 'USD'
+          }
+        ]
+      }
+    })
+    await beginCheckoutEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('begin_checkout'),
+      expect.objectContaining({
+        coupon: 'SUMMER_123',
+        currency: 'USD',
+        items: [{ currency: 'USD', item_id: '12345', item_name: 'Monopoly: 3rd Edition' }],
+        value: 10
+      })
+    )
+  })
+})

package/src/__tests__/customEvent.test.ts

@@ -0,0 +1,70 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'customEvent',
+    name: 'Custom Event',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      name: {
+        '@path': '$.event'
+      },
+      params: {
+        '@path': '$.properties.params'
+      }
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.customEvent', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let customEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    customEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 customEvent Event', async () => {
+    const context = new Context({
+      event: 'Custom Event',
+      type: 'track',
+      properties: {
+        params: [
+          {
+            paramOne: 'test123',
+            paramTwo: 'test123',
+            paramThree: 123
+          }
+        ]
+      }
+    })
+    await customEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('Custom_Event'),
+      expect.objectContaining([{ paramOne: 'test123', paramThree: 123, paramTwo: 'test123' }])
+    )
+  })
+})

package/src/__tests__/generateLead.test.ts

@@ -0,0 +1,68 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'generateLead',
+    name: 'Generate Leaad',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      currency: {
+        '@path': '$.properties.currency'
+      },
+      value: {
+        '@path': '$.properties.value'
+      }
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.generateLead', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let generateLeadEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    generateLeadEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 generateLead Event', async () => {
+    const context = new Context({
+      event: 'Generate Lead',
+      type: 'track',
+      properties: {
+        currency: 'USD',
+        value: 10
+      }
+    })
+    await generateLeadEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('generate_lead'),
+      expect.objectContaining({
+        currency: 'USD',
+        value: 10
+      })
+    )
+  })
+})

package/src/__tests__/login.test.ts

@@ -0,0 +1,63 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import googleAnalytics4Web, { destination } from '../index'
+import { GA } from '../types'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'login',
+    name: 'Login',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      method: {
+        '@path': '$.properties.method'
+      }
+    }
+  }
+]
+
+describe('GoogleAnalytics4Web.login', () => {
+  const settings = {
+    measurementID: 'test123'
+  }
+
+  let mockGA4: GA
+  let loginEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await googleAnalytics4Web({
+      ...settings,
+      subscriptions
+    })
+    loginEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      mockGA4 = {
+        gtag: jest.fn()
+      }
+      return Promise.resolve(mockGA4.gtag)
+    })
+    await trackEventPlugin.load(Context.system(), {} as Analytics)
+  })
+
+  test('GA4 login Event', async () => {
+    const context = new Context({
+      event: 'Login',
+      type: 'track',
+      properties: {
+        method: 'Google'
+      }
+    })
+    await loginEvent.track?.(context)
+
+    expect(mockGA4.gtag).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.stringContaining('login'),
+      expect.objectContaining({
+        method: 'Google'
+      })
+    )
+  })
+})