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.
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: function () {
return window.location.pathname.split('/')[3]
},
afterLoad: function ({ 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(content => document.body.innerHTML = content)
}
},
}))
.addContainer('native-marking', adk.container.config()
.fullWidth()
.sticky()
.provider(function({ elem }) {
elem.innerHTML = '<div class="native-article-marking">SPONSORED CONTENT</div>'
}))
.apply()
.init(advisibleID)
Template
<div class="native-article">
<div data-adk-container="native-marking"></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>
Result