Publisher integration

Next.js application

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

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

Install command

npm install @advisible/adk-react

2. Load script

Load the main integration script as shown below. This script will in turn load the necessary stylesheets and setup code. Substitute [PUBLISHER_ID] with the ID of your publisher account. 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

Add AdkContainer elements to your HTML document where the native ads should be displayed. Substitute [CONTAINER_ID] with the ID of your container. For reference, see the example repository.

Example

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

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

4. Set up 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)

    // ...
}

5. Create source code files

Go to the Source Code view in Advisible Console. Create a new file main.js, which will be the uncached entrypoint that bootstraps the integration. Initialization of the adk.cmd queue and container attach/detach is handled automatically by adk-react.

main.js

(() => {
    // Use this to disable the integration when the adktest cookie is not set
    // This is useful if you are working directly in a production environment
    // if (document.cookie.indexOf('adktest=1') < 0) return

    // Perform a client side origin assertion (optional)
    // Substitute with your own domain
    if (document.location.origin !== 'https://www.example.com') { return }

    // Utility functions for loading resources
    const loadScript = (src) => { const el = document.createElement('SCRIPT'); el.setAttribute('src', src); document.head.appendChild(el) }
    const loadStyles = (href) => { const el = document.createElement('LINK'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', href); document.head.appendChild(el) }

    // Use this to disable TCFv2 consent checks
    // This is useful when debugging issues related to a Consent Management Platform (CMP)
    // window.__ADK_TCFAPI__ = false

    // Substitute [PUBLISHER_ID] with your ID
    const publisherId = '[PUBLISHER_ID]'
    const resourceRoot = 'https://source.advisible.com/' + publisherId

    // Expose publisher ID and resource root for use in setup.js
    window.advisible = { publisherId, resourceRoot }

    // Load the ADK library
    loadScript('https://cdn.advisible.com/adk-1.24.0.js')

    // Load integration resources
    // Cache busting can be done by bumping the number
    loadScript(resourceRoot + '/setup.js?v=1')
    loadStyles(resourceRoot + '/style.css?v=1')
})()

Create setup.js. This script is loaded by the main script. It will configure containers and load the required templates.

setup.js

adk.cmd.push(() => {
    const { publisherId, resourceRoot } = window.advisible

    adk.config()
        // <-- Insert template and container config here
        .init(publisherId)
})

Create and implement the HTML templates and CSS stylesheets referenced by the above scripts. See the tutorials for examples.