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