{"id":13506568,"url":"https://github.com/nuxt-community/google-optimize-module","last_synced_at":"2025-03-30T03:30:55.372Z","repository":{"id":41882918,"uuid":"138991228","full_name":"nuxt-community/google-optimize-module","owner":"nuxt-community","description":"SSR friendly Google Optimize module for Nuxt.js","archived":true,"fork":false,"pushed_at":"2023-11-07T06:32:11.000Z","size":243,"stargazers_count":213,"open_issues_count":22,"forks_count":32,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-18T04:37:03.724Z","etag":null,"topics":["ab-testing","google-optimize","module","mvt-optimization","nuxt","ssr","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxt-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-28T08:43:21.000Z","updated_at":"2025-01-23T05:16:57.000Z","dependencies_parsed_at":"2024-08-03T06:01:25.935Z","dependency_job_id":"7f206563-6e1f-4089-ae00-c441b7f358be","html_url":"https://github.com/nuxt-community/google-optimize-module","commit_stats":null,"previous_names":["alibaba-aero/nuxt-google-optimize","nuxt-community/google-optimize"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fgoogle-optimize-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fgoogle-optimize-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fgoogle-optimize-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Fgoogle-optimize-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-community","download_url":"https://codeload.github.com/nuxt-community/google-optimize-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246273533,"owners_count":20750904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ab-testing","google-optimize","module","mvt-optimization","nuxt","ssr","vue"],"created_at":"2024-08-01T01:00:53.829Z","updated_at":"2025-03-30T03:30:50.359Z","avatar_url":"https://github.com/nuxt-community.png","language":"JavaScript","readme":"## Google Is Shutting Down Optimize\nGoogle is shutting down Optimize Sept 30, 2023. [Read the annoucement](https://support.google.com/optimize/answer/12979939?hl=en)\n\n# nuxt-google-optimize\n[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-google-optimize/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-google-optimize)\n[![npm](https://img.shields.io/npm/dt/nuxt-google-optimize.svg?style=flat-square)](https://npmjs.com/package/nuxt-google-optimize)\n[![CircleCI](https://img.shields.io/circleci/project/github/alibaba-aero/nuxt-google-optimize.svg?style=flat-square)](https://circleci.com/gh/alibaba-aero/nuxt-google-optimize)\n[![Codecov](https://img.shields.io/codecov/c/github/alibaba-aero/nuxt-google-optimize.svg?style=flat-square)](https://codecov.io/gh/alibaba-aero/nuxt-google-optimize)\n[![Dependencies](https://david-dm.org/alibaba-aero/nuxt-google-optimize/status.svg?style=flat-square)](https://david-dm.org/alibaba-aero/nuxt-google-optimize)\n[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)\n\n\u003e SSR friendly Google Optimize module for Nuxt.js\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Features\n\n- Support multiple experiments (AB or MVT[Multi-Variant])\n- Auto assign experiment/variant to users\n- SSR support using cookies\n- CSS and state injection\n- Automatically revoke expired experiments from testers\n- Ability to assign experiments based on context conditions (Route, State, etc)\n\n## Setup\n\n- Add `nuxt-google-optimize` dependency using yarn or npm to your project\n```sh\nyarn add nuxt-google-optimize\n```\nOR\n```sh\nnpm install nuxt-google-optimize --save\n```\n\n- Add `nuxt-google-optimize` to `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    'nuxt-google-optimize',\n  ],\n\n  // Optional options\n  googleOptimize: {\n    // experimentsDir: '~/experiments',\n    // maxAge: 60 * 60 * 24 * 7 // 1 Week\n    // pushPlugin: true,\n    // excludeBots: true,\n    // botExpression: /(bot|spider|crawler)/i\n  }\n}\n```\n\n## Usage\n\nCreate `experiments` directory inside your project.\n\nCreate `experiments/index.js` to define all available experiments:\n\n```js\nimport backgroundColor from './background-color'\n\nexport default [\n  backgroundColor\n]\n```\n\n### Creating an experiment\n\nEach experiment should export an object to define itself.\n\n`experiments/background-color/index.js`:\n\n```js\nexport default {\n  // A helper exp-{name}-{var} class will be added to the root element\n  name: 'background-color',\n\n  // Google optimize experiment id\n  experimentID: '....',\n\n  // [optional] specify number of sections for MVT experiments\n  // sections: 1,\n\n  // [optional] maxAge for a user to test this experiment\n  // maxAge: 60 * 60 * 24, // 24 hours,\n\n  // [optional] Enable/Set experiment on certain conditions\n  // isEligible: ({ route }) =\u003e route.path !== '/foo'\n\n  // Implemented variants and their weights\n  variants: [\n    { weight: 0 }, // \u003c-- This is the default variant\n    { weight: 2 },\n    { weight: 1 }\n  ],\n}\n```\n\n### `$exp`\n\nGlobal object `$exp` will be universally injected in the app context to determine the currently active experiment.\n\nIt has the following keys:\n\n```json6\n{\n  // Index of currently active experiment\n  \"$experimentIndex\": 0,\n\n  // Index of currently active experiment variants\n  \"$variantIndexes\": [\n    1\n  ],\n\n  // Same as $variantIndexes but each item is the real variant object\n  \"$activeVariants\": [\n    {\n      /* */\n    }\n  ],\n\n  // Classes to be globally injected (see global style tests section)\n  \"$classes\": [\n    \"exp-background-color-1\" // exp-{experiment-name}-{variant-id}\n  ],\n\n  // All of the keys of currently active experiment are available\n  \"name\": \"background-color\",\n  \"experimentID\": \"testid\",\n  \"sections\": 1,\n  \"maxAge\": 60,\n  \"variants\": [\n    /* all variants */\n  ]\n}\n```\n\n**Using inside components:**\n\n```html\n\u003cscript\u003e\nexport default {\n  methods: {\n    foo() {\n      // You can use this.$exp here\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n**Using inside templates:**\n\n```html\n\u003cdiv v-if=\"$exp.name === 'something'\"\u003e\n  \u003c!-- You can optionally use $exp.$activeVariants and $exp.$variantIndexes here -- \u003e\n  ...\n\u003c/div\u003e\n\u003cdiv v-else\u003e\n  ...\n\u003c/div\u003e\n```\n\n### Global style tests\n\nInject global styles to page body.\n\n`layouts/default.vue`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cnuxt/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n      head () {\n        return {\n            bodyAttrs: {\n                class: this.$exp.$classes.join(' ')\n            }\n        }\n    },\n}\n\u003c/script\u003e\n```\n\nIf you have custom CSS for each test, you can import it inside your experiment's `.js` file.\n\n`experiments/background-color/index.js`:\n\n```js\nimport './styles.scss'\n```\n\n**With Sass:**\n\n```scss\n.exp-background-color {\n  // ---------------- Variant 1 ----------------\n  \u0026-1 {\n    background-color: red;\n  }\n  // ---------------- Variant 2 ----------------\n  \u0026-2 {\n    background-color: blue;\n  }\n}\n```\n\n**With CSS:**\n\n```css\n/* Variant 1 */\n.exp-background-color-1 {\n  background-color: red;\n}\n\n/* Variant 2 */\n.exp-background-color-2 {\n  background-color: blue;\n}\n```\n\n## Development\n\n- Clone this repository\n- Install dependencies using `yarn install` or `npm install`\n- Start development server using `yarn run dev` or `npm run dev`\n- Point your browser to `http://localhost:3000`\n- You will see a different colour based on the variant set for you\n- In order to test your luck, try clearing your cookies and see if the background colour changes or not\n\n## License\n\n[MIT License](./LICENSE) - Alibaba Travels Co\n\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Fgoogle-optimize-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-community%2Fgoogle-optimize-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Fgoogle-optimize-module/lists"}