Native Ads

Managed integration

Depending on the technologies in your frontend, you can decide how tightly you want to integrate Advisible. We offer a service called Managed Integration, where we build and maintain the necessary source code, while keeping the integration as thin as possible. In many cases the site owner will only need to add a single script to the header of the page and our developers will handle the rest.

If you want to manage the integration yourself, you can either use the same structure, or you can skip the main script and instead load the styles and setup directly in your HTML document. If you have a more advanced site, such as a single page application, we recommend contacting us.

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

(function () {
    // 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

    window.adk = window.adk || { cmd: [] }
    window.advisible = { publisherId, resourceRoot }

    // Load Advisible Development Kit
    loadScript('https://cdn.advisible.com/adk-1.20.8.js')

    // Load integration resources
    // Cache busting can be done by bumping the number n in ?v=n
    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 ADK and attach the containers when the page is ready.

setup.js

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

    adk.config()
        // <-- Insert ADK config here (see previous tutorials)
        .apply()
        .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.
Install the main script inside the site header tag. Substitute PUBLISHER_ID with your id.
Head tag
```
<script async src="https://source.advisible.com/PUBLISHER_ID/main.js"></script>
```