Add new variationId field to experiment results (index is now depreca…

…ted).

README.md

@@ -1,6 +1,6 @@
 # Growth Book React Library
 
-Small utility library to run controlled experiments (i.e. A/B/n tests) in React.
+Powerful A/B testing for React.
 
 ![Build Status](https://github.com/growthbook/growthbook-react/workflows/Build/badge.svg)
 
@@ -27,11 +27,16 @@ Step 1: Wrap your app in GrowthBookProvider
 ```tsx
 import {GrowthBookClient, GrowthBookProvider} from '@growthbook/growthbook-react';
 
-// Instantiate a client
-const client = new GrowthBookClient();
+// Create a client and setup tracking
+const client = new GrowthBookClient({
+  onExperimentViewed: ({experimentId, variationId}) => {
+    // Use whatever event tracking system you have in place
+    analytics.track("Experiment Viewed", {experimentId, variationId});
+  }
+});
 
 export default function App() {
-  // TODO: Pull user id from your auth system (or use an anonymous cookie id)
+  // TODO: Pull user id from your auth system (or use an anonymous device id)
   const user = client.user({id: "1"});
 
   // Wrap your app in a GrowthBookProvider component
@@ -125,7 +130,7 @@ interface Experiment {
 The useExperiment hook returns an object with a few useful properties
 
 ```ts
-const {inExperiment, index, value} = useExperiment({
+const {inExperiment, variationId, value} = useExperiment({
     key: "my-experiment",
     variations: ["A", "B"]
 });
@@ -134,7 +139,7 @@ const {inExperiment, index, value} = useExperiment({
 console.log(inExperiment); // true or false
 
 // The index of the assigned variation
-console.log(index); // 0 or 1
+console.log(variationId); // 0 or 1
 
 // The value of the assigned variation
 console.log(value); // "A" or "B"
@@ -263,37 +268,60 @@ client.importOverrides({
 })
 ```
 
-## Tracking Metrics and Analyzing Results
+## Event Tracking and Analyzing Results
 
 This library only handles assigning variations to users.  The 2 other parts required for an A/B testing platform are Tracking and Analysis.
 
-### Tracking Metrics
+### Tracking
 
-We recommend using your existing event tracking system, whether it is Google Analytics, Mixpanel, Segment, or something custom that you've built.
+It's likely you already have some event tracking on your site with the metrics you want to optimize (Google Analytics, Segment, Mixpanel, etc.).
 
-In addition to tracking metrics, you'll want to track when a user views an experiment:
+For A/B tests, you just need to track one additional event - when someone views a variation.  
 
 ```ts
 // Specify a tracking callback when instantiating the client
 const client = new GrowthBookClient({
-    onExperimentViewed: (data) => {
-        // Example using Segment
-        analytics.track("Experiment Viewed", {
-            experimentId: data.experiment.key,
-            variationId: data.index
-        });
+    onExperimentViewed: ({experimentId, variationId}) => {
+      // ...
     }
 });
 ```
 
-The data object passed to your callback has the following properties:
--  experiment
--  value (the assigned variation)
--  index (the array index of the assigned variation)
+The object passed to your callback has the following properties:
+-  experimentId (the key of the experiment)
+-  variationId (the array index of the assigned variation)
+-  value (the value of the assigned variation)
+-  experiment (the full experiment object)
 -  userId
 -  anonId
 -  userAttributes
 
+Below are examples for a few popular event tracking tools:
+
+#### Google Analytics
+```ts
+ga('send', 'event', 'experiment', experimentId, variationId, {
+  // Custom dimension for easier analysis
+  'dimension1': `${experimentId}::${variationId}`
+});
+```
+
+#### Segment
+```ts
+analytics.track("Experiment Viewed", {
+  experimentId,
+  variationId
+});
+```
+
+#### Mixpanel
+```ts
+mixpanel.track("$experiment_started", {
+  'Experiment name': experimentId,
+  'Variant name': variationId
+});
+```
+
 ### Analysis
 
 For analysis, there are a few options:

package.json

@@ -62,7 +62,7 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@growthbook/growthbook": "^0.9.0"
+    "@growthbook/growthbook": "^0.9.1"
   },
   "description": "Powerful A/B testing for React Apps",
   "repository": {

src/index.tsx

@@ -32,6 +32,7 @@ function runExperiment<T>(
 
   return {
     experiment: exp,
+    variationId: 0,
     inExperiment: false,
     index: 0,
     value: exp.variations[0],

yarn.lock

@@ -881,10 +881,10 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@growthbook/growthbook@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@growthbook/growthbook/-/growthbook-0.9.0.tgz#e779419b8d33470eaa20b966ead173ca11c5e5e1"
-  integrity sha512-9Ux4CrX0tb6mvZH/B8HcHiYStWlgNSgTb7TGxOPO2XodbfXaNNJUBOdwq0Dsm4+6Iwg1PVncof63wX4ULxq/XQ==
+"@growthbook/growthbook@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@growthbook/growthbook/-/growthbook-0.9.1.tgz#86471e94d5031acf975ab8de2dac7c30a907c516"
+  integrity sha512-iLw7fsF2qSJ1jT63SHqs9+QfafUDXJsSoV6r8YvtuywLnfw428H7TgdAAMwtTXWTSwHCaIwBnoVxFB6ktRJy4A==
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"