Tutorials

How to structure the code

Here we apply some best practices and refactor the Javascript code into a separate file. The script uses a pattern that will attach the library when the page has loaded.

setup.js

adk.cmd.push(() => {
    adk.config()
        .addContainer('my-container', adk.container.config()
            .provider('adk.hello'))
        .apply()
        .init(publisherId)

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

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

Throughout the rest of this guide we will exclude the asynchronous wrapper (adk.cmd.push), the DOMContentLoaded pattern and the HTML code, unless required for the understanding of an example.

In the HTML we then load the setup script asynchronously.

index.html

<!DOCTYPE html>
<html>
<head>
    <script>window.adk = window.adk || { cmd: [] }</script>
    <script async src="https://cdn.advisible.com/adk-1.20.8.js"></script>
    <script async src="setup.js"></script>
</head>
<body>
    <div data-adk-container="my-container"></div>
</body>
</html>

Result

The result is identical to the last example but the structure of the code has improved.

Now it's time to use some of the features.