Tutorials

How to display native articles in infinite scroll

Conceptually there is no difference between teaser and article placements other than articles being a more complex type of creative. We use that fact to provide an "infinite" scroll solution, where a native article is loaded in the feed.

setup.js

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

    .addContainer('native-scroll', adk.container.config()
        .provider('adk.placement')
        .lazy()
        .fullWidth()
        .params({
            adapters: {
                'com.advisible.native.article': {
                    afterLoad: ({ err, item, elem }) => {
                        !err && item && adk.container.attach(elem)
                    },
                },
            },
        }))

    .addContainer('native-marking', adk.container.config()
        .fullWidth()
        .sticky()
        .stickyMarginTop(64)
        .stickyZIndex(1)
        .panel(false)
        .provider(({ elem }) => {
            elem.innerHTML = '<div class="native-article__marking">ADVERTISEMENT</div>'
        }))

    .apply()
    .init(publisherId)

Result

Scroll down