https://github.com/nuxt-community/google-optimize-module
SSR friendly Google Optimize module for Nuxt.js
https://github.com/nuxt-community/google-optimize-module
ab-testing google-optimize module mvt-optimization nuxt ssr vue
Last synced: 3 months ago
JSON representation
SSR friendly Google Optimize module for Nuxt.js
- Host: GitHub
- URL: https://github.com/nuxt-community/google-optimize-module
- Owner: nuxt-community
- License: mit
- Archived: true
- Created: 2018-06-28T08:43:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-07T06:32:11.000Z (over 1 year ago)
- Last Synced: 2025-03-18T04:37:03.724Z (3 months ago)
- Topics: ab-testing, google-optimize, module, mvt-optimization, nuxt, ssr, vue
- Language: JavaScript
- Size: 237 KB
- Stars: 213
- Watchers: 14
- Forks: 32
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Google Is Shutting Down Optimize
Google is shutting down Optimize Sept 30, 2023. [Read the annoucement](https://support.google.com/optimize/answer/12979939?hl=en)
# nuxt-google-optimize
[](https://npmjs.com/package/nuxt-google-optimize)
[](https://npmjs.com/package/nuxt-google-optimize)
[](https://circleci.com/gh/alibaba-aero/nuxt-google-optimize)
[](https://codecov.io/gh/alibaba-aero/nuxt-google-optimize)
[](https://david-dm.org/alibaba-aero/nuxt-google-optimize)
[](http://standardjs.com)
> SSR friendly Google Optimize module for Nuxt.js
[📖 **Release Notes**](./CHANGELOG.md)
## Features
- Support multiple experiments (AB or MVT[Multi-Variant])
- Auto assign experiment/variant to users
- SSR support using cookies
- CSS and state injection
- Automatically revoke expired experiments from testers
- Ability to assign experiments based on context conditions (Route, State, etc)
## Setup
- Add `nuxt-google-optimize` dependency using yarn or npm to your project
```sh
yarn add nuxt-google-optimize
```
OR
```sh
npm install nuxt-google-optimize --save
```
- Add `nuxt-google-optimize` to `modules` section of `nuxt.config.js`
```js
{
modules: [
'nuxt-google-optimize',
],
// Optional options
googleOptimize: {
// experimentsDir: '~/experiments',
// maxAge: 60 * 60 * 24 * 7 // 1 Week
// pushPlugin: true,
// excludeBots: true,
// botExpression: /(bot|spider|crawler)/i
}
}
```
## Usage
Create `experiments` directory inside your project.
Create `experiments/index.js` to define all available experiments:
```js
import backgroundColor from './background-color'
export default [
backgroundColor
]
```
### Creating an experiment
Each experiment should export an object to define itself.
`experiments/background-color/index.js`:
```js
export default {
// A helper exp-{name}-{var} class will be added to the root element
name: 'background-color',
// Google optimize experiment id
experimentID: '....',
// [optional] specify number of sections for MVT experiments
// sections: 1,
// [optional] maxAge for a user to test this experiment
// maxAge: 60 * 60 * 24, // 24 hours,
// [optional] Enable/Set experiment on certain conditions
// isEligible: ({ route }) => route.path !== '/foo'
// Implemented variants and their weights
variants: [
{ weight: 0 }, // <-- This is the default variant
{ weight: 2 },
{ weight: 1 }
],
}
```
### `$exp`
Global object `$exp` will be universally injected in the app context to determine the currently active experiment.
It has the following keys:
```json6
{
// Index of currently active experiment
"$experimentIndex": 0,
// Index of currently active experiment variants
"$variantIndexes": [
1
],
// Same as $variantIndexes but each item is the real variant object
"$activeVariants": [
{
/* */
}
],
// Classes to be globally injected (see global style tests section)
"$classes": [
"exp-background-color-1" // exp-{experiment-name}-{variant-id}
],
// All of the keys of currently active experiment are available
"name": "background-color",
"experimentID": "testid",
"sections": 1,
"maxAge": 60,
"variants": [
/* all variants */
]
}
```
**Using inside components:**
```html
export default {
methods: {
foo() {
// You can use this.$exp here
}
}
}
```
**Using inside templates:**
```html