Overview

This is a guide on how to make the required changes on your website to integrate Advisible ads. There are different approaches to this depending on the type of website and your preferences, but basic web development knowledge and this guide are all you need to get started. For integrations in environments other than the web, for example newsletters and mobile apps, please refer to the pages Custom placement query and Server-side rendering.

We offer a service where we create the integration complete with all the necessary source code and instructions customized for your website – please contact us if you are interested.

Below is a bare minimum example of how to set up an ADK container for loading ads where all the integration code is inlined within the HTML source. The prerequisite for this example is a placement named native-teaser with a source using the com.advisible.native.teaser adapter. The Placements page explains how to set this up. The comments in the code explain what each step does.

<!DOCTYPE html>
<html>
<head>
    <!-- Initialize the ADK command queue -->
    <script>window.adk = window.adk || { cmd: [] }</script>
    <!-- Load the ADK library asynchronously -->
    <script async src="https://cdn.advisible.com/adk-1.24.0.js"></script>
    <!-- Configure ADK -->
    <script>
        adk.cmd.push(() => {
            adk.config()
                // Add a template for the native teaser adapter
                .addTemplate('com.advisible.native.teaser', adk.template.config()
                    .string('<div>%headline%</div>'))
                // Add a container that loads content from the adk.placement provider
                .addContainer('native-teaser', adk.container.config())
                // Initialize ADK with the publisher ID
                .init('[PUBLISHER_ID]') // <-- Substitute [PUBLISHER_ID] with your ID
        })
    </script>
</head>
<body>
    <!-- The corresponding container element which will display the loaded content. -->
    <div data-adk-container="native-teaser"></div>
    <!-- Attach the container element which causes it to request content from the provider. -->
    <script>
        adk.cmd.push(() => {
            adk.container.attach()
        })
    </script>
</body>
</html>

Although the example above is fully functional, in a real-world scenario it is recommended to move the integration code into dedicated JavaScript, HTML and CSS files for better maintainability and readability. The following guides demonstrate how to do this step-by-step for traditional websites and Next.js applications respectively, with integration code hosted by our Source Service to keep the integration as thin as possible. If you are using other frameworks, please contact support for further instructions.

There is also a dedicated guide on how to prepare your site for the True Native landing page.