Getting started
Vue
Add A/B tests and feature flags to a Vue 3 or Nuxt app with the Vue SDK's provider and composables.
For a complete overview of features in the Vue SDK check out the docs regarding those. For getting started read on. It works the same in Vue 3 and Nuxt.
Install
npm i @obelism/improve-sdk @obelism/improve-sdk-vueSetup
Configure the client
First let's generate our Vue composables and export them so we can import them in multiple places:
import { generateImproveProvider } from '@obelism/improve-sdk-vue'
export const { ImproveProvider, useTestValue, usePostAnalytic, useImproveStatus } =
generateImproveProvider({
organizationId: 'org_…',
environment: 'production',
})The first one we need is the provider that sits around your app (app.vue in Nuxt):
<script setup lang="ts">
import { ImproveProvider } from './improve'
</script>
<template>
<ImproveProvider>
<Menu />
<RouterView />
<Footer />
</ImproveProvider>
</template>Now we can start using the composables in our application.
Consume the test value
Let's say we have the following Menu component:
<template>
<menu>
<a href="/"><Logo /></a>
<nav>
<a href="/">Home</a>
<a href="/products">All products</a>
<a href="/about-us">About us</a>
<a href="/account">Account</a>
</nav>
</menu>
</template>And we want to know if people will find their way to the homepage without having the dedicated Home link. For this we can run an A/B test like so:
<script setup lang="ts">
import { useTestValue } from './improve'
const noHomeLink = useTestValue('no-home-link', 'control')
</script>
<template>
<menu>
<a href="/"><Logo /></a>
<nav>
<a v-if="noHomeLink === 'control'" href="/">Home</a>
<a href="/products">All products</a>
<a href="/about-us">About us</a>
<a href="/account">Account</a>
</nav>
</menu>
</template>Nice, now if we've set up the A/B test as 50/50, half of the visitors no longer see the homepage link in the navigation. But we have no idea yet if people still get to the homepage.
Keep track of visitors
The next step is to send events to Improve on what the visitor is doing. Let's add two events:
- When the visitor sees the menu we mark the start of the A/B test:
menu_view - When the visitor clicks a homepage link we mark the end of the A/B test:
home_link_click
Let's also add a scope to the click event, so we can see the split between clicks on the logo and the navigation.
<script setup lang="ts">
import { watch } from 'vue'
import { useImproveStatus, usePostAnalytic, useTestValue } from './improve'
const postAnalytic = usePostAnalytic()
const noHomeLink = useTestValue('no-home-link', 'control')
const status = useImproveStatus()
// Once the SDK is set up: before that nothing is sent.
watch(
status,
(current) => {
if (current === 'setup') postAnalytic('menu_view', 'menu')
},
{ immediate: true },
)
</script>
<template>
<menu>
<a href="/" @click="postAnalytic('home_link_click', 'logo')"><Logo /></a>
<nav>
<a
v-if="noHomeLink === 'control'"
href="/"
@click="postAnalytic('home_link_click', 'nav')"
>
Home
</a>
<a href="/products">All products</a>
<a href="/about-us">About us</a>
<a href="/account">Account</a>
</nav>
</menu>
</template>usePostAnalytic() takes no arguments and returns a function you call with an event name and a required scope: events are test-independent and attributed server-side. What ties this component's events to the test is reading noHomeLink: reading a variant emits the exposure the server joins events against. Audience-excluded and holdout visitors aren't exposed, so their events aren't counted toward the test.
Note
Recommended default: alongside any custom events, fire a page_view once per
page load with the current path as its scope (postAnalytic('page_view', route.path)). See Track page views like Google
Analytics;
it's the default start event for tests and powers the Events dashboard's
Popular pages report.
Done!
Now it's time to publish your first A/B test and measure what your visitors are doing! With Nuxt, the Nuxt SDK can also decide a test on the server, before the first paint.