Skip to main content

Personalization Integration Setup

This guide walks you through setting up the personalization integration in your Archibald application, matching the patterns used in the Shop template.

Server-Side Configuration​

To enable personalization and feature flags on the server, register the PersonalizationModule in your CoreServer implementation (e.g., templates/shop/src/shop/server/module/server.tsx).

Module Registration​

import { PersonalizationModule } from '@archibald/personalization';
import { GrowthBookProvider } from '@archibald/growthbook';

// ... inside your Server class
public async initModules() {
    await this.registerModules([
        new PersonalizationModule({
            provider: new GrowthBookProvider({
                config: () => ({
                    apiHost: this.configService.get('server.growthBook.host'),
                    clientKey: this.configService.get('server.growthBook.clientKey'),
                    streaming: true,
                    skipCache: true,
                    timeout: 3000
                })
            })
        }),
        // ... other modules
    ]);
}

Client-Side Configuration​

1. Create the Personalization Client​

Create a creator file for the personalization client (e.g., shop/client/api/creators/personalization.ts). Pass a concrete adapter — for a GrowthBook setup this is the GrowthBookAdapter from @archibald/growthbook (the PersonalizationAdapter from @archibald/personalization is only the base class to extend for custom adapters).

import { PersonalizationClient } from '@archibald/personalization';
import { GrowthBookAdapter } from '@archibald/growthbook';
import { api } from 'shop/client/api';

export default new PersonalizationClient({ 
    adapter: GrowthBookAdapter, 
    api 
});

2. Provide the Client to your App​

Wrap your application with the PersonalizationClientProvider in your main App.tsx.

import { PersonalizationClientProvider } from '@archibald/personalization';
import PersonalizationClient from 'shop/client/api/creators/personalization';

function App() {
    return (
        <PersonalizationClientProvider client={PersonalizationClient}>
            {/* Your application components */}
        </PersonalizationClientProvider>
    );
}

Available Adapters​

The @archibald/personalization package uses an adapter pattern to connect to different personalization providers:

  • GrowthBookAdapter: Connects to the GrowthBook feature flagging and A/B testing platform.
  • PersonalizationAdapter: The base adapter class for custom implementations.