Native Ads

Next.js integration

Follow this guide to integrate Advisible ads in a Next.js application. This example uses App Router, but we also provide examples for Pages Router.

1. Install adk-react

adk-react is a tiny React wrapper for ADK with no other dependencies than React.

Install

npm install @advisible/adk-react

2. Load script

If you are using Managed integration, load the main.js script as shown below. Substitute PUBLISHER_ID with your id. For reference, see the example repository.

Example

import Script from 'next/script'

export default function RootLayout({ children }) {
    return (
        <html>
            <Script src="https://source.advisible.com/PUBLISHER_ID/main.js" />
            <body>
                {children}
            </body>
        </html>
    )
}

3. Add containers

Place AdkContainers where you want to display ads. Substitute CONTAINER_ID with your id. For reference, see the example repository.

Example

import { AdkContainer } from '@advisible/adk-react'

export default function Page() {
    return (
        <>
            <AdkContainer id="CONTAINER_ID" />
            {/* ... */}
        </>
    )
}

4. Setup ADK reset

Advisible's default behavior is to not load multiple ads from the same campaign in the same page load. When the user navigates a single page application (SPA), the page is not reloaded. Therefore, we provide a way of resetting the library by supplying a trigger string to the useAdkReset hook.

In this example we trigger a reset when the path changes. If a change in the URL query should also reset ADK, include the parameter in the trigger string. For reference, see the example repository.

Example

'use client'

import { usePathname } from 'next/navigation'
import { useAdkReset } from '@advisible/adk-react'

export default function MyComponent() {
    const pathname = usePathname()
    useAdkReset(pathname)

    // ...
}