This article will help you setting up ads in your live feed. The ads are easily injected to the channel.
The following example will show ad implementation with the ad on the 3rd position and from that- every 3 posts.
Hook into the channel options using hookOptionsAfterDefaults. Now you can customize your channel after the initial default version is set.
NcPosts.hookOptionsAfterDefaults(options => {
});
If we get channel options that allows us to hook into the posts list.
options.starting = NcPosts.appendFunction(options.starting, d => {
const listManager = d.listManager;
});
Let’s add an observer for changes in the list.
listManager.listChanged = NcPosts.appendFunction(listManager.listChanged, checkBindings);
Create functionality to inject ad factory to the posts list. You can set custom intervals.
const injectAdAfter = (container: HTMLElement) => {
const ad = adFactory();
container.parentNode.insertBefore(ad, container.nextSibling);
};
function checkBindings(postBindings: NcPosts.PostListBinding[]) {
//If there's no ad set before
if (!lastRollingAdBinding && postBindings.length >= 1) {
lastRollingAdBinding = postBindings[0];
injectAdAfter(lastRollingAdBinding.container);
}
const everyNPosts = 3;
let adIndex = postBindings.indexOf(lastRollingAdBinding);
if (adIndex >= 0) {
let newRollingBinding: NcPosts.PostListBinding = null;
while (newRollingBinding = postBindings[adIndex + everyNPosts]) {
adIndex += everyNPosts;
lastRollingAdBinding = newRollingBinding;
injectAdAfter(lastRollingAdBinding.container);
}
}
}
Below you can see the final result.
NcPosts.hookOptionsAfterDefaults(options => {
//Hook in ads on lists
options.starting = NcPosts.appendFunction(options.starting, d => {
const listManager = d.listManager;
//Hook into to display rolling ads for every nth post
let lastRollingAdBinding: NcPosts.PostListBinding = null;
//We observe changes to the list and add the appropriate ads at the appropriate locations
listManager.listChanged = NcPosts.appendFunction(listManager.listChanged, checkBindings);
checkBindings(listManager.postBindings);
const injectAdAfter = (container: HTMLElement) => {
const ad = adFactory();
container.parentNode.insertBefore(ad, container.nextSibling);
};
function checkBindings(postBindings: NcPosts.PostListBinding[]) {
//If there's no ad set before
if (!lastRollingAdBinding && postBindings.length >= 1) {
lastRollingAdBinding = postBindings[0];
injectAdAfter(lastRollingAdBinding.container);
}
const everyNPosts = 3;
let adIndex = postBindings.indexOf(lastRollingAdBinding);
if (adIndex >= 0) {
let newRollingBinding: NcPosts.PostListBinding = null;
while (newRollingBinding = postBindings[adIndex + everyNPosts]) {
adIndex += everyNPosts;
lastRollingAdBinding = newRollingBinding;
injectAdAfter(lastRollingAdBinding.container);
}
}
}
});
});