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.

Refer to our repository of native templates for examples on styling.

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)
                }
            },
        }))

Template

<div class="native-article">
    <div class="native-article__marking">ADVERTISEMENT</div>
    <figure class="native-article__image">
        <img alt="%headline%" %srcAttrs% />
        <figcaption>%assetCaption%</figcaption>
    </figure>
    <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>

Result