Skip to content
This repository was archived by the owner on Jun 21, 2023. It is now read-only.

Commit 7225b0f

Browse files
event tracking example
1 parent 22af783 commit 7225b0f

File tree

5 files changed

+710
-2
lines changed

5 files changed

+710
-2
lines changed

examples/audience-targeting/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Audience targeting example using javascript sdk",
55
"main": "index.js",
66
"scripts": {
7-
"compile": "mkdir dist && sed \"s/{{OPTY_SDK_KEY}}/$OPTY_SDK_KEY/g\" index.html > dist/index.html",
7+
"compile": "mkdir -p dist && sed \"s/{{OPTY_SDK_KEY}}/$OPTY_SDK_KEY/g\" index.html > dist/index.html",
88
"start": "npm run compile && serve ./dist",
99
"test": "echo \"Error: no test specified\" && exit 1"
1010
},

examples/event-tracking/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="shortcut icon" href="">
7+
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/design.optimizely.com/oui/latest/styles.css">
8+
<style>
9+
body { padding: 30px; }
10+
</style>
11+
<title>JS SDK Event Tracking</title>
12+
</head>
13+
<body>
14+
<h1 id="title">Event Tracking Example</h1>
15+
<p>If you're using Chrome, open up the network tab (cmd + option + i), then click the button.</p>
16+
<p>You should see </p>
17+
<button id="button">Click me</button>
18+
<script src="https://unpkg.com/@optimizely/optimizely-sdk/dist/optimizely.browser.umd.min.js"></script>
19+
<script>
20+
const user = {
21+
id: '1',
22+
city: 'Austin',
23+
};
24+
const optimizely = window.optimizelySdk.createInstance({
25+
sdkKey: '{{OPTY_SDK_KEY}}',
26+
});
27+
optimizely.onReady().then(() => {
28+
const buttonEl = document.getElementById('button');
29+
30+
buttonEl.addEventListener('click', () => {
31+
// Custom audience attributes (used for audience targeting)
32+
// https://docs.developers.optimizely.com/full-stack/docs/define-attributes
33+
const audienceAttributes = {
34+
city: user.city,
35+
};
36+
37+
// Additional event meta-data
38+
// https://docs.developers.optimizely.com/full-stack/docs/include-event-tags
39+
const eventTags = {
40+
demo: 'event tracking',
41+
user_agent: window.navigator.userAgent,
42+
};
43+
44+
optimizely.track('Example Button Clicked', user.id, audienceAttributes, eventTags);
45+
});
46+
});
47+
</script>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)