Skip to content

docs: page views #7423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions docs/content/guides/8.instrumentation.md
Original file line number Diff line number Diff line change
@@ -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.