example functions

Author: alexanderkirtzel

packages/destinations/web/google-ga4/examples/events.ts

@@ -1,21 +1,58 @@
-export const purchase = [
-  'event',
-  'purchase',
-  {
-    data_id: '0rd3r1d',
-    data_currency: 'EUR',
-    data_shipping: 5.22,
-    data_taxes: 73.76,
-    data_total: 555,
-    transaction_id: '0rd3r1d',
-    value: 555,
-    tax: 73.76,
-    shipping: 5.22,
-    currency: 'EUR',
-    items: [
-      { item_id: 'ers', item_name: 'Everyday Ruck Snack', quantity: 1 },
-      { item_id: 'cc', item_name: 'Cool Cap', quantity: 1 },
-    ],
-    send_to: 'G-XXXXXX-1',
-  },
-];
+import type { DestinationGoogleGA4 } from '../src';
+import { getEvent } from '@elbwalker/utils';
+
+const customDefault: DestinationGoogleGA4.Custom = {
+  measurementId: 'G-XXXXXX-1',
+};
+
+function useCustom(custom: DestinationGoogleGA4.Custom = customDefault) {
+  return {
+    send_to: custom.measurementId,
+  };
+}
+
+export function purchase(custom: DestinationGoogleGA4.Custom = customDefault) {
+  const event = getEvent('order complete');
+  const product1 = event.nested[0].data;
+  const product2 = event.nested[1].data;
+
+  return [
+    'event',
+    'purchase',
+    {
+      transaction_id: event.data.id,
+      value: event.data.total,
+      tax: event.data.taxes,
+      shipping: event.data.shipping,
+      currency: 'EUR',
+      items: [
+        { item_id: product1.id, item_name: product1.name, quantity: 1 },
+        { item_id: product2.id, item_name: product2.name, quantity: 1 },
+      ],
+      ...useCustom(custom),
+    },
+  ];
+}
+
+export function add_to_cart(
+  custom: DestinationGoogleGA4.Custom = customDefault,
+) {
+  const event = getEvent('product add');
+
+  return [
+    'event',
+    'add_to_cart',
+    {
+      currency: 'EUR',
+      value: event.data.price,
+      items: [
+        {
+          item_id: event.data.id,
+          item_variant: event.data.color,
+          quantity: 1,
+        },
+      ],
+      ...useCustom(custom),
+    },
+  ];
+}

packages/destinations/web/google-ga4/examples/index.ts

@@ -1,2 +1,2 @@
 export * as events from './events';
-export { mapping } from './mapping';
+export * as mapping from './mapping';

packages/destinations/web/google-ga4/examples/mapping.ts

@@ -1,33 +1,58 @@
 import type { Mapping } from '@elbwalker/types';
+import type { DestinationGoogleGA4 } from '../src';
 import { isObject } from '@elbwalker/utils';
 
-export const mapping = {
-  order: {
-    complete: {
-      name: 'purchase',
-      data: {
-        map: {
-          transaction_id: 'data.id',
-          value: 'data.total',
-          tax: 'data.taxes',
-          shipping: 'data.shipping',
-          currency: { key: 'data.currency', value: 'EUR' },
-          items: {
-            loop: [
-              'nested',
-              {
-                condition: (entity) =>
-                  isObject(entity) && entity.type === 'product',
-                map: {
-                  item_id: 'data.id',
-                  item_name: 'data.name',
-                  quantity: { key: 'data.quantity', value: 1 },
-                },
-              },
-            ],
+export const purchase: DestinationGoogleGA4.EventConfig = {
+  name: 'purchase',
+  data: {
+    map: {
+      transaction_id: 'data.id',
+      value: 'data.total',
+      tax: 'data.taxes',
+      shipping: 'data.shipping',
+      currency: { key: 'data.currency', value: 'EUR' },
+      items: {
+        loop: [
+          'nested',
+          {
+            condition: (entity) =>
+              isObject(entity) && entity.type === 'product',
+            map: {
+              item_id: 'data.id',
+              item_name: 'data.name',
+              quantity: { key: 'data.quantity', value: 1 },
+            },
           },
-        },
+        ],
       },
     },
   },
+};
+
+export const add_to_cart: DestinationGoogleGA4.EventConfig = {
+  name: 'add_to_cart',
+  data: {
+    map: {
+      currency: { value: 'EUR', key: 'data.currency' },
+      override: 'data.old',
+      value: 'data.price',
+      items: {
+        loop: [
+          'this',
+          {
+            map: {
+              item_id: 'data.id',
+              item_variant: 'data.color',
+              quantity: { value: 1, key: 'data.quantity' },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const config = {
+  order: { complete: purchase },
+  product: { add: add_to_cart },
 } satisfies Mapping.Config;

packages/destinations/web/google-ga4/src/index.test.ts

@@ -299,71 +299,33 @@ describe('Destination Google GA4', () => {
 
   test('event add_to_cart', () => {
     const event = getEvent('product add');
+    const custom = { measurementId, include: [] };
+
     const config: DestinationGoogleGA4.Config = {
-      custom: { measurementId },
+      custom,
       init: true,
-      mapping: {
-        product: {
-          add: {
-            name: 'add_to_cart',
-            data: {
-              map: {
-                currency: { value: 'EUR', key: 'data.currency' },
-                override: 'data.old',
-                value: 'data.price',
-                items: {
-                  loop: [
-                    'this',
-                    {
-                      map: {
-                        item_id: 'data.id',
-                        item_variant: 'data.color',
-                        quantity: { value: 1, key: 'data.quantity' },
-                      },
-                    },
-                  ],
-                },
-              },
-            },
-          },
-        },
-      },
+      mapping: mapping.config,
     };
     elb('walker destination', destination, config);
 
     elb(event);
 
-    expect(mockFn).toHaveBeenCalledWith(
-      'event',
-      'add_to_cart',
-      expect.objectContaining({
-        currency: 'EUR',
-        value: event.data.price,
-        items: [
-          {
-            item_id: event.data.id,
-            item_variant: event.data.color,
-            quantity: 1,
-          },
-        ],
-      }),
-    );
+    expect(mockFn).toHaveBeenCalledWith(...events.add_to_cart(custom));
   });
 
   test('event purchase', () => {
     const event = getEvent('order complete');
+    const custom = { measurementId, include: [] };
 
     const config: DestinationGoogleGA4.Config = {
-      custom: { measurementId },
+      custom,
       init: true,
-      mapping,
+      mapping: mapping.config,
     };
     elb('walker destination', destination, config);
 
     elb(event);
-    const product1 = event.nested[0].data;
-    const product2 = event.nested[1].data;
-    expect(mockFn).toHaveBeenCalledWith(...events.purchase);
+    expect(mockFn).toHaveBeenCalledWith(...events.purchase(custom));
   });
 
   test('snake case disabled', () => {

packages/destinations/web/google-ga4/src/types/index.ts

@@ -23,6 +23,8 @@ export interface Custom {
   transport_url?: string;
 }
 
+export type EventConfig = Mapping.EventConfig<CustomEvent>;
+
 export interface CustomEvent {
   include?: Include;
 }