1
|
|
|
import React, { Component } from 'react' |
2
|
|
|
import { Experiment, Variant } from 'react-split-testing' |
3
|
|
|
|
4
|
|
|
|
5
|
|
|
export default class App extends Component { |
6
|
|
|
constructor(props) { |
7
|
|
|
super(props) |
8
|
|
|
|
9
|
|
|
this.experiment = React.createRef() |
10
|
|
|
|
11
|
|
|
this.onClick = this.onClick.bind(this) |
12
|
|
|
this.onChoice = this.onChoice.bind(this) |
13
|
|
|
this.onRawChoice = this.onRawChoice.bind(this) |
14
|
|
|
} |
15
|
|
|
|
16
|
|
|
onClick() { |
17
|
|
|
const experiment = this.experiment.current |
18
|
|
|
|
|
|
|
|
19
|
|
|
alert( |
|
|
|
|
20
|
|
|
`Experiment name: "${experiment.getName()}"\n` + |
21
|
|
|
`Variant name: "${experiment.getActiveVariantName()}"` |
22
|
|
|
) |
23
|
|
|
} |
24
|
|
|
|
25
|
|
|
onChoice(experimentName, variantName) { |
26
|
|
|
console.log( |
27
|
|
|
`Experiment name: "${experimentName}"\n` + |
28
|
|
|
`Variant name: "${variantName}"` |
29
|
|
|
) |
30
|
|
|
} |
31
|
|
|
|
32
|
|
|
onRawChoice(experiment, variant) { |
33
|
|
|
console.log( |
34
|
|
|
`Experiment name: "${experiment.getName()}"\n` + |
35
|
|
|
`Variant name: "${variant.props.name}"\n` + |
36
|
|
|
`Variant weight: ${variant.props.weight}` |
37
|
|
|
) |
38
|
|
|
} |
39
|
|
|
|
40
|
|
|
render() { |
41
|
|
|
return ( |
42
|
|
|
<div className="App"> |
43
|
|
|
<div className="block"> |
44
|
|
|
<h1>Experiment #1</h1> |
45
|
|
|
<Experiment |
46
|
|
|
ref={this.experiment} |
47
|
|
|
name="Experiment #1" |
48
|
|
|
onChoice={this.onChoice} |
49
|
|
|
> |
50
|
|
|
<Variant name="A"> |
51
|
|
|
<div>Section A</div> |
52
|
|
|
<button onClick={this.onClick}>Click me</button> |
53
|
|
|
</Variant> |
54
|
|
|
<Variant name="B" weight={2}> |
55
|
|
|
<div>Section B</div> |
56
|
|
|
<button onClick={this.onClick}>Click me</button> |
57
|
|
|
</Variant> |
58
|
|
|
<Variant name="C"> |
59
|
|
|
<div>Section C</div> |
60
|
|
|
<button onClick={this.onClick}>Click me</button> |
61
|
|
|
</Variant> |
62
|
|
|
</Experiment> |
63
|
|
|
</div> |
64
|
|
|
|
65
|
|
|
<div className="block"> |
66
|
|
|
<h1>Experiment #2</h1> |
67
|
|
|
<span>(userIdentifier="something")</span> |
68
|
|
|
<Experiment |
69
|
|
|
name="Experiment #2" |
70
|
|
|
userIdentifier="something" |
71
|
|
|
onRawChoice={this.onRawChoice} |
72
|
|
|
> |
73
|
|
|
<Variant name="A"> |
74
|
|
|
<div>Section A</div> |
75
|
|
|
</Variant> |
76
|
|
|
<Variant name="B" weight={2}> |
77
|
|
|
<div>Section B</div> |
78
|
|
|
</Variant> |
79
|
|
|
</Experiment> |
80
|
|
|
</div> |
81
|
|
|
|
82
|
|
|
<div className="block"> |
83
|
|
|
<h1>Experiment #3</h1> |
84
|
|
|
<span>(variantName="B")</span> |
85
|
|
|
<Experiment name="Experiment #3" variantName="B"> |
86
|
|
|
<Variant name="A"> |
87
|
|
|
<div>Section A</div> |
88
|
|
|
</Variant> |
89
|
|
|
<Variant name="B"> |
90
|
|
|
<div>Section B</div> |
91
|
|
|
</Variant> |
92
|
|
|
</Experiment> |
93
|
|
|
</div> |
94
|
|
|
|
95
|
|
|
<a |
96
|
|
|
href="https://github.com/expert-m/react-split-testing/tree/master/examples/simple" |
97
|
|
|
target="_blank" |
98
|
|
|
rel="noopener noreferrer" |
99
|
|
|
className="link" |
100
|
|
|
>GitHub</a> |
101
|
|
|
</div> |
102
|
|
|
) |
103
|
|
|
} |
104
|
|
|
} |
105
|
|
|
|