Skip to content

Commit 468fa3a

Browse files
tyiuhctyiuhc
authored
feat: WebExperiment class (#152)
1 parent ccdcdca commit 468fa3a

File tree

15 files changed

+1113
-943
lines changed

15 files changed

+1113
-943
lines changed

‎packages/experiment-tag/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
## Overview
44

5-
This is the Web Experimentation SDK for Amplitude Experiment. Currently, only split-URL experiments are supported.
5+
This is the Web Experimentation SDK for Amplitude Experiment.
66

77
## Generate example
88

99
To generate an example snippet with custom flag configurations:
10-
1. Set `apiKey` (your Amplitude Project API key) and `initialFlags` in `example/build_example.js`
10+
1. Set `apiKey` (your Amplitude Project API key), `initialFlags` and `serverZone` in `example/build_example.js`
1111
2. Run `yarn build` to build minified UMD `experiment-tag.umd.js` and example `script.js`
1212

1313
To test the snippet's behavior on web pages relevant to your experiment, the pages should:

‎packages/experiment-tag/example/build_example.js‎

Lines changed: 154 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,168 @@
11
const fs = require('fs');
2-
const apiKey = 'a6dd847b9d2f03c816d4f3f8458cdc1d';
2+
const apiKey = 'API_KEY';
3+
const serverZone = 'SERVER_ZONE';
34
const initialFlags = [
45
{
5-
"key": "test",
6-
"metadata": {
7-
"deployed": true,
8-
"evaluationMode": "local",
9-
"experimentKey": "exp-1",
10-
"flagType": "experiment",
11-
"flagVersion": 20,
12-
"deliveryMethod": 'web',
13-
"urlMatch": [
14-
"http://localhost:63342/experiment-js-client/packages/experiment-tag/example/control.html/"
15-
]
6+
key: 'test',
7+
metadata: {
8+
deployed: true,
9+
evaluationMode: 'remote',
10+
flagType: 'experiment',
11+
flagVersion: 1,
12+
deliveryMethod: 'web',
1613
},
17-
"segments": [
14+
segments: [
1815
{
19-
"metadata": {
20-
"segmentName": "All Other Users"
16+
conditions: [
17+
[
18+
{
19+
op: 'regex does not match',
20+
selector: ['context', 'page', 'url'],
21+
values: ['.*test-page-1.*'],
22+
},
23+
],
24+
],
25+
metadata: {
26+
segmentName: 'Page not targeted',
27+
trackExposure: false,
28+
},
29+
variant: 'off',
30+
},
31+
{
32+
metadata: {
33+
segmentName: 'All Other Users',
2134
},
22-
"variant": "treatment"
23-
}
35+
variant: 'treatment',
36+
},
2437
],
25-
"variants": {
26-
"control": {
27-
"key": "control",
28-
"payload": [
38+
variants: {
39+
control: {
40+
key: 'control',
41+
payload: [],
42+
value: 'control',
43+
},
44+
off: {
45+
key: 'off',
46+
metadata: {
47+
default: true,
48+
},
49+
},
50+
treatment: {
51+
key: 'treatment',
52+
payload: [
2953
{
30-
"action": "redirect",
31-
"data": {
32-
"url": "http://localhost:63342/experiment-js-client/packages/experiment-tag/example/control.html"
33-
}
34-
}
54+
action: 'mutate',
55+
data: {
56+
mutations: [
57+
{
58+
action: 'append',
59+
attribute: 'style',
60+
metadata: {
61+
type: 'color',
62+
value: 'rgba(37, 54, 175, 1)',
63+
},
64+
selector: '.hidden .text-xl',
65+
value: ';color:rgba(37, 54, 175, 1) !important',
66+
},
67+
{
68+
action: 'set',
69+
attribute: 'html',
70+
metadata: {
71+
type: 'text',
72+
value: 'test-1 value',
73+
},
74+
selector: '.hidden .text-xl',
75+
value: 'test-1 value',
76+
},
77+
],
78+
},
79+
},
3580
],
36-
"value": "control"
81+
value: 'treatment',
3782
},
38-
"off": {
39-
"key": "off",
40-
"metadata": {
41-
"default": true
42-
}
83+
},
84+
},
85+
{
86+
key: 'test-2',
87+
metadata: {
88+
deployed: true,
89+
evaluationMode: 'local',
90+
flagType: 'experiment',
91+
flagVersion: 1,
92+
deliveryMethod: 'web',
93+
},
94+
segments: [
95+
{
96+
conditions: [
97+
[
98+
{
99+
op: 'regex does not match',
100+
selector: ['context', 'page', 'url'],
101+
values: ['.*test-page-2.*'],
102+
},
103+
],
104+
],
105+
metadata: {
106+
segmentName: 'Page not targeted',
107+
trackExposure: false,
108+
},
109+
variant: 'off',
110+
},
111+
{
112+
metadata: {
113+
segmentName: 'All Other Users',
114+
},
115+
variant: 'treatment',
116+
},
117+
],
118+
variants: {
119+
control: {
120+
key: 'control',
121+
payload: [],
122+
value: 'control',
43123
},
44-
"treatment": {
45-
"key": "treatment",
46-
"payload": [
124+
off: {
125+
key: 'off',
126+
metadata: {
127+
default: true,
128+
},
129+
},
130+
treatment: {
131+
key: 'treatment',
132+
payload: [
47133
{
48-
"action": "redirect",
49-
"data": {
50-
"url": "http://localhost:63342/experiment-js-client/packages/experiment-tag/example/treatment.html?param3=c"
51-
}
52-
}
134+
action: 'mutate',
135+
data: {
136+
mutations: [
137+
{
138+
action: 'append',
139+
attribute: 'style',
140+
metadata: {
141+
type: 'color',
142+
value: 'rgba(37, 54, 175, 1)',
143+
},
144+
selector: '.hidden .text-xl',
145+
value: ';color:rgba(37, 54, 175, 1) !important',
146+
},
147+
{
148+
action: 'set',
149+
attribute: 'html',
150+
metadata: {
151+
type: 'text',
152+
value: 'test-2 value',
153+
},
154+
selector: '.hidden .text-xl',
155+
value: 'test-2 value',
156+
},
157+
],
158+
},
159+
},
53160
],
54-
"value": "treatment"
55-
}
56-
}
57-
}
58-
]
161+
value: 'treatment',
162+
},
163+
},
164+
},
165+
];
59166

60167
fs.readFile('dist/experiment-tag.umd.js', 'utf8', (err, data) => {
61168
if (err) {
@@ -66,7 +173,8 @@ fs.readFile('dist/experiment-tag.umd.js', 'utf8', (err, data) => {
66173
// Perform string replacements
67174
const modifiedData = data
68175
.replace(/{{DEPLOYMENT_KEY}}/g, apiKey)
69-
.replace(/"{{INITIAL_FLAGS}}"/g, `'${JSON.stringify(initialFlags)}'`);
176+
.replace(/"{{INITIAL_FLAGS}}"/g, `'${JSON.stringify(initialFlags)}'`)
177+
.replace(/{{SERVER_ZONE}}/g, serverZone);
70178

71179
// Write the modified content to a new file
72180
fs.writeFile('example/script.js', modifiedData, 'utf8', (err) => {

‎packages/experiment-tag/example/control.html‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎packages/experiment-tag/example/css/recipe-styles.css‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
 (0)