example

Author: alexanderkirtzel

website/docs/getting_started/event-model.mdx

@@ -70,8 +70,8 @@ static, their content can be defined dynamically with different value types.
     // All nested entities within the main entity
     { type: 'github', data: { repo: 'walkerOS' } },
   ],
-  consent: { functional: true }, // Status of the granted consent state(s)
-  id: '1647261462000-01b5e2-5', // Timestamp, group & count of the event
+  consent: { functional: true, marketing: true }, // Status of the granted consent state(s)
+  id: '1647261462000-01b5e2-2', // Timestamp, group & count of the event
   trigger: 'visible', // Name of the trigger that fired
   entity: 'promotion', // The entity name involved in the event
   action: 'view', // The specific action performed on the entity
@@ -120,20 +120,21 @@ is a `page view`, `session start`, `product visible`, or `order complete`.
 
 <Link to="/docs/sources/walkerjs/tagging#data">Data properties</Link>
 describe the entity in **more detail**. Depending on the entity (e.g. _product_,
-_order_, _content_) they can vary and provide specific insights relevant to the interaction.
+_order_, _content_) they can vary and provide specific insights relevant to the
+interaction.
 
 ### Context
 
-<Link to="/docs/sources/walkerjs/tagging#context">Context</Link> refers to the **state**
-or **environment** in which the event was triggered. It could be as simple as a page
-position or as complex as the logical stage in a user journey, like a shopping journey
-from inspiration to checkout stage.
+<Link to="/docs/sources/walkerjs/tagging#context">Context</Link> refers to the
+**state** or **environment** in which the event was triggered. It could be as
+simple as a page position or as complex as the logical stage in a user journey,
+like a shopping journey from inspiration to checkout stage.
 
 ### Globals
 
-<Link to="/docs/sources/walkerjs/tagging#globals">Globals</Link> describe the **overall
-state** influencing events or user behavior. These might include the theme used,
-page type for web, or cart value.
+<Link to="/docs/sources/walkerjs/tagging#globals">Globals</Link> describe the
+**overall state** influencing events or user behavior. These might include the
+theme used, page type for web, or cart value.
 
 ### Custom
 
@@ -177,9 +178,9 @@ interface User extends Properties {
 
 ### Consent
 
-<Link to="/docs/consent_management/overview">Consent</Link> captures the **permissions
-granted** by the user, which is crucial for subsequent data processing and helpful
-to comply with privacy regulations.
+<Link to="/docs/consent_management/overview">Consent</Link> captures the
+**permissions granted** by the user, which is crucial for subsequent data
+processing and helpful to comply with privacy regulations.
 
 ### Source
 

website/src/components/molecules/codeBox.tsx

@@ -156,9 +156,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
         : formattedValue.replace(/^return\s+/, '').replace(/[\r\n]+$/, '');
 
       // Clean up the formatted value
-      finalValue = finalValue
-        .trim()
-        .replace(/^\(|\)$/g, ''); // Remove parentheses
+      finalValue = finalValue.trim().replace(/^\(|\)$/g, ''); // Remove parentheses
 
       // Only remove indentation if it looks like HTML
       if (finalValue.match(/<[^>]+>/)) {

website/src/components/molecules/preview.tsx

@@ -69,7 +69,7 @@ export const Preview: FC<PreviewProps> = ({
         initPreview(previewRef.current);
       },
       200,
-      false,
+      true,
     ),
     [initPreview],
   );
@@ -148,4 +148,4 @@ export const Preview: FC<PreviewProps> = ({
   );
 };
 
-export default Preview; 
+export default Preview;

website/src/components/organisms/eventFlow.tsx

@@ -1,65 +1,114 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import type { Mapping, WalkerOS } from '@elbwalker/types';
-import type { DestinationWeb } from '@elbwalker/walker.js';
-import { elb } from '@elbwalker/walker.js';
-import CodeBox from '@site/src/components/molecules/codeBox';
+import CodeBox, { formatValue } from '@site/src/components/molecules/codeBox';
 import Preview from '@site/src/components/molecules/preview';
 import FullScreenMode from '@site/src/components/organisms/fullScreenMode';
-import {
-  resetTypewriter,
-  TypewriterOptions,
-} from '@site/src/components/molecules/typewriterCode';
 import { parseInput } from '@site/src/components/molecules/codeBox';
 import '@site/src/css/highlighting.scss';
-import { destinationPush } from '@elbwalker/utils';
+import {
+  destinationPush,
+  debounce,
+  isString,
+  tryCatchAsync,
+} from '@elbwalker/utils';
 import { taggingRegistry } from './tagging';
 
 interface EventFlowProps {
   code: string;
+  mapping?: Mapping.Config;
   height?: string;
   previewId?: string;
-  fn?: (event: WalkerOS.Event) => WalkerOS.Event;
-  typewriter?: TypewriterOptions;
-  destination: DestinationWeb.Destination;
-  initialConfig?: WalkerOS.AnyObject;
-  fnName?: string;
+  eventFn?: (event: WalkerOS.Event) => WalkerOS.Event;
+  resultFn?: (output: unknown) => string;
 }
 
 export const EventFlow: FC<EventFlowProps> = ({
   code,
+  mapping,
   height = '400px',
   previewId = 'preview',
-  fn,
-  typewriter,
-  destination,
-  initialConfig = {},
-  fnName,
+  eventFn,
+  resultFn,
 }) => {
   const [htmlCode, setHtmlCode] = useState(code.trim());
-  const [eventCode, setEventCode] = useState<string>('');
-  const [mappingCode, setMappingCode] = useState<string>('');
-  const [commandCode, setCommandCode] = useState<string>('');
-  const [isPaused, setIsPaused] = useState(false);
-  const [customConfig, setConfig] = useState<WalkerOS.AnyObject>(initialConfig);
-  const [currentEvent, setCurrentEvent] = useState<WalkerOS.Event | null>(null);
+  const [eventCode, setEventCode] = useState<string>(undefined);
+  const [mappingCode, setMappingCode] = useState<string | undefined>(
+    isString(mapping) ? mapping : formatValue(mapping),
+  );
+  const [resultCode, setResultCode] = useState<string>('');
 
   useEffect(() => {
-    setEventCode('');
-    setCommandCode('');
+    setEventCode(undefined);
+    setResultCode('');
   }, [htmlCode]);
 
+  const updateHtmlCode = useCallback(debounce(setHtmlCode, 600, true), []);
+
+  const updateEventCode = useCallback(
+    debounce(
+      (code: string) => {
+        setEventCode(code);
+      },
+      1,
+      true,
+    ),
+    [],
+  );
+  const updateMappingCode = useCallback(
+    debounce(
+      (code: string) => {
+        setMappingCode(parseInput(code));
+      },
+      600,
+      true,
+    ),
+    [],
+  );
+
+  const createResult = useRef(
+    debounce(async (eventStr: string, mappingStr: string) => {
+      tryCatchAsync(
+        async () => {
+          if (!eventStr) return;
+
+          const event = parseInput(eventStr);
+          const mapping = parseInput(mappingStr);
+          await destinationPush(
+            { hooks: {}, consent: event.consent || {} } as never, // Fake instance
+            {
+              push: (event, config, mapping, options) => {
+                const value = options.data || event;
+
+                setResultCode(formatValue(resultFn ? resultFn(value) : value));
+              },
+              config: {
+                mapping,
+              },
+            },
+            { ...event },
+          );
+        },
+        (err) => {
+          setResultCode(formatValue({ error: String(err) }));
+        },
+      )();
+    }, 600),
+  ).current;
+
+  useEffect(() => {
+    createResult(eventCode, mappingCode);
+  }, [eventCode, mappingCode]);
+
   useEffect(() => {
     taggingRegistry.add(previewId, (event) => {
       delete event.context.previewId;
-      const processedEvent = fn ? fn(event) : event;
-      setCurrentEvent(processedEvent);
-      setEventCode(JSON.stringify(processedEvent, null, 2));
+      updateEventCode(JSON.stringify(eventFn ? eventFn(event) : event));
     });
 
     return () => {
       taggingRegistry.delete(previewId);
     };
-  }, [previewId, fn]);
+  }, [previewId]);
 
   const boxClassNames = `flex-1 resize flex flex-col max-h-96 lg:max-h-full`;
 
@@ -77,11 +126,8 @@ export const EventFlow: FC<EventFlowProps> = ({
             showReset={true}
             onReset={() => {
               setHtmlCode(code.trim());
-              resetTypewriter();
-              setIsPaused(false);
             }}
             className={boxClassNames}
-            typewriter={typewriter}
           />
         </div>
 
@@ -97,43 +143,25 @@ export const EventFlow: FC<EventFlowProps> = ({
           <CodeBox
             label="Event"
             value={eventCode || 'No event yet.'}
-            disabled={true}
+            onChange={setEventCode}
             isConsole={true}
             className={boxClassNames}
-            showReset={true}
-            onReset={() => setEventCode('')}
           />
         </div>
 
         <div className="w-1/3 flex-shrink-0 snap-start">
           <CodeBox
             label="Mapping"
-            value={`{
-  "product": {
-    "view": {
-      "name": "product.name",
-      "price": "product.price"
-    }
-  }
-}`}
-            onChange={() => {}}
+            value={formatValue(mappingCode)}
+            onChange={setMappingCode}
             className={boxClassNames}
           />
         </div>
 
         <div className="w-1/3 flex-shrink-0 snap-start">
           <CodeBox
-            label="Command"
-            value={`{
-  "event": "product view",
-  "data": {
-    "name": "Everyday Ruck Snack",
-    "price": 2.50
-  },
-  "context": {
-    "previewId": "preview"
-  }
-}`}
+            label="Result"
+            value={resultCode || 'No result yet.'}
             disabled={true}
             isConsole={true}
             className={boxClassNames}

website/src/components/walkerjs.tsx

@@ -22,6 +22,7 @@ export const DataCollection = () => {
     if (!window.walkerjs) {
       const { elb, instance } = createSourceWalkerjs({
         run: true,
+        pageview: false,
         session: {},
       });
 

website/src/pages/event-flow/index.tsx

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
 import Layout from '@theme/Layout';
 import EventFlow from '@site/src/components/organisms/eventFlow';
-import { destinationWebAPI } from '@elbwalker/destination-web-api';
 
 const exampleCode = `<div
   data-elb="product"
-  data-elbaction="load:visible"
+  data-elbaction="load:view"
   class="dui-card w-80 bg-base-100 shadow-xl mx-auto"
 >
   <figure class="relative">
@@ -40,29 +39,38 @@ export default function EventFlowPage(): JSX.Element {
     <Layout title="Event Flow" description="Test the event flow component">
       <EventFlow
         code={exampleCode}
+        mapping={{
+          product: {
+            view: {
+              name: 'view_item',
+              data: {
+                map: {
+                  event: 'event',
+                  price: { value: '100' },
+                },
+              },
+            },
+            add: {
+              name: 'add_to_cart',
+              data: {
+                map: {
+                  event: 'event',
+                  price: { value: '100' },
+                },
+              },
+            },
+          },
+        }}
         height="640px"
         previewId="event-flow"
-        fn={(event) => {
-          delete event.globals;
+        eventFn={(event) => {
           delete event.custom;
           return event;
         }}
-        destination={destinationWebAPI}
-        initialConfig={{
-          custom: {
-            url: 'https://moin.p.elbwalkerapis.com/lama',
-            transform: (event) => {
-              return JSON.stringify({
-                ...event,
-                ...{
-                  projectId: 'RQGM6XJ',
-                },
-              });
-            },
-            transport: 'xhr',
-          },
+        resultFn={(output) => {
+          return `dataLayer.push(${JSON.stringify(output, null, 2)});`;
         }}
       />
     </Layout>
   );
-} 
+}