Display advertiser name in the marking

This example shows how to display the advertiser name in the marking. First, we add a ADK parameter element to the marking container in the article template and bind it to the advertiser name.

Template

<div class="native-article">
    <div data-adk-container="native-marking">
        <input data-adk-param="advertiser" value="%advertiser%">
    </div>
    <img class="native-article-image" alt="%headline%" %srcAttrs% />
    <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>

Then we read the parameter value inside the marking provider and produce the desired element.

Provider

adk.container.addProvider('native-marking', {
    load: function({ elem, params }) {
        elem.innerHTML = '<div class="native-article-marking">SPONSORED BY ' + params.advertiser + '</div>'
    }
})

Setup

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

    .addContainer('native-scroll', adk.container.config()
        .provider('adk.placement')
        .fullWidth()
        .params({
            adapters: {
                'com.advisible.native.article': {
                    afterLoad: function ({ elem }) {
                        adk.container.attach(elem)
                    },
                },
            },
        }))

    .addContainer('native-marking', adk.container.config()
        .provider('native-marking')
        .fullWidth()
        .sticky()
        .stickyMarginTop(64)
        .stickyZIndex(1))

    .apply()
    .init(advisibleID)

Result