examples

Author: alexanderkirtzel

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

@@ -0,0 +1,51 @@
+import type { WalkerOS } from '@elbwalker/types';
+import { getEvent } from '@elbwalker/utils';
+
+export function entity_action(custom: WalkerOS.AnyObject = {}) {
+  const event = getEvent('entity action');
+
+  return {
+    event: 'entity_action',
+    data: event.data,
+    ...custom,
+  };
+}
+
+export function purchase(custom: WalkerOS.AnyObject = {}) {
+  const event = getEvent('order complete');
+
+  return {
+    event: 'purchase',
+    transaction_id: event.data.id,
+    value: event.data.total,
+    tax: event.data.taxes,
+    shipping: event.data.shipping,
+    currency: 'EUR',
+    items: event.nested
+      .filter((item) => item.type === 'product')
+      .map((item) => ({
+        item_id: item.data.id,
+        item_name: item.data.name,
+        quantity: 1,
+      })),
+    ...custom,
+  };
+}
+
+export function add_to_cart(custom: WalkerOS.AnyObject = {}) {
+  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,
+      },
+    ],
+    ...custom,
+  };
+}

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

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

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

@@ -0,0 +1,68 @@
+import type { Mapping } from '@elbwalker/types';
+import type { DestinationGoogleGTM } from '../src';
+import { isObject } from '@elbwalker/utils';
+
+export const entity_action: DestinationGoogleGTM.EventConfig = {
+  name: 'entity_action',
+  data: {
+    map: {
+      data: 'data',
+    },
+  },
+};
+
+export const purchase: DestinationGoogleGTM.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: DestinationGoogleGTM.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 = {
+  entity: { action: entity_action },
+  order: { complete: purchase },
+  product: { add: add_to_cart },
+} satisfies Mapping.Config;

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

@@ -2,7 +2,8 @@ import type { WalkerOS } from '@elbwalker/types';
 import type { DestinationGoogleGTM } from '.';
 import { mockDataLayer } from '@elbwalker/jest/web.setup';
 import { elb, Walkerjs } from '@elbwalker/walker.js';
-import { createEvent } from '@elbwalker/utils';
+import { createEvent, getEvent } from '@elbwalker/utils';
+import { events, mapping } from '../examples';
 
 describe('destination google-tag-manager', () => {
   const w = window;
@@ -81,23 +82,27 @@ describe('destination google-tag-manager', () => {
     expect(mockDataLayer).toHaveBeenLastCalledWith(event);
   });
 
-  test('push mapping data', () => {
-    elb('walker destination', destination, {
-      mapping: {
-        entity: {
-          action: {
-            data: {
-              map: {
-                foo: { value: 'bar' },
-              },
-            },
-          },
-        },
-      },
-    });
+  test('event entity_action', () => {
+    const event = getEvent();
+    elb('walker destination', destination, { mapping: mapping.config });
+    elb(event);
+
+    expect(mockDataLayer).toHaveBeenLastCalledWith(events.entity_action());
+  });
+
+  test('event add_to_cart', () => {
+    const event = getEvent('product add');
+    elb('walker destination', destination, { mapping: mapping.config });
+    elb(event);
+
+    expect(mockDataLayer).toHaveBeenLastCalledWith(events.add_to_cart());
+  });
+
+  test('event purchase', () => {
+    const event = getEvent('order complete');
+    elb('walker destination', destination, { mapping: mapping.config });
     elb(event);
-    expect(w.dataLayer).toBeDefined();
 
-    expect(mockDataLayer).toHaveBeenLastCalledWith({ foo: 'bar' });
+    expect(mockDataLayer).toHaveBeenLastCalledWith(events.purchase());
   });
 });

packages/destinations/web/google-gtm/src/index.ts

@@ -1,4 +1,5 @@
 import type { Custom, Destination } from './types';
+import { isObject } from '@elbwalker/utils';
 
 const defaultDataLayer = 'dataLayer';
 const defaultDomain = 'https://www.googletagmanager.com/gtm.js?id=';
@@ -32,7 +33,13 @@ export const destinationGoogleGTM: Destination = {
 
   push(event, config, mapping, options = {}) {
     const func = config.fn || (window.dataLayer as unknown[]).push;
-    func(options.data ?? event);
+    const { data } = options;
+    const obj = { event: event.event }; // Use the name mapping by default
+
+    func({
+      ...obj,
+      ...(isObject(data) ? data : event),
+    });
   },
 };