Merge pull request #478 from elbwalker/mapping-docs

Mapping docs
elbwalker · Dec 13, 2024 · a14c73c · a14c73c
2 parents 6739d88 + 8c00774
commit a14c73c
Show file tree

Hide file tree

Showing 18 changed files with 1,024 additions and 215 deletions.
diff --git a/packages/utils/src/__tests__/mapping.test.ts b/packages/utils/src/__tests__/mapping.test.ts
@@ -78,33 +78,35 @@ describe('getMappingEvent', () => {
 
   test('condition', () => {
     const mapping: Mapping.Config = {
-      pii: {
-        event: [
+      order: {
+        complete: [
           {
-            name: 'secret',
-            condition: (event) =>
-              !!(event as WalkerOS.PartialEvent).consent?.marketing,
+            condition: (event: WalkerOS.PartialEvent) =>
+              event.globals?.env === 'prod',
+            ignore: true,
           },
           {
-            name: 'fallback',
+            name: 'purchase',
           },
         ],
       },
     };
 
-    expect(getMappingEvent({ event: 'pii event' }, mapping)).toStrictEqual({
-      eventMapping: { name: 'fallback' },
-      mappingKey: 'pii event',
-    });
+    expect(getMappingEvent({ event: 'order complete' }, mapping)).toStrictEqual(
+      {
+        eventMapping: mapping.order!.complete[1],
+        mappingKey: 'order complete',
+      },
+    );
 
     expect(
       getMappingEvent(
-        { event: 'pii event', consent: { marketing: true } },
+        { event: 'order complete', globals: { env: 'prod' } },
         mapping,
       ),
     ).toStrictEqual({
-      eventMapping: mapping.pii!.event[0],
-      mappingKey: 'pii event',
+      eventMapping: mapping.order!.complete[0],
+      mappingKey: 'order complete',
     });
   });
 });

diff --git a/website/docs/destinations/google-ga4.mdx b/website/docs/destinations/google-ga4.mdx
@@ -7,6 +7,19 @@ import PackageLink from '/src/components/docs/package-link';
 import Link from '@docusaurus/Link';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { getEvent } from '@elbwalker/utils';
+import { DestinationContextProvider } from '@site/src/components/templates/destination';
+import {
+  GoogleGA4Init,
+  GoogleGA4OrderComplete,
+  GoogleGA4ProductAdd,
+} from '@site/src/components/templates/mappings/google-ga4';
+import destinationGoogleGA4 from '@elbwalker/destination-web-google-ga4';
+
+<DestinationContextProvider
+  destination={destinationGoogleGA4}
+  fnName='gtag'
+>
 
 <PackageLink
   browser="@elbwalker/destination-web-google-ga4"
@@ -77,82 +90,7 @@ ID</Link>.
 
 #### Example
 
-```js
-const config = {
-  custom: {
-    measurementId: 'G-XXXXXXXXXX', // Required
-    debug: false,
-    include: ['globals'],
-    pageview: false,
-    data: {
-      map: {
-        currency: {
-          value: 'EUR',
-          key: 'data.currency',
-        },
-      },
-    },
-    server_container_url: 'https://server.example.com',
-    snakeCase: true,
-    transport_url: 'https://www.google-analytics.com/g/collect',
-  },
-  mapping: {
-    // entity: { action: { name: 'custom_name' } },
-    page: { view: { ignore: true } }, // Ignore page view events
-    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' },
-                  },
-                },
-              ],
-            },
-          },
-        },
-      },
-    },
-    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) => entity.type === 'product',
-                  map: {
-                    item_id: 'data.id',
-                    item_name: 'data.name',
-                    quantity: { key: 'data.quantity', value: 1 },
-                  },
-                },
-              ],
-            },
-          },
-        },
-      },
-    },
-  },
-};
-```
+<GoogleGA4Init />
 
 ### Custom
 
@@ -205,9 +143,24 @@ The properties get prefixed with the group's name and underscore (like
 `globals_lang` for `{ globals: { lang: 'de' } }`). Custom parameters will
 override `include` values with the same key.
 
+## Mapping
+
+The `mapping` examples are using the
+live&nbsp;<Link to="#configuration">configuration</Link>.
+
+### add_to_cart
+
+<GoogleGA4ProductAdd />
+
+### purchase
+
+<GoogleGA4OrderComplete />
+
 :::info
 
 If you need professional support with your walkerOS implementation, check out
 our&nbsp;<Link to="/services">services</Link>.
 
 :::
+
+</DestinationContextProvider>
diff --git a/website/docs/sources/walkerjs/tagging.mdx b/website/docs/sources/walkerjs/tagging.mdx
@@ -5,6 +5,7 @@ description: How to tag a page with walker.js
 ---
 
 import Link from '@docusaurus/Link';
+import PromotionLive from '@site/src/components/templates/promotionLive';
 
 You can implement all sorts of front-end user events with walker.js. From
 product and UX events like promotion views, filter and search usage to
@@ -16,6 +17,8 @@ mapping definitions to any destinations.
 
 Tag a page...
 
+{/* <PromotionLive /> */}
+
 ```html
 <!-- Generic usage -->
 <div