React components (both client & server) to integrate the browser-side products from Optimizely (Web Experimentation, Data Platform & Content Analytics / Recommendations)

Requirements

Next.JS 14.1+
TypeScript
Access to the Optimizely One Products

Installing & Usage

Start by adding the package to your project: yarn add @remkoj/optimizely-one-nextjs

Add API Routes

Then make the service endpoints available by creating a new API route within Next.JS. For the app router this is done by creating this file:

app/api/me/[[...path]]/route.ts

Put the following code in this file to use the API Route handler from the package:

import { createOptimizelyOneApi } from '@remkoj/optimizely-one-nextjs/server';

const handler = createOptimizelyOneApi()

export const GET = handler
export const POST = handler
export const runtime = 'edge' // 'nodejs' (default) | 'edge'
export const dynamic = 'force-dynamic'
export const dynamicParams = true
export const fetchCache = 'default-no-store'

Add Provider & PageTracker to your layout

Within the global layout (or your "third party providers component", whatever applies best), add the Optimizely One Scripts (Scripts.Header & Scripts.Footer), Context Provider (OptimizelyOneProvider), Page Activator (PageActivator), and - if you want to - the demo gadget (OptimizelyOneGadget).

import { Scripts } from '@remkoj/optimizely-one-nextjs/server'
import { OptimizelyOneProvider, PageActivator } from '@remkoj/optimizely-one-nextjs/client'
import OptimizelyOneGadget from '@remkoj/optimizely-one-nextjs/optimizely-one-gadget'

export type RootLayoutProps = {
    children: React.ReactNode
}

export default function RootLayout({ children }: RootLayoutProps) 
{
    return <html>
        <head>
            <Scripts.Header />
        </head>
        <body>
            <OptimizelyOneProvider value={{ debug: true }}>
                <PageActivator />
                { children }
                <OptimizelyOneGadget />
            </OptimizelyOneProvider>
            <Scripts.Footer />
        </body>
    </html>
}

Instrument your site with additional events

Whenever you want to track additional events, use the provided hook to get to the context and send events.

'use client'
import React, { type FunctionComponent } from 'react'
import { useOptimizelyOne } from '@remkoj/optimizely-one-nextjs/client'

export const YourComponent : FunctionComponent<{}> = props => {
    const opti = useOptimizelyOne()

    function handler() 
    {
        opti?.track({ event: "name", action: "action" })
    }

    return <button onClick={() => handler()}>Output</button>
}

FAQs

What is @remkoj/optimizely-one-nextjs?

Is @remkoj/optimizely-one-nextjs popular?

Is @remkoj/optimizely-one-nextjs well maintained?

Package last updated on 28 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@remkoj/optimizely-one-nextjs

Next.JS Optimizely One toolkit

Requirements

Installing & Usage

Add API Routes

Add Provider & PageTracker to your layout

Instrument your site with additional events

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases