/
ab.tsx
169 lines (162 loc) · 6.74 KB
/
ab.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import React, { useState } from 'react';
import { ABProvider, Experiment, Variant } from '../src/components/ab/ab';
import { parseCookies } from 'nookies';
import styles from './ab.module.scss';
import { GetServerSidePropsContext } from 'next';
import Head from 'next/head';
interface Props {
cookies: { [cookieName: string]: string };
}
export const metaTitle = 'A/B';
export const metaDescription = 'A/B, used to do multi-variate testing';
function Demo(props: Props) {
const [cssVariant, setCssVariant] = useState(null);
function handleRunExperiment(experimentName, variantName) {
console.log(
`Experiment [${experimentName}] change to variant [${variantName}]`
);
setCssVariant(variantName);
}
return (
<div className={styles.ab}>
<Head>
<title>
{metaTitle} - Design System - Het Financieele Dagblad
</title>
<meta name="description" content={metaDescription} />
<meta property="og:title" content={metaTitle} />
<meta property="og:description" content={metaDescription} />
<meta property="twitter:title" content={metaTitle} />
<meta
property="twitter:description"
content={metaDescription}
/>
</Head>
<ABProvider initialState={props.cookies}>
<Experiment
name="ab-headline-demo"
debugUriParam="debugAB=true"
>
<Variant name="headline-variant-1">
<h1
className={
cssVariant ||
`css-variant-${
parseInt(props.cookies['ab-color-demo']) + 1
}`
}
>
Headline variant 1
</h1>
</Variant>
<Variant name="headline-variant-2">
<h1
className={
cssVariant ||
`css-variant-${
parseInt(props.cookies['ab-color-demo']) + 1
}`
}
>
Headline variant 2
</h1>
</Variant>
<Variant name="headline-variant-3">
<h1
className={
cssVariant ||
`css-variant-${
parseInt(props.cookies['ab-color-demo']) + 1
}`
}
>
Headline variant 3
</h1>
</Variant>
<Variant name="headline-variant-4">
<h1
className={
cssVariant ||
`css-variant-${
parseInt(props.cookies['ab-color-demo']) + 1
}`
}
>
Headline variant 4
</h1>
</Variant>
</Experiment>
<p>
Above headline is wrapped in an experiment. The possible
outcomes are the following with varying colors. Each of the
headlines can be any of any of the colors shown below.
</p>
<ul>
<li className="css-variant-1">Headline variant 1</li>
<li className="css-variant-2">Headline variant 2</li>
<li className="css-variant-3">Headline variant 3</li>
<li className="css-variant-4">Headline variant 4</li>
</ul>
<p>
Once you visit this page a variant will be chosen (
<strong>client-side</strong>) and the value set will be set
in a cookie. This makes sure that your subsequent visits
will show you the same outcome. If you want to re-roll the
outcome you can simply remove the cookie and revisit the
page.
</p>
<p>
You can also turn on the debug settings by adding `
<a href="?debugAB=true">debugAB=true</a>` as URL parameter
to the URL. This gives you buttons at the bottom of the page
which allow you to change to specific variants of the
experiment(s). You can also remove the cookie for an
experiment using the debug options (x-icon on the options
page).
</p>
<p>
Once the cookie has been set it is available{' '}
<strong>server-side</strong>. This allows us to pre-render
the chosen variant on the server-side. Giving the user a
faster first-meaningful-paint upon subsequent visits. You
can check this fact by opening the source of this page.
</p>
<Experiment
name="ab-color-demo"
debugUriParam="debugAB=true"
onRunExperiment={handleRunExperiment}
>
<Variant name="css-variant-1" />
<Variant name="css-variant-2" />
<Variant name="css-variant-3" />
<Variant name="css-variant-4" />
</Experiment>
<h2>Usage:</h2>
<textarea
readOnly={true}
value={`import { Experiment, Variant, ABProvider } from "@fdmg/design-system/components/ab/ab";
...
<ABProvider>
<Experiment
name="globally-unique-experiment-name"
debugUriParam="ABdebug=true"
onClick={console.log}
onRunExperiment={console.log}
>
<Variant name="A" onClick={console.log}>
<h1>Headline 1</h1>
</Variant>
<Variant name="B" onClick={console.log}>
<h1>Headline 2</h1>
</Variant>
</Experiment>
</ABProvider>`}
/>
</ABProvider>
</div>
);
}
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return { props: { cookies: parseCookies(ctx) } };
}
export default Demo;