Documentation
Publisher integration

Traditional website

Follow this guide to integrate Advisible ads in a traditional website using HTML, CSS and JavaScript.

1. Load script

Add a script to the header of your HTML document that loads the main integration script. This script will in turn load the necessary stylesheets and setup code. Substitute [PUBLISHER_ID] with the ID of your publisher account.

Head tag
<script async src="https://source.advisible.com/[PUBLISHER_ID]/main.js"></script>

2. Add containers

Add container elements to your HTML document where the native ads should be displayed. Substitute [CONTAINER_ID] with the ID of your container.

Container element
<div data-adk-container="[CONTAINER_ID]"></div>

3. 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.

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

    // Initialize the ADK command queue
    window.adk = window.adk || { cmd: [] }

    // 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, load the required templates and attach the containers when the page is ready.

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

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

    const handleReady = () => {
        adk.container.attach()
    }

    document.readyState === 'loading' ?
        document.addEventListener('DOMContentLoaded', handleReady) :
        handleReady()
})

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