-
+
Quick and simple tracking setup
-
Click a button to trigger more events.
-
diff --git a/website/src/components/walkerjs.tsx b/website/src/components/walkerjs.tsx
index a03f7970..7924912a 100644
--- a/website/src/components/walkerjs.tsx
+++ b/website/src/components/walkerjs.tsx
@@ -1,24 +1,63 @@
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
-import { elb, Walkerjs } from '@elbwalker/walker.js';
+import type { Elb, SourceWalkerjs } from '@elbwalker/walker.js';
+import { createSourceWalkerjs } from '@elbwalker/walker.js';
import { destinationWebAPI } from '@elbwalker/destination-web-api';
+import { taggingRegistry } from '@site/src/components/organisms/tagging';
import Tagger from '@elbwalker/tagger';
-import { taggingRegistry } from './organisms/tagging';
+
+declare global {
+ interface Window {
+ alst: Elb.Fn;
+ alstLayer: Elb.Layer;
+ runnerjs: SourceWalkerjs.Instance;
+ }
+}
export const DataCollection = () => {
const location = useLocation();
useEffect(() => {
+ // Setup demo walkerjs
if (!window.walkerjs) {
- // Setup walkerjs
+ const { elb, instance } = createSourceWalkerjs({
+ run: true,
+ pageview: false,
+ session: false,
+ consent: { functional: true, marketing: true },
+ user: { session: 's3ss10n' },
+ });
+
window.elb = elb;
- window.walkerjs = Walkerjs({
+ window.walkerjs = instance;
+
+ // Destination Preview
+ elb('walker destination', {
+ push: (e) => {
+ const previewId = e.context?.previewId?.[0];
+ if (previewId) taggingRegistry.get(String(previewId))?.(e);
+ },
+ });
+ } else {
+ // new page load
+ window.elb('walker run');
+ }
+
+ // Setup internal walkerjs
+ if (!window.runnerjs) {
+ window.alstLayer = [];
+ const { elb: alst, instance } = createSourceWalkerjs({
default: true,
session: {},
+ prefix: 'data-alst',
+ elbLayer: window.alstLayer,
});
+ window.alst = alst;
+ window.runnerjs = instance;
+
// Destination Lama
- elb('walker destination', destinationWebAPI, {
+ alst('walker destination', destinationWebAPI, {
custom: {
url: 'https://moin.p.elbwalkerapis.com/lama',
transform: (event) => {
@@ -34,27 +73,21 @@ export const DataCollection = () => {
});
// Destination API
- elb('walker destination', destinationWebAPI, {
+ alst('walker destination', destinationWebAPI, {
custom: {
url: 'https://europe-west1-walkeros-firebase-stack.cloudfunctions.net/ingest',
transport: 'beacon',
},
});
-
- // Destination Preview
- elb('walker destination', {
- push: (e) => {
- const previewId = e.context?.previewId?.[0];
- if (previewId) taggingRegistry.get(String(previewId))?.(e);
- },
- });
} else {
// new page load
- elb('walker run');
+ window.alst('walker run');
}
}, [location]);
return null;
};
-export const tagger = Tagger({ prefix: 'data-alst' });
+export const tagger: ReturnType
= Tagger({
+ prefix: 'data-alst',
+});
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 199dbd06..bc91b1c2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -73,9 +73,9 @@
html[data-theme='dark'] {
--color-primary: var(--color-elbwalker);
- --color-primary-content: var(--color-gray-900);
- --color-secondary: var(--color-gray-400);
- --color-secondary-content: var(--color-gray-900);
+ --color-primary-content: var(--color-gray-50);
+ --color-secondary: var(--color-gray-700);
+ --color-secondary-content: var(--color-gray-50);
--color-base-100: var(--color-gray-900);
--color-base-200: var(--color-gray-800);
--color-base-300: var(--color-gray-700);
diff --git a/website/src/css/event-flow.scss b/website/src/css/event-flow.scss
new file mode 100644
index 00000000..285d2ad3
--- /dev/null
+++ b/website/src/css/event-flow.scss
@@ -0,0 +1,13 @@
+.event-flow {
+ .dui-card-body {
+ padding: 1rem;
+ }
+
+ h3 {
+ margin: 0;
+ }
+
+ p {
+ margin-bottom: 0.25rem;
+ }
+}
diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx
deleted file mode 100644
index 6259f9a1..00000000
--- a/website/src/pages/playground.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { JSX } from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import { PromotionReady } from '@site/src/components/templates/promotionLive';
-
-export default function Playground(): JSX.Element {
- const { siteConfig } = useDocusaurusContext();
- return (
-
-
-
- );
-}
diff --git a/website/src/pages/playground/index.tsx b/website/src/pages/playground/index.tsx
new file mode 100644
index 00000000..5898b131
--- /dev/null
+++ b/website/src/pages/playground/index.tsx
@@ -0,0 +1,106 @@
+import { JSX } from 'react';
+import Layout from '@theme/Layout';
+import EventFlow from '@site/src/components/organisms/eventFlow';
+import '@site/src/css/event-flow.scss';
+
+const exampleCode = `
+
+ 
+
+
+
+
+ Everyday Ruck Snack
+
+
+
+
+
+
+ € 2.50 € 3.14
+
+
+
+
+
+
+