Skip to content

Commit 3794bd6

Browse files
hudoviskhudovisk
committed
feat: add Multivariate Test
Squashed commit of the following: commit 210940d035f16a9d1dd136cb7744b9ef884897d8 Author: Hudo Assenco <hudo.assenco@gmail.com> Date: Tue Oct 13 15:56:01 2020 -0300 docs: add @kelvinmaues as a contributor commit 457c4fac8a99d469830abba0257c4427e6d854a3 Author: Hudo Assenco <hudo.assenco@gmail.com> Date: Tue Oct 13 15:53:19 2020 -0300 build: remove unnecessary files commit 0a0d5a1 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Mon Oct 12 12:18:15 2020 -0300 Add lib to git ignore commit 2f92156 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Mon Oct 12 12:08:35 2020 -0300 Replace correct markdown to image commit 430fa3a Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Mon Oct 12 12:05:49 2020 -0300 Add a new test to multivariate commit 1587714 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Mon Oct 12 11:55:36 2020 -0300 Add the documentation about the multivariante test and how to use it commit 5bd2eb8 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Mon Oct 12 11:34:46 2020 -0300 Add the feature to allow multivariate testing with variants commit decae29 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Wed Sep 16 11:26:09 2020 -0300 Removing prop types out of the component commit 602d59d Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Wed Sep 16 10:46:12 2020 -0300 New build improving the conditional commit 64ade37 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Wed Sep 16 10:45:17 2020 -0300 Conditional improved commit 21aed44 Merge: 8b64802 114dbe2 Author: Kelvin Maues <kelvinmaus@gmail.com> Date: Wed Sep 16 10:37:42 2020 -0300 Merge pull request #1 from kelvinmaues/feature/mvt-experiments Improved Experiment component with a new feature to mtv experiments, … commit 114dbe2 Author: Kelvin Maues <kgmdeveloper@gmail.com> Date: Wed Sep 16 10:26:15 2020 -0300 Improved Experiment component with a new feature to mtv experiments, new types added and script changed
1 parent fe650fc commit 3794bd6

8 files changed

+131
-33
lines changed

‎.all-contributorsrc

+10
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,16 @@
3838
"contributions": [
3939
"review"
4040
]
41+
},
42+
{
43+
"login": "kelvinmaues",
44+
"name": "Kelvin Maues",
45+
"avatar_url": "https://avatars0.githubusercontent.com/u/11196828?v=4",
46+
"profile": "https://kelvinmaues.github.io/",
47+
"contributions": [
48+
"code",
49+
"doc"
50+
]
4151
}
4252
],
4353
"contributorsPerLine": 7,

‎README.md

+68-11
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
# react-optimize
22

33
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4-
5-
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
6-
4+
[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
75
<!-- ALL-CONTRIBUTORS-BADGE:END -->
86

97
[![Build Status](https://github.com/hudovisk/react-optimize/workflows/Build/badge.svg)](https://github.com/hudovisk/react-optimize/actions) [![Greenkeeper badge](https://badges.greenkeeper.io/hudovisk/react-optimize.svg)](https://greenkeeper.io/)
@@ -21,8 +19,6 @@ Docs:
2119
yarn add react-optimize
2220
```
2321

24-
## How to use
25-
2622
You first need to add the gtag snippet with the optimize container id in it. If you are using [create-react-app](https://github.com/facebook/create-react-app)
2723
you can add the following to `public/index.html`
2824

@@ -44,7 +40,10 @@ REACT_APP_GA_ID=UA-xyz
4440
REACT_APP_OPTIMIZE_ID=GTM-abc
4541
```
4642

47-
After that you can use the lib like the following:
43+
## How to use
44+
45+
#### A/B Test
46+
If the experience is a **A/B testing** you can use the lib like the following:
4847

4948
```
5049
import React from 'react';
@@ -69,6 +68,64 @@ class App extends React.Component {
6968
}
7069
```
7170

71+
#### Multivariate Test
72+
If the experience is a **multivariate testing** to test variants with two or more different sections. You can use the lib like the following applying the props **asMtvExperiment (confirm that is multivariate)** and the **indexSectionPosition** on google optimize like the image below:
73+
74+
![google optimize multivariate test](./google-optimize-test.png)
75+
76+
```
77+
import React from 'react';
78+
import { Experiment, Variant } from "react-optimize";
79+
80+
class App extends React.Component {
81+
render() {
82+
return(
83+
<Experiment
84+
id="<experiment-id>"
85+
asMtvExperiment
86+
indexSectionPosition="0"
87+
>
88+
<Variant id="0">
89+
Original
90+
</Variant>
91+
<Variant id="1">
92+
Variant 1
93+
</Variant>
94+
</Experiment>
95+
96+
<Experiment
97+
id="<experiment-id>"
98+
asMtvExperiment
99+
indexSectionPosition="1"
100+
>
101+
<Variant id="0">
102+
Original
103+
</Variant>
104+
<Variant id="1">
105+
Variant 1
106+
</Variant>
107+
<Variant id="2">
108+
Variant 2
109+
</Variant>
110+
</Experiment>
111+
112+
<Experiment
113+
id="<experiment-id>"
114+
asMtvExperiment
115+
indexSectionPosition="2"
116+
>
117+
<Variant id="0">
118+
Original
119+
</Variant>
120+
<Variant id="1">
121+
Variant 1
122+
</Variant>
123+
</Experiment>
124+
)
125+
}
126+
}
127+
```
128+
72129
## Contributors ✨
73130

74131
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -78,15 +135,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
78135
<!-- markdownlint-disable -->
79136
<table>
80137
<tr>
81-
<td align="center"><a href="https://github.com/hudovisk"><img src="https://avatars2.githubusercontent.com/u/5161722?v=4" width="100px;" alt=""/><br /><sub><b>Hudo Assenco</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/commits?author=hudovisk" title="Code">💻</a> <a href="https://github.com/hudovisk/react-optimize/commits?author=hudovisk" title="Documentation">📖</a></td>
82-
<td align="center"><a href="http://dobesv.com"><img src="https://avatars2.githubusercontent.com/u/327833?v=4" width="100px;" alt=""/><br /><sub><b>Dobes Vandermeer</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/commits?author=dobesv" title="Code">💻</a> <a href="https://github.com/hudovisk/react-optimize/commits?author=dobesv" title="Documentation">📖</a></td>
83-
<td align="center"><a href="https://github.com/tlaak"><img src="https://avatars0.githubusercontent.com/u/1674055?v=4" width="100px;" alt=""/><br /><sub><b>Timo Laak</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/pulls?q=is%3Apr+reviewed-by%3Atlaak" title="Reviewed Pull Requests">👀</a></td>
138+
<td align="center"><a href="https://github.com/hudovisk"><img src="https://avatars2.githubusercontent.com/u/5161722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hudo Assenco</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/commits?author=hudovisk" title="Code">💻</a> <a href="https://github.com/hudovisk/react-optimize/commits?author=hudovisk" title="Documentation">📖</a></td>
139+
<td align="center"><a href="http://dobesv.com"><img src="https://avatars2.githubusercontent.com/u/327833?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dobes Vandermeer</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/commits?author=dobesv" title="Code">💻</a> <a href="https://github.com/hudovisk/react-optimize/commits?author=dobesv" title="Documentation">📖</a></td>
140+
<td align="center"><a href="https://github.com/tlaak"><img src="https://avatars0.githubusercontent.com/u/1674055?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Timo Laak</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/pulls?q=is%3Apr+reviewed-by%3Atlaak" title="Reviewed Pull Requests">👀</a></td>
141+
<td align="center"><a href="https://kelvinmaues.github.io/"><img src="https://avatars0.githubusercontent.com/u/11196828?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kelvin Maues</b></sub></a><br /><a href="https://github.com/hudovisk/react-optimize/commits?author=kelvinmaues" title="Code">💻</a> <a href="https://github.com/hudovisk/react-optimize/commits?author=kelvinmaues" title="Documentation">📖</a></td>
84142
</tr>
85143
</table>
86144

87-
<!-- markdownlint-enable -->
145+
<!-- markdownlint-restore -->
88146
<!-- prettier-ignore-end -->
89-
90147
<!-- ALL-CONTRIBUTORS-LIST:END -->
91148

92149
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

‎google-optimize-test.png

47.2 KB
Loading

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"test:node": "mocha --require @babel/register test/test.node.js",
1414
"test:browser": "cross-env NODE_ENV=test karma start",
1515
"test": "yarn run test:node && yarn run test:browser && yarn run lint",
16-
"build": "webpack",
16+
"build": "rm -Rf lib && webpack",
1717
"watch": "webpack --watch",
1818
"prepublishOnly": "yarn run build"
1919
},

‎src/Experiment.js

+30-14
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,6 @@ import PropTypes from "prop-types";
33
import OptimizeContext from "./OptimizeContext";
44

55
class Experiment extends React.Component {
6-
static defaultProps = {
7-
loader: null,
8-
timeout: 3000,
9-
};
10-
11-
static propTypes = {
12-
id: PropTypes.string.isRequired,
13-
loader: PropTypes.node,
14-
timeout: PropTypes.number,
15-
children: PropTypes.node,
16-
};
17-
186
state = {
197
variant: null,
208
};
@@ -32,12 +20,25 @@ class Experiment extends React.Component {
3220
}
3321
};
3422

23+
applyMtvExperiment = (value) => {
24+
const sections = value.split("-");
25+
const variant = sections[this.props.indexSectionPosition];
26+
this.updateVariant(variant);
27+
};
28+
3529
updateVariantFromGlobalState = () => {
36-
const value =
30+
const googleOptimizeExperimentValue =
3731
typeof window !== "undefined" && window.google_optimize
3832
? window.google_optimize.get(this.props.id)
3933
: null;
40-
this.updateVariant(value);
34+
const isAMtvExperiment =
35+
this.props.asMtvExperiment && googleOptimizeExperimentValue;
36+
37+
if (isAMtvExperiment) {
38+
this.applyMtvExperiment(googleOptimizeExperimentValue);
39+
} else {
40+
this.updateVariant(googleOptimizeExperimentValue);
41+
}
4142
};
4243

4344
setupOptimizeCallback = () => {
@@ -99,4 +100,19 @@ class Experiment extends React.Component {
99100
}
100101
}
101102

103+
Experiment.propTypes = {
104+
id: PropTypes.string.isRequired,
105+
loader: PropTypes.node,
106+
timeout: PropTypes.number,
107+
children: PropTypes.node,
108+
asMtvExperiment: PropTypes.bool,
109+
indexSectionPosition: PropTypes.string,
110+
};
111+
112+
Experiment.defaultProps = {
113+
loader: null,
114+
timeout: 3000,
115+
asMtvExperiment: false,
116+
};
117+
102118
export default Experiment;

‎src/Variant.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@ import PropTypes from "prop-types";
33
import OptimizeContext from "./OptimizeContext";
44

55
class Variant extends React.Component {
6-
static propTypes = {
7-
id: PropTypes.string.isRequired,
8-
children: PropTypes.node,
9-
};
10-
116
render() {
127
return (
138
<OptimizeContext.Consumer>
@@ -17,4 +12,9 @@ class Variant extends React.Component {
1712
}
1813
}
1914

15+
Variant.propTypes = {
16+
id: PropTypes.string.isRequired,
17+
children: PropTypes.node,
18+
};
19+
2020
export default Variant;

‎src/index.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
declare module 'react-optimize' {
2-
import { ComponentType, ReactNode } from 'react';
1+
declare module "react-optimize" {
2+
import { ComponentType, ReactNode } from "react";
33
interface ExperimentProps {
44
children: ReactNode;
55
id: string;
66
loader?: ReactNode;
77
timeout?: number;
8+
asMtvExperiment?: boolean;
9+
indexSectionPosition?: string | number;
810
}
911

1012
const Experiment: ComponentType<ExperimentProps>;

‎test/specs/experiment.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,19 @@ describe("experiment", () => {
2727

2828
delete window.google_optimize;
2929
});
30+
31+
it("should get multivariante test variants", () => {
32+
window.google_optimize = { get: sinon.stub().returns("1-2-1") };
33+
34+
const wrapper = shallow(
35+
<Experiment asMtvExperiment indexSectionPosition="0" id="abc" />
36+
);
37+
38+
expect(window.google_optimize.get.calledWith("abc")).to.be.true;
39+
expect(wrapper.state("variant")).to.be.equal("1");
40+
41+
delete window.google_optimize;
42+
});
3043
});
3144

3245
describe("on optimize not loaded yet", () => {

0 commit comments

Comments
 (0)