Skip to content

Commit cd30313

Browse files
alexanderkirtzelalexanderkirtzel
committed
tagging demo with new version
1 parent b6b5e79 commit cd30313

File tree

2 files changed

+148
-132
lines changed

2 files changed

+148
-132
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,6 @@ typings/
9090
.idea
9191

9292
# Turbobuild
93-
.turbo
93+
.turbo
94+
95+
.DS_Store

‎apps/demos/tagging/index.html

Lines changed: 145 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -40,161 +40,175 @@
4040

4141
<script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio"></script>
4242

43-
<script
44-
async
45-
class="elbwalker"
46-
src="https://cdn.jsdelivr.net/npm/@elbwalker/walker.js@latest/dist/walker.js"
47-
></script>
48-
4943
<script type="module">
50-
window.elb = (...args) => {
51-
(window.elbLayer = window.elbLayer || []).push(...args);
52-
};
53-
54-
// Configuration
55-
elb('walker config', { tagging: 2 });
44+
// Consent management
45+
// This code simulates a CMPs functionality
5646

57-
// Utils
58-
window.utils = await import(
47+
const consentKey = 'consentState';
48+
const utils = await import(
5949
'https://cdn.jsdelivr.net/npm/@elbwalker/utils@latest/dist/index.mjs'
6050
);
6151

62-
// Start
63-
elb('walker run');
64-
65-
// Session handling
66-
const session = utils.sessionStart();
67-
if (session) elb('session start', session);
68-
69-
// Destination Console
70-
elb('walker destination', {
71-
push: console.log,
72-
});
73-
74-
// Destination GTM
75-
const gtm = (
76-
await import(
77-
'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-google-gtm@latest/dist/index.mjs'
78-
)
79-
).default;
80-
elb('walker destination', gtm, {
81-
loadScript: true,
82-
custom: {
83-
containerId: 'GTM-WCFR4W5',
84-
},
85-
});
86-
87-
// Destination Console Consent
88-
elb(
89-
'walker destination',
90-
{ push: (event) => console.log('CONSENT', event) },
91-
{ consent: { functional: true } },
92-
);
93-
94-
// Destination API
95-
const api = (
96-
await import(
97-
'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-api@latest/dist/index.mjs'
98-
)
99-
).default;
100-
elb('walker destination', api, {
101-
consent: { functional: true },
102-
custom: {
103-
// Server-side tagmanager
104-
url: 'https://server-side-tagging-ybbfvkxhia-ey.a.run.app/quokka',
105-
transport: 'beacon',
106-
},
107-
});
108-
109-
// Destination GA4
110-
const ga4 = (
111-
await import(
112-
'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-google-ga4@latest/dist/index.mjs'
113-
)
114-
).default;
115-
elb('walker destination', ga4, {
116-
consent: { marketing: true, ga4: true },
117-
custom: { measurementId: 'G-4WP1Y3GPLW' },
118-
loadScript: true,
119-
});
120-
121-
// Consent
122-
// Code snippets for consent choice
123-
// Simulate the CMPs functionality
12452
window.consentAccept = () => {
125-
window.utils.storageWrite('consentState', 'accepted');
126-
consentGranted();
127-
consentRefresh();
53+
// Save granted choice
54+
utils.storageWrite(consentKey, 'accepted');
55+
consentRefresh(true);
12856
};
12957
window.consentDeny = () => {
130-
window.utils.storageWrite('consentState', 'denied');
131-
consentDenied();
58+
// Save denied choice
59+
utils.storageWrite(consentKey, 'denied');
13260
consentRefresh();
13361
};
13462
window.consentReset = () => {
135-
window.utils.storageDelete('consentState');
63+
// Reset choice
64+
utils.storageDelete(consentKey);
13665
consentRefresh();
13766
};
13867

139-
window.consentGranted = () => {
140-
// Set session and device ids
141-
elb('walker user', getUser());
142-
143-
// Allow sending events to functional and marketing destinations
144-
elb('walker consent', { functional: true, marketing: true });
145-
};
146-
147-
window.consentDenied = () => {
148-
// Only set a random session id, but no persistant device id
149-
elb('walker user', { id: 'anonymous', device: undefined });
150-
151-
// Allow sending events to functional destinations at most
152-
elb('walker consent', { functional: true });
153-
};
154-
155-
function getUser() {
156-
const idKey = 'elb_user_id';
157-
const sessionKey = 'elb_user_session';
158-
const deviceKey = 'elb_user_device';
159-
var id = window.utils.storageRead(idKey);
160-
var session = window.utils.storageRead(sessionKey);
161-
var device = window.utils.storageRead(deviceKey);
162-
163-
if (!id) {
164-
id = window.utils.getId(5);
165-
window.utils.storageWrite(idKey, id);
166-
}
167-
168-
if (!session) {
169-
session = window.utils.getId(10);
170-
window.utils.storageWrite(sessionKey, session);
68+
// Code that gets called after a consent choice was made
69+
function consentCode(granted = false) {
70+
const functional = true;
71+
var marketing = false;
72+
73+
if (granted) {
74+
// User granted consent
75+
76+
// Set a user id (device and session ids are set by walker.js automatically)
77+
const key = 'elbUserId';
78+
const id =
79+
// Read existing id or generate and save a new one
80+
utils.storageRead(key) || utils.storageWrite(key, utils.getId(5));
81+
elb('walker user', { id });
82+
83+
marketing = true; // Granted marketing stage
84+
} else {
85+
// User declined consent
86+
87+
// Use an anonymous user id and reset others
88+
elb('walker user', {
89+
id: 'anonymous',
90+
device: undefined,
91+
session: undefined,
92+
});
17193
}
17294

173-
if (!device) {
174-
device = window.utils.getId(8);
175-
window.utils.storageWrite(deviceKey, device);
176-
elb('first visit', { device });
177-
}
178-
179-
return {
180-
id,
181-
session,
182-
device,
183-
};
95+
// Update walkers consent state
96+
elb('walker consent', { functional, marketing });
18497
}
18598

99+
// Update the consent state
186100
function consentRefresh() {
187-
var consentStateElem = document.getElementById('consent_state');
188-
var consentState =
189-
window.utils.storageRead('consentState') || 'unknown';
101+
// Look for a stored consent choice
102+
const consentState = utils.storageRead(consentKey);
190103

191-
if (consentState == 'accepted') consentGranted();
192-
if (consentState == 'denied') consentDenied();
104+
// If a choice was made execute the code
105+
if (consentState) consentCode(consentState == 'accepted');
193106

194-
consentStateElem.innerText = consentState;
107+
// Display the status
108+
document.getElementById('consent_state').innerText =
109+
consentState || 'unknown';
195110
}
196111

112+
// Check consent state initially
197113
consentRefresh();
114+
115+
// Make Utils globally available
116+
window.utils = utils;
117+
</script>
118+
119+
<script type="module">
120+
// elb
121+
window.elb = function () {
122+
(window.elbLayer = window.elbLayer || []).push(arguments);
123+
};
124+
125+
// Add a destination that logs events in the console
126+
elb('walker destination', {
127+
push: console.log,
128+
});
129+
130+
// Demo with GTM setup
131+
let gtm = new URL(document.location).searchParams.get('gtm'); // Option for custom Container
132+
if (gtm === '') gtm = 'GTM-WCFR4W5'; // Demo container
133+
if (gtm) {
134+
// Typical GTM install script
135+
(function (w, d, s, l, i) {
136+
w[l] = w[l] || [];
137+
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
138+
var f = d.getElementsByTagName(s)[0],
139+
j = d.createElement(s),
140+
dl = l != 'dataLayer' ? '&l=' + l : '';
141+
j.async = true;
142+
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
143+
f.parentNode.insertBefore(j, f);
144+
})(window, document, 'script', 'dataLayer', gtm);
145+
} else {
146+
// Demo with custom code setup
147+
148+
// Load walker.js
149+
const Walkerjs = await import(
150+
'https://cdn.jsdelivr.net/npm/@elbwalker/[email protected]/dist/index.mjs'
151+
);
152+
153+
// Create a walker.js instance with custom config
154+
window.walkerjs = Walkerjs.default({
155+
run: true, // Automatically start running
156+
session: {
157+
// Enable session detection and the usage of user ids
158+
consent: 'marketing', // Require marketing consent for storage access
159+
},
160+
});
161+
162+
// Change configuration via elb command
163+
elb('walker config', { tagging: 2 });
164+
165+
// Add a Console destination that requires functional consent
166+
elb(
167+
'walker destination',
168+
{ push: (event) => console.log('CONSENT', event) },
169+
{ consent: { functional: true } },
170+
);
171+
172+
// Disabled GTM destination
173+
// const destinationGTM = (
174+
// await import(
175+
// 'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-google-gtm@latest/dist/index.mjs'
176+
// )
177+
// ).default;
178+
// elb('walker destination', destinationGTM, {
179+
// loadScript: true,
180+
// custom: {
181+
// containerId: 'GTM-WCFR4W5',
182+
// },
183+
// });
184+
185+
// Destination API
186+
const api = (
187+
await import(
188+
'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-api@latest/dist/index.mjs'
189+
)
190+
).default;
191+
elb('walker destination', api, {
192+
consent: { functional: true },
193+
custom: {
194+
// Server-side Tag Manager
195+
url: 'https://server-side-tagging-ybbfvkxhia-ey.a.run.app/quokka',
196+
transport: 'beacon',
197+
},
198+
});
199+
200+
// Destination GA4
201+
const ga4 = (
202+
await import(
203+
'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-google-ga4@latest/dist/index.mjs'
204+
)
205+
).default;
206+
elb('walker destination', ga4, {
207+
consent: { marketing: true, ga4: true }, // Require consent
208+
custom: { measurementId: 'G-4WP1Y3GPLW' },
209+
loadScript: true,
210+
});
211+
}
198212
</script>
199213
</head>
200214
<body class="relative">

0 commit comments

Comments
 (0)