2021-04-15 01:32:46 +00:00
# ExPlat
2024-03-14 21:43:52 +00:00
This packages includes a component and utility functions that can be used to run A/B Tests in WooCommerce dashboard, report pages, and frontend pages.
2021-04-15 01:32:46 +00:00
## Installation
Install the module
```bash
2022-03-04 04:01:16 +00:00
pnpm install @woocommerce/explat --save
2021-04-15 01:32:46 +00:00
```
This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.
2022-05-12 21:30:17 +00:00
## Usage with Experiment Component
2021-04-15 01:32:46 +00:00
```js
import { Experiment } from '@woocommerce/explat';
const DefaultExperience = < div > Hello World< / div > ;
const TreatmentExperience = < div > Hello WooCommerce!< / div > ;
const LoadingExperience = < div > ⏰< / div > ;
< Experiment
name="woocommerce_example_experiment"
defaultExperience={ DefaultExperience }
treatmentExperience={ TreatmentExperience }
loadingExperience={ LoadingExperience }
/>;
2022-03-16 03:03:10 +00:00
// Get the experiment assignment with authentication as a WPCOM user.
import { ExperimentWithAuth } from '@woocommerce/explat';
< ExperimentWithAuth
name="woocommerce_example_experiment"
defaultExperience={ DefaultExperience }
treatmentExperience={ TreatmentExperience }
loadingExperience={ LoadingExperience }
/>;
2021-04-15 01:32:46 +00:00
```
2022-05-12 21:30:17 +00:00
## Usage with useExperiment
```js
import { useExperiment } from '@woocommerce/explat';
const DefaultExperience = < div > Hello World< / div > ;
const TreatmentExperience = < div > Hello WooCommerce!< / div > ;
const [ isLoadingExperiment, experimentAssignment ] = useExperiment('experiment-name');
if ( ! isLoadingExperiment & & experimentAssignment?.variationName === 'treatment' ) {
return < TreatmentExperience / >
}
return < DefaultExperience / >
````