Integrate Optimizely SDK

Author: mikechu-optimizely

package-lock.json

@@ -15,6 +15,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@optimizely/optimizely-sdk": "^4.9.4",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"

package.json

@@ -1,6 +1,24 @@
 <script setup lang="ts">
+import { provide } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import optimizelySdk from '@optimizely/optimizely-sdk'
+
+const optimizelyClient = optimizelySdk.createInstance({ sdkKey: 'K4UmaV5Pk7cEh2hbcjgwe' })
+if (optimizelyClient === null) {
+  throw new Error('Optimizely instance is null')
+}
+
+optimizelyClient.onReady().then(() => {    
+  console.info('optimizelyClient isValidInstance(): ', optimizelyClient.isValidInstance())
+
+  if (!optimizelyClient.isValidInstance()) {
+    console.log('Optimizely client invalid.')
+    return;
+  }
+})
+
+provide("optimizeClient", optimizelyClient)
 </script>
 
 <template>

src/App.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type Result } from '../types/Result'
+
+const props = defineProps({
+  result: Result
+})
+</script>
+
+<template>
+    <pre>
+        User 
+        {{ result.userId }} saw variation
+        {{ result.variation }} and got products sorted by 
+        {{ result.sortMethod }}
+    </pre>
+</template>
+
+<style scoped>
+pre {
+    margin: 0px;
+}
+</style>

src/components/DecisionOutput.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="warning" role="warning">
+      <h2>Warning</h2>
+        <slot> </slot>
+    </div>
+</template>
+
+<style scoped>
+.warning {
+  color: orange;
+  font-weight: bold;
+}
+</style>

src/components/WarningComponent.vue

@@ -0,0 +1,5 @@
+export interface Result {
+  userId: string;
+  variation: string | null;
+  sortMethod: unknown;
+}

src/types/Result.ts

@@ -1,11 +1,65 @@
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import { type Client, type OptimizelyUserContext } from '@optimizely/optimizely-sdk'
+import DecisionOutput from '../components/DecisionOutput.vue'
+import Warning from '../components/WarningComponent.vue'
+import { type Result } from '../types/Result'
+
+const optimizelyClient = inject('optimizeClient') as Client
+
+let projectId: string = ''
+const datafile = optimizelyClient.getOptimizelyConfig()?.getDatafile();
+if (datafile) {
+  projectId = JSON.parse(datafile).projectId
+}
+
+const results: Result[] = []
+for (let i = 0; i < 10; i++) {
+  const userId = (Math.floor(Math.random() * (10000 - 1000) + 1000)).toString();
+
+  const user = optimizelyClient.createUserContext(userId)
+
+  const decision = user?.decide('product_sort')
+  if (!decision) {
+    continue
+  }
+
+  results.push({
+    userId,
+    variation: decision.variationKey,
+    sortMethod: decision.variables['sort_method'],
+  })
+}
+</script>
+
 <template>
-  <div class="run">
+  <section class="run">
     <h1>Experiment Output</h1>
-    <p>[Loop through the results]</p>
-  </div>
+    <output v-if="results.length">
+      <DecisionOutput v-for="result in results" :key="result.userId" :result="result" />
+    </output>
+    <Warning v-else>
+      <p>
+        No results found.
+      </p>
+      <p>Some reasons could include:</p>
+      <ol>
+        <li>Flag was off for everyone.</li>
+        <li>Your sample size of visitors was too small. Rerun, or increase the iterations in the FOR loop.</li>
+        <li>By default you have 2 keys for 2 project environments (dev/prod). Verify in Settings > Environments that you
+          used the right key for the environment where your flag is toggled to ON.</li>
+      </ol>
+      <p>
+        Check your key and project configuration on
+        <a v-if="projectId !== ''"
+          :href="'https://app.optimizely.com/v2/projects/' + projectId + '/settings/implementation'">settings page</a>
+        <a v-else href="https://app.optimizely.com/v2/projects/">settings page</a>
+      </p>
+    </Warning>
+  </section>
 </template>
 
-<style>
+<style scoped>
 @media (min-width: 1024px) {
   .run {
     min-height: 100vh;