Tutorials

Production-like native article landing page

A sticky marking has been added to the article to show that the content is sponsored. Styling and some error handling has been added.

Setup
adk.config()
    .addTemplate('com.advisible.native.article', adk.template.config()
        .url('article.html'))

    .addContainer('native-article', adk.container.config()
        .provider('adk.native.article')
        .params({
            itemId: ..., // <-- Insert id extraction command here.
            afterLoad: ({ err, item, elem }) => {
                if (!err && item) {
                    adk.container.attach(elem)
                    item && (window.document.title = item.headline)
                } else {
                    fetch('/404.html')
                        .then((response) => response.text())
                        .then((body) => document.body.innerHTML = body)
                }
            },
        }))

    .addContainer('native-marking', adk.container.config()
        .fullWidth()
        .sticky()
        .panel(false) /* Hide from ADK Panel */
        .provider(({ elem }) => {
            elem.innerHTML = '<div class="native-article__marking">ADVERTISEMENT</div>'
        }))

    .apply()
    .init(publisherId)
Template
<div class="native-article">
    <div data-adk-container="native-marking"></div>
    <figure class="native-article-image">
        <img alt="%headline%" %srcAttrs% />
        <figcaption>%assetCaption%</figcaption>
    </figure>
    <div class="native-article-text">
        <div class="native-article-advertiser">%advertiser%</div>
        <div class="native-article-headline">%headline%</div>
        <div class="native-article-lead">%lead%</div>
        <div class="native-article-body">%body%</div>
    </div>
</div>
Result