
Many times I've got asked how I am using ads on my NodeBB installation, so here is how I do it.
The problem
Due to Ajax the ad code often doesn't refresh even if another site is getting loaded. Sometimes the ads just dissapear, because they are not loaded by Ajax. The result are lost impression and so lost income.
In this tutorial I will show you how to remove Ajaxifcation without breaking any functionalities of NodeBB.
There might be better ways how to load ad code within Ajax, however, this approach is fairly easy and only takes a few minutes to be done.
And just to add it, DFP code doesn't works as well sometimes!
The solution
As promised the solution is fairly easy and only takes a few steps. All we need to do is to edit a few files, however, they may differ for the chosen ad platform.
DFP/AdSense:
/public/src/ajaxify.js
- Jump to line 314 and comment everything out till line 317. It should look like this:
// if (window.history && window.history.pushState) {
// Progressive Enhancement, ajaxify available only to modern browsers
// ajaxifyAnchors();
// }
/public/src/modules/navigator.js
- Go to line 131 and replace the code with this one until line 165.
navigator.scrollUp = function () {
$('body,html').animate({
scrollTop: $(window).scrollTop() - $(window).height()
});
googletag.pubads().refresh();
};
navigator.scrollDown = function () {
$('body,html').animate({
scrollTop: $(window).scrollTop() + $(window).height()
});
googletag.pubads().refresh();
};
navigator.scrollTop = function(index) {
if ($('li[data-index="' + index + '"]').length) {
navigator.scrollToPost(index, true);
} else {
ajaxify.go(generateUrl());
}
googletag.pubads().refresh();
};
navigator.scrollBottom = function(index) {
if (parseInt(index, 10) < 0) {
return;
}
if ($('li[data-index="' + index + '"]').length) {
navigator.scrollToPost(index, true);
} else {
index = parseInt(index, 10) + 1;
ajaxify.go(generateUrl(index));
}
googletag.pubads().refresh();
};
- It might be possible to call the
googletag.pubads()refresh();
in the scrollToPost()
function, however I experienced some issues with it and therefore suggest sticking to this.
/node_modules/nodebb-plugin-composer-default/static/lib/composer.js
- This one looks more complicated than it actually is. Go to line 54 at the
removeComposerHistory
function and replace history.back();
with location.reload();
. Do the same at line 583.
-
You now may proceed and add the DFP anywhere you want. For additional ad positions (for example under the breadcrumb) you need to edit your template, but you should be able to do this by yourself. Please note that you need to use asynchronous tags to use the refresh function.
-
Lastly restart NodeBB and everything should be up and running.
This will most likely work for other ad platform as well, however I have not done any test with them yet, as I am using AdExchange (provided over DFP). If you want to use other platforms you only need edit the ajaxify.js.
Closing notes:
Most of these changes are not upgrade persistent, which means you might need to reapply them everytime you upgrade NodeBB.
However, unless you aren't on the master branch it might work just fine.
Bonus - Move widget positions
As I personally wasn't in need of a sidebar I decided to move it and make the sidebar widget appear after my first post instead.
/public/src/widgets.js
- Jump to line 64 and change the code till line 66 to this:
} else {
$('.posts >li:first-child').after($('<div class="row"><div widget-area="sidebar" class="col-xs-12"></div></div>'));
}
- Save the file and restart NodeBB.
Bonus - Block AdBlock users
Isn't this risky? No!
Blocking AdBlock users increased my revenue around 500% and I didn't even lost a single user.
All what you need is to use "BlockAdBlock", which you can find here: http://blockadblock.com/
It is free to use, so be sure to give it a shot.
Bonus - Why should I use DFP?
DFP has many benefits over AdSense. It is like switching from an automatic gear to a manual one. You simply take full control over your ads and therefore your earnings. It might be a bit difficuilt at the beginning, however with the time you will get used to it. For me personally it took 3 days to understand most of its features, but the results speak for themselves - it is worth trying it.
For example you can set DFP up with AdSense and then ad another ad network.
Lets make a short example.
When we only use AdSense we are going to have a CPM of around 0,20€ (0,22$). However, if we add another ad platform (lets call it XYZ) DFP will show the ad which pays best. So if the bid of AdSense is only 0,20€, while XYZ offers 0,25€ (0,28$) the XYZ ad will be shown.
So AdSense will have to compete with a third party provider to win the bid. This means that the CPM is going to increase. So you might end up getting 0,35€ (0,40$) CPM. DFP allows you to add as many ad providers as you want. In my use case AdExchange competes with AdSense, so we have a 100% fill rate and are sure to always get the best price as possible for the served impressions. Furthermore you can set your own price floors, however, explaining this in detail would blow the page.