Documentation
Tutorials

Hello, world!

The tutorials use runnable code examples to demonstrate Advisible Development Kit (ADK) and show how it can be used to create professional ad integrations. The client-side ad serving parts of the platform are built on top of ADK, so it is a good idea to get familiar with ADK first.

This first example introduces the fundamentals of loading content in ADK containers.

Here is what the code does:

  1. Loads and configures the library. In this case we define a container called my-container which loads content from the builtin adk.hello provider.
  2. Creates a corresponding container element in the body which will display the loaded content.
  3. Attaches the library to the container element which causes the container to request content from the provider.
index.html
<!DOCTYPE html>
<html>
<head>
    <script>window.adk = window.adk || { cmd: [] }</script>
    <script async src="https://cdn.advisible.com/adk-1.19.0.js"></script>
    <script>
        adk.cmd.push(() => {
            adk.config()
                .addContainer('my-container', adk.container.config()
                    .provider('adk.hello'))
                .apply()
                .init(publisherId) // <-- insert your publisher id here
        })
    </script>
</head>
<body>
    <div data-adk-container="my-container"></div>
    <script>
        adk.cmd.push(() => {
            adk.container.attach()
        })
    </script>
</body>
</html>

Note. The init call in the code above has a parameter publisherId that is not defined. If you do not yet have an Advisible ID, feel free to evaluate the library by just omitting the parameter.

Result

The result may not look much. It's just a colored box not doing anything. However, in the following examples we will show you how the container abstraction opens a toolbox for making professional ad integrations.

But let's start with some refactoring.