nuxt-google-optimize

    0.5.4 • Public • Published

    nuxt-google-optimize

    npm (scoped with tag) npm CircleCI Codecov Dependencies js-standard-style

    SSR friendly Google Optimize module for Nuxt.js

    📖 Release Notes

    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
    yarn add nuxt-google-optimize

    OR

    npm install nuxt-google-optimize --save
    • Add nuxt-google-optimize to modules section of nuxt.config.js
    {
      modules: [
        'nuxt-google-optimize',
      ],
     
      // Optional options
      googleOptimize: {
        // experimentsDir: '~/experiments',
        // maxAge: 60 * 60 * 24 * 7 // 1 Week
        // pushPlugin: true,
      }
    }

    Usage

    Create experiments directory inside your project.

    Create experiments/index.js to define all available experiments:

    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:

    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:

    {
      // Index of currently active experiment
      "$experimentIndex": 0,
     
      // Indext 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:

    <script>
    export default {
      methods: {
        foo() {
          // You can use this.$exp here
        }
      }
    }
    </script> 

    Using inside templates:

    <div v-if="$exp.name === 'something'">
      <!-- You can optionally use $exp.$activeVariants and $exp.$variantIndexes here -- >
      ...
    </div>
    <div v-else>
      ...
    </div>

    Global style tests

    Inject global styles to page body.

    layouts/default.vue:

    <template>
      <nuxt/>
    </template>
     
    <script>
    export default {
          head () {
            return {
                bodyAttrs: {
                    class: this.$exp.$classes.join(' ')
                }
            }
        },
    }
    </script>

    If you have custom CSS for each test, you can import it inside your experiment's .js file.

    experiments/background-color/index.js:

    import './styles.scss'

    With Sass:

    .exp-background-color {
      // ---------------- Variant 1 ---------------- 
      &-1 {
        background-color: red;
      }
      // ---------------- Variant 2 ---------------- 
      &-2 {
        background-color: blue;
      }
    }

    With CSS:

    /* Variant 1 */
    .exp-background-color-1 {
      background-color: red;
    }
     
    /* Variant 2 */
    .exp-background-color-2 {
      background-color: blue;
    }

    Development

    • Clone this repository
    • Install dependencies using yarn install or npm install
    • Start development server using yarn run dev or npm run dev
    • Point your browser to http://localhost:3000
    • You will see a different colour based on the variant set for you
    • In order to test your luck, try clearing your cookies and see if the background colour changes or not

    License

    MIT License - Alibaba Travels Co

    Keywords

    none

    Install

    npm i nuxt-google-optimize

    DownloadsWeekly Downloads

    1,809

    Version

    0.5.4

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • farzadso
    • pi0