{"_rev":"3-099ab4b8292dc6486bc135f17a4bab7c","time":{"created":"2023-07-04T07:50:09.431Z","1.0.0":"2023-07-03T13:54:28.009Z","modified":"2023-07-04T07:50:09.999Z","1.0.1":"2023-07-04T07:50:09.686Z"},"_id":"@absmartly/vue3-sdk","name":"@absmartly/vue3-sdk","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@absmartly/vue3-sdk","version":"1.0.1","homepage":"https://github.com/absmartly/vue3-sdk#README.md","bugs":{"url":"https://github.com/absmartly/vue3-sdk/issues"},"keywords":["absmartly","ab-smartly","a/b-smartly","ab-testing","a/b-testing","split-testing","ab","a/b","cro","vue","vue3"],"license":"Apache-2.0","main":"dist/absmartly.common.js","browser":"dist/absmartly.umd.js","unpkg":"dist/absmartly.umd.min.js","scripts":{"build":"npm run -s format && vue-cli-service lint && vue-cli-service build --progress --target lib --name absmartly src/index.js && rm ./dist/demo.html","prepack":"npm -s upgrade && npm run -s build","test":"vue-cli-service test:unit --coverage","lint":"vue-cli-service lint","format":"prettier --write **/*.{js,json,vue}"},"dependencies":{"@absmartly/javascript-sdk":"^1.11.4"},"peerDependencies":{"vue":"^3.3.0"},"devDependencies":{"@babel/eslint-parser":"^7.22.5","@vue/cli-plugin-babel":"^5.0.8","@vue/cli-plugin-eslint":"^5.0.8","@vue/cli-plugin-unit-jest":"^5.0.8","@vue/cli-service":"^5.0.8","@vue/test-utils":"^2.4.0","@vue/vue3-jest":"^27.0.0","eslint":"^8.43.0","eslint-config-prettier":"^8.8.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-vue":"^9.15.1","prettier":"^2.8.8","vue-template-compiler":"^2.7.14"},"publishConfig":{"access":"public"},"eslintConfig":{"env":{"vue/setup-compiler-macros":true}},"description":"A/B Smartly - Vue3 SDK","directories":{"test":"tests"},"repository":{"type":"git","url":"git+https://github.com/absmartly/vue3-sdk.git"},"author":"","gitHead":"19d0b87d89eaac1d3abe77b7141a7c9f0fbc989d","_id":"@absmartly/vue3-sdk@1.0.1","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-HfWhDytN/AqDDNXxOshzNyIffzVaC4Uv5BL0ZFj0t5WZyUKjsp5cmYQUQo1T4YwynXncvesKNnYMHTKq357HFA==","shasum":"63e1a684c33b3d91ae074cdb52dd19685d689113","tarball":"https://registry.npmjs.org/@absmartly/vue3-sdk/-/vue3-sdk-1.0.1.tgz","fileCount":6,"unpackedSize":410546,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjPcFQJsINrMSue3MrVtfBy73WPmn4TaMcpWfRg8GPugIgXKHLqCq69IptmGzhiiA5hBRlbuMoQmbfTRZh0p/Fst4="}]},"_npmUser":{"name":"caltheabtester","email":"cal@absmartly.com"},"maintainers":[{"name":"marcioabs","email":"marcio@absmartly.com"},{"name":"caltheabtester","email":"cal@absmartly.com"},{"name":"marcioapm","email":"marcioapm@gmail.com"},{"name":"joalves","email":"jonas@absmartly.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-sdk_1.0.1_1688457009536_0.2702781153077938"},"_hasShrinkwrap":false}},"maintainers":[{"name":"marcioabs","email":"marcio@absmartly.com"},{"name":"caltheabtester","email":"cal@absmartly.com"},{"name":"marcioapm","email":"marcioapm@gmail.com"},{"name":"joalves","email":"jonas@absmartly.com"}],"description":"A/B Smartly - Vue3 SDK","homepage":"https://github.com/absmartly/vue3-sdk#README.md","keywords":["absmartly","ab-smartly","a/b-smartly","ab-testing","a/b-testing","split-testing","ab","a/b","cro","vue","vue3"],"repository":{"type":"git","url":"git+https://github.com/absmartly/vue3-sdk.git"},"bugs":{"url":"https://github.com/absmartly/vue3-sdk/issues"},"license":"Apache-2.0","readme":"# A/B Smartly Vue3 SDK [![npm version](https://badge.fury.io/js/%40absmartly%2Fvue3-sdk.svg)](https://badge.fury.io/js/%40absmartly%2Fvue3-sdk)\n\nA/B Smartly - Vue3 SDK\n\n## Compatibility\n\nThe A/B Smartly Vue3 SDK is a thin wrapper around the [A/B Smartly JavaScript SDK](https://www.github.com/absmartly/javascript-sdk)\n\nIt requires Vue3 version 2.6.0+ and is supported on IE 10+ and all the other major browsers.\n\n**Note**: IE 10 does not natively support Promises.\nIf you target IE 10, you must include a polyfill like [es6-promise](https://www.npmjs.com/package/es6-promise) or [rsvp](https://www.npmjs.com/package/rsvp).\n\n## Installation\n\n#### npm\n\n```shell\nnpm install @absmartly/vue3-sdk --save\n```\n\n#### Directly in the browser\nYou can include an optimized and pre-built package directly in your HTML code through [unpkg.com](https://www.unpkg.com).\n\nSimply add the following code to your `head` section to include the latest published version.\n```html\n    <script src=\"https://unpkg.com/@absmartly/vue3-sdk\"></script>\n```\n\n## Getting Started\n\nPlease follow the [installation](#installation) instructions before trying the following code:\n\n#### Import the SDK into your project\n```javascript\nconst absmartly = require('@absmartly/vue3-sdk');\n// OR with ES6 modules:\nimport absmartly from '@absmartly/vue3-sdk';\n```\n\n#### Basic initialization\nThis example assumes an Api Key, an Application, and an Environment have been created in the A/B Smartly web console.\n\nThe Vue3 SDK is a thin wrapper around our Javascript SDK. Please check the [A/B Smartly Javascript SDK](https://www.github.com/absmartly/javascript-sdk) docs for details regarding other options used for initialization.\n\n```javascript\n// somewhere in your application initialization code, before mounting your Vue application\napp.use(absmartly.ABSmartlyVue, {\n    sdkOptions: {\n        endpoint: 'https://sandbox-api.absmartly.com/v1',\n        apiKey: ABSMARTLY_API_KEY,\n        environment: \"production\",\n        application: \"website\",\n    },\n    context: {\n        units: {\n            session_id: '5ebf06d8cb5d8137290c4abb64155584fbdb64d8',\n        },\n    },\n    attributes: {\n        user_agent: navigator.userAgent\n    },\n    overrides: {\n        exp_test_development: 1\n    }\n});\n```\n\nThis makes the `$absmartly` extension available in every Vue instance.\n\nIf you're using the composition API, this plugin will use `provide` to provide the extension, so you can use `inject` to access it:\n```javascript\nimport { inject } from 'vue';\n\nconst $absmartly = inject('$absmartly');\n// $absmartly extension will be injected\n```\n\n#### Initializing with pre-fetched Context data\nWhen doing full-stack experimentation with A/B Smartly, we recommend creating a context only once on the server-side.\nCreating a context involves a round-trip to the A/B Smartly event collector.\nWe can avoid repeating the round-trip on the client-side by sending the server-side data embedded in the first document, for example, by rendering it on the template.\nThen we can initialize the A/B Smartly context on the client-side directly with it. The Vue3 SDK also supports this optimized usage.\n\nIn this example, we assume the variable `prefectedContextData` contains the pre-fetched data previously injected.\n\n```javascript\n// somewhere in your application initialization code, before mounting your Vue application\napp.use(absmartly.ABSmartlyVue, {\n    sdkOptions: {\n        endpoint: 'https://sandbox-api.absmartly.com/v1',\n        apiKey: ABSMARTLY_API_KEY,\n        environment: \"production\",\n        application: \"website\",\n    },\n    context: {\n        units: {\n            session_id: '5ebf06d8cb5d8137290c4abb64155584fbdb64d8',\n        },\n    },\n    attributes: {\n        user_agent: navigator.userAgent\n    },\n    data: prefetchedContext, // assuming prefectedContext has been inject\n});\n```\n\n#### Selecting a treatment\nThe preferred method to select a treatment is using the `Treatment` component with a named and scoped slot per treatment.\n\nThe slot selection rules are as follows:\n\n* If the context is not ready:\n    - If the `loading` slot exists, select it\n    - Otherwise, select the `default` slot\n\n* Otherwise, if the context is ready:\n    - If a slot with the treatment alias (A, B, C, ...) exists, select it\n    - Otherwise, if a slot with the treatment index exists, select it\n    - Otherwise, select the `default`\n\n* If the selected slot doesn't exist, nothing will be rendered\n\nExample using the treatment alias:\n```html\n<treatment name=\"exp_test_experiment\">\n    <template #A>\n        <my-button></my-button>\n    </template>\n    <template #B=\"{ config }\">\n        <my-button :color=\"config.color\"></my-button>\n    </template>\n    <template #loading>\n        <my-spinner></my-spinner>\n    </template>\n</treatment>\n```\n\nExample using the treatment index:\n```html\n<treatment name=\"exp_test_experiment\">\n    <template #0>\n        <my-button></my-button>\n    </template>\n    <template #1=\"{ config }\">\n        <my-button :color=\"config.color\"></my-button>\n    </template>\n    <template #2=\"{ config }\">\n        <my-other-button :color=\"config.color\"></my-other-button>\n    </template>\n    <template #loading>\n        <my-spinner></my-spinner>\n    </template>\n</treatment>\n```\n\nExample using only the `default` slot:\n```html\n<treatment name=\"exp_test_experiment\">\n    <template #default=\"{ config, treatment, ready }\">\n        <template v-if=\"ready\">\n            <my-button v-if=\"treatment == 0\"></my-button>\n            <my-button v-else-if=\"treatment == 1\" :color=\"config.color\"></my-button>\n            <my-other-button v-else-if=\"treatment == 2\" :color=\"config.color\"></my-other-button>\n        </template>\n        <template v-else><my-spinner></my-spinner></template>\n    </template>\n</treatment>\n```\n\nThe scoped slot properties contain information about the A/B Smartly context and the selected treatment:\n\n```json\n{\n  \"treatment\": 1,\n  \"config\": {\n    \"color\": \"red\"\n  },\n  \"ready\": true,\n  \"failed\": false\n}\n```\n\nIf the experiment is not running, or the context creation failed, the slot will be rendered with the following properties:\n```json\n{\n  \"treatment\": 0,\n  \"config\": {},\n  \"ready\": true,\n  \"failed\": false\n}\n```\n\n#### Setting context attributes\nAttributes can be set in script.\n```javascript\nthis.$absmartly.attribute('user_agent', navigator.userAgent);\n\nthis.$absmartly.attributes({\n    customer_age: 'new_customer',\n});\n```\n\nOr directly in templates with the `attributes` property of the `Treatment` component.\n\n```html\n<treatment name=\"exp_test_experiment\" :attributes=\"{customer_age: 'returning'}\">\n    <template #default=\"{ config, treatment, ready }\">\n        <template v-if=\"ready\">\n            <my-button v-if=\"treatment == 0\"></my-button>\n            <my-button v-else-if=\"treatment == 1\" :color=\"config.color\"></my-button>\n            <my-other-button v-else-if=\"treatment == 2\" :color=\"config.color\"></my-other-button>\n        </template>\n        <template v-else><my-spinner></my-spinner></template>\n    </template>\n</treatment>\n```\n\n\n#### Tracking a goal achievement\nGoals are created in the A/B Smartly web console.\n```javascript\nthis.$absmartly.track(\"payment\", 1000);\n```\n\n#### Finalizing\nThe `finalize()` method will ensure all events have been published to the A/B Smartly collector, like `publish()`, and will also \"seal\" the context, throwing an error if any method that could generate an event is called.\n```javascript\nawait this.$absmartly.finalize().then(() => {\n    window.location = \"https://www.absmartly.com\"\n})\n```\n\n#### Further info\nPlease refer to the [A/B Smartly JavaScript SDK](https://www.github.com/absmartly/javascript-sdk) for more details.\n\n## About A/B Smartly\n**A/B Smartly** is the leading provider of state-of-the-art, on-premises, full-stack experimentation platforms for engineering and product teams that want to confidently deploy features as fast as they can develop them.\nA/B Smartly's real-time analytics helps engineering and product teams ensure that new features will improve the customer experience without breaking or degrading performance and/or business metrics.\n\n### Have a look at our growing list of clients and SDKs:\n- [Java SDK](https://www.github.com/absmartly/java-sdk)\n- [JavaScript SDK](https://www.github.com/absmartly/javascript-sdk)\n- [PHP SDK](https://www.github.com/absmartly/php-sdk)\n- [Swift SDK](https://www.github.com/absmartly/swift-sdk)\n- [Vue2 SDK](https://www.github.com/absmartly/vue2-sdk)\n- [Vue3 SDK](https://www.github.com/absmartly/vue3-sdk)","readmeFilename":"README.md"}