Optimization Web · Contentful Personalization · contentful/skills · Skills Docs

Optimization Web · Contentful Personalization · contentful/skills · Skills Docs

import { createClient } from 'contentful';
import ContentfulOptimization from '@contentful/optimization-web';

const locale = 'en-US';
const contentful = createClient({
  accessToken: browserConfig.contentfulToken,
  environment: browserConfig.contentfulEnvironment,
  space: browserConfig.contentfulSpace,
});

// Keep this in a module-level singleton and import it wherever it is needed.
export const optimization = new ContentfulOptimization({
  clientId: browserConfig.optimizationClientId,
  environment: browserConfig.optimizationEnvironment,
  locale,
  app: { name: 'my-web-app', version: '1.0.0' },
  defaults: { consent: true }, // Only when application policy permits default-on consent.
});

const { accepted } = await optimization.page();
if (!accepted) throw new Error('The initial page event was blocked');

const baselineEntry = await contentful.getEntry('hero-entry-id', {
  include: 10,
  locale,
});
const { entry } = optimization.resolveOptimizedEntry(baselineEntry);
renderHero(entry);

const optimization = new ContentfulOptimization({
  clientId,
  environment,
  locale: 'en-US',
  contentful: {
    client: contentful,
    defaultQuery: { locale: 'en-US' },
    cache: { maxEntries: 100, ttlMs: 300_000 },
  },
});

await optimization.page();
const { baselineEntry, entry, selectedOptimization } = await optimization.fetchOptimizedEntry('hero-entry-id');

optimization.consent({ events: true, persistence: false });
await optimization.identify({ userId: 'user-123', traits: { plan: 'pro' } });
await optimization.track({ event: 'checkout_completed', properties: { value: 42 } });
optimization.reset();

const { entry, selectedOptimization, optimizationContextId } = optimization.resolveOptimizedEntry(baselineEntry);

element.dataset.ctflEntryId = entry.sys.id;
element.dataset.ctflBaselineId = baselineEntry.sys.id;
if (optimizationContextId) element.dataset.ctflOptimizationContextId = optimizationContextId;
if (selectedOptimization) {
  element.dataset.ctflOptimizationId = selectedOptimization.experienceId;
  element.dataset.ctflVariantIndex = String(selectedOptimization.variantIndex);
}
element.dataset.ctflClickable = 'true';

const { default: attachOptimizationPreviewPanel } = await import('@contentful/optimization-web-preview-panel');

await attachOptimizationPreviewPanel({
  contentful,
  optimization,
  nonce: cspNonce,
});