vuestorefront · michaelKurowski · Apr 22, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 30, 2025
diff --git a/docs/content/guides/8.instrumentation.md b/docs/content/guides/8.instrumentation.md
@@ -0,0 +1,109 @@
+If you are extending your contract with Alokai and joined us in 2025 or earlier, you may be required to install Alokai instrumentation as part of your storefront setup.
+
+The instrumentation has to be enabled for storefront and middleware separately.
+Please refer to the appropriate section below based on your current setup:
+
+# Storefront
+::tabs{:titles='["Next.js App Router", "Nuxt 3", "Next.js Page Router", "Nuxt 2"]'}
+
+#tab-1
+If you are using `@vue-storefront/next` version `6.1.0` or later, no action is required.
+
+Otherwise update the said package to the required version, or please install the `@alokai/instrumentation-next-component` package and add it to your main layout file:
+
+```diff
+  import { AlokaiInstrumentation } from '@alokai/instrumentation-next-component';
+  ...
+  return (
+    <html lang={locale}>
+      <head>
+        <link href="res.cloudinary.com" rel="preconnect" />
+      </head>
+      <body className={classNames(fontHeadings.variable, fontBody.variable, 'font-body')}>
+        <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert')}>
+          <PublicEnvProvider>
+            <Providers initialCurrency={currencies} sdkOptions={sdkConfig}>
++              <AlokaiInstrumentation />
+              {children}
+            </Providers>
+          </PublicEnvProvider>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+```
+
+#tab-2
+If you are using `@vue-storefront/nuxt` version `9.1.0` or later, no action is required.
+
+Otherwise update the said package to the required version, or please install the `@alokai/instrumentation-nuxt3-module` package and add it to `modules` array in your `nuxt.config.ts`:
+
+```diff
+  modules: [
+    ...
+    '@vue-storefront/nuxt',
+    '@storefront-ui/nuxt',
+    'nuxt-jsonld',
+    '@nuxt/eslint',
++    '@alokai/instrumentation-nuxt3-module',
+  ],
+```
+
+#tab-3
+Go to `pages/_app.tsx` and add `AlokaiInstrumentation` component inside the `SdkProvider`.
+
+```diff
+import { AlokaiInstrumentation } from '@alokai/instrumentation-next-component';
+
+...
+  return (
+
+    <SdkProvider>
++       <AlokaiInstrumentation />
+    ...
+  </SdkProvider>
+)
+```
+
+#tab-4
+
+In your `nuxt.config.js` add the following entry to the `buildModules` array:
+
+```diff 
+  buildModules: [
+    '@nuxtjs/composition-api/module',
+    '@nuxt/typescript-build',
+    '@nuxtjs/style-resources',
+    '@nuxtjs/pwa',
++   '@alokai/instrumentation-nuxt2-module',
+```
+
+
+# Middleware
+If you are using `@alokai/connect` version `1.1.0`, or newer, no action is required.
+For older versions, either upgrade the said package to the required version, or install the `@alokai/instrumentation` package and add the `traceExtension` to the `extensions` array of your e-commerce integration:
+
+
+```diff
++ import { traceExtension } from '@alokai/instrumentation'
+
+
+export const config = {
+  location: 'name-of-your-integration-package',
+  configuration: {
+    ...
+  },
+
+  extensions: (extensions: ApiClientExtension[]) => [
+    ...extensions,
++   traceExtension,
+    unifiedApiExtension,
+    cdnExtension,
+    configSwitcherExtension,
+  ],
+} satisfies Integration<Config>;
+```
+
+# Verifying that it works
+To verify that everything is working as intended, please contact our support team.
+