NodeBB - Getting ads working

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();
// }

Save and close the file.

/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.

Update:
I now managed to keep Ajax, resulting in only 1 line which needs to be changed, instead of all the others. Gonna share it later. However, keep in mind that this only works with DFP.

jarey

@AOKP Waiting to see your solution. Thanks for sharing.

Here the solution:

Open /public/src/ajaxify.js. Go to line 174 and make it look like this:

	ajaxify.end = function(url, tpl_url) {
		function done() {
			if (--count === 0) {
				$(window).trigger('action:ajaxify.end', {url: url, tpl_url: tpl_url, title: ajaxify.data.title});
			googletag.pubads().refresh();
			}
		}

Save it and then restart NodeBB.

psychobunny

You could likely do

<script>
$(window).on('action:ajaxify.end', function(){
	googletag.pubads().refresh();
});
</script>

In your custom header

VCraft

awesome :D

Jenkler

It world be nice with a plugin for this. Like the Adsence plugin but for DFP :)

shri

@Jenkler said in NodeBB - Getting ads working:

It world be nice with a plugin for this. Like the Adsence plugin but for DFP :)

I'm working on it as of today.

Well, as soon as I can figure out the hooks and how to load from github.

Jenkler

Nice, Adsence plugin works fine except for the reload issue. Missing a lot of views ;( Would be nice if we could solve this with DFP!

AOKP

@Jenkler the reload issue cannot be resolved so easily due to a change in the ajaxify.js.

Nonetheless I see no issue why you don't want to use DFP. Sure we discussed this previously, but if it is about monetization everything is right for me as long as it gets the job done.

Jenkler

But if I use DFP with only adsence. Is the reloadad issue resolved? At the momemet there is no plain DFP plugin like the adsence plugin. Hack the code is not a good solution. Is it possible to make a plugin that fixes all the nessesary changes?

exodo

@Jenkler said in NodeBB - Getting ads working:

But if I use DFP with only adsence. Is the reloadad issue resolved? At the momemet there is no plain DFP plugin like the adsence plugin. Hack the code is not a good solution. Is it possible to make a plugin that fixes all the nessesary changes?

+1 on that
hacking the code is a headache for futures updates
a king of solution should be offered by plugin or working with @administrators on the core

AOKP

@exodo how is this hacking the code?
This solution is more update prove than anything else, only a major change in the ajaxify.js would make it stop.
Adding the code into the custom header is definitely faster and efficient than downloading a plugin.

exodo

@AOKP said in NodeBB - Getting ads working:

@exodo how is this hacking the code?
This solution is more update prove than anything else, only a major change in the ajaxify.js would make it stop.
Adding the code into the custom header is definitely faster and efficient than downloading a plugin.

I was talking about the first solutions with public/src edits

AOKP

Thats a very old approach and should be considered as deprecated.

Jenkler

@AOKP said in NodeBB - Getting ads working:

@exodo how is this hacking the code?
This solution is more update prove than anything else, only a major change in the ajaxify.js would make it stop.
Adding the code into the custom header is definitely faster and efficient than downloading a plugin.

So there is a good way without hack to add DFP (reloads when clicking around ie more views). For documentation sake, could you plz explain how i can get the same functions at the adsence-plugin with DFP without hacking the sourcecode. Custom header and widget are allowed

Same add for all (responsive Adsencecode in a responsive DFP container)
NO Hacking
Ads in first post
Ads in header
Ads in footer
Better solution than adsence with support for reload of adds when clicking around on the page. (Generats more views than the setup I have today)

If this is possible I would change in a heartbeat ;)

Jenkler

Focus on this thread!
https://community.nodebb.org/topic/9638/nodebb-and-ads-a-never-ending-story-part-2