Tutorials

Display advertiser name in the marking

This example shows how to display the advertiser name in the marking. First, we add an 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>
    <!-- The rest of the article template... -->
</div>

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

Setup

adk.config()
    // <-- Template loading and ad container config

    .addContainer('native-marking', adk.container.config()
        .provider(({ elem, params }) => {
            elem.innerHTML = `<div class="native-article__marking">ADVERTISEMENT &bull; ${params.advertiser}</div>`
        })
        .fullWidth()
        .sticky()
        .stickyMarginTop(64)
        .stickyZIndex(1))

    .apply()
    .init(publisherId)

Result