Displaying Ads

Adding zones to a page

Note

If you are using a single page application then Dynamic Loading will be mandatory to implement.

The following ad formats are supported:

Banners
Native Ads
Sticky Banners
Instant Messages

Note

Multi-Format ads are not yet supported. However, you can still still use NeverBlock with the single Banners that you have set up for use in Multi-Format ads. This way you can use Multi-Format ads for standard users, and NeverBlock-enabled banners to target users with ad blockers.

Please note this script will show ads only when a user has an Ad Blocker installed and enabled. Do not remove any existing standard advertising tags.

In this example we will be using the configuration described in Configuration - Renaming the files. Ensure your path and filenames match your configuration.

Placing frontend_loader.js on the page

Inside the <body> tag on your page at the very top add the following:

<script type="text/javascript" src="/nb/fro_lo.js"></script>

This should be included on the page only once. It should also be above all other zone scripts.

Adding a NeverBlock zone

The following code snippets are to declare your ad zones. They should be put it in DOM where you want the zone to be displayed. You can add multiple banner blocks like this on a page. Be careful not to place them in divs with classes or specific style elements relevant to showing ads, as these divs will be targeted by adblockers (E.g. class="ad-footer", style="width:300px;height:250px;").

To add an ad zone do the following (make sure to replace the value for idzone with your zone id):

<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        //Code to add zones can be placed multiple times on page
        ExoLoader.addZone({"idzone":"111"});
        
        //If you want to use sub id, add a numeric sub parameter to object, passed to addZone
        //ExoLoader.addZone({"idzone":"111", "sub": "1"});
    })();
</script>

Serving the ads - backend_loader.php

After all the addZone() declarations having been included we want to serve the ads. To do this we will use the serve function. It serves data for all previously declared ad zones and should typically be called only once on the page. The max number of zones that can be called on a page is 20. Exceptions for this are when dynamically loading a page, described in Dynamic Loading

<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        ExoLoader.serve({"script_url":"/nb/ba_lo.php"});
    })();
</script>

Dynamic loading (Single page applications)

It is possible to pass a container reference to the DOM element to which the banner will be appended. This means when the serve is called it will know where to place to ad zone. This is done as follows:

<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        ExoLoader.addZone({"idzone":"111", "container": document.getElementById('banner1_and_placeholder')});
    })();
</script>

It is also possible to call the serve() with force flag to serve the ads at the moment you choose (e.g. in a function after rendering part of the page) instead of on page load:

<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        ExoLoader.addZone({"idzone":"111"});
        ExoLoader.addZone({"idzone":"222"});
        ExoLoader.addZone({"idzone":"333"});
        ExoLoader.serve({"script_url":"/nb/ba_lo.php", "force": true});
    })();
</script>
  ...
<script type="text/javascript">
    (function () {      
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;

        ExoLoader.addZone({"idzone":"444", "container": document.getElementById('banner4_placeholder')});
        ExoLoader.serve({"script_url":"/nb/ba_lo.php", "force": true});
    })();
</script>

The serve() can be called multiple times. After each serve() call the ExoLoader will be cleared of previous addZone() calls. So only the banners you call addZone() for after a serve will show in the next serve().

Domain base

If you are an existing ExoClick customer then you may have regular ad zones on your site. If you are using a domain other *.exoclick.com (e.g ads.exosrv.com) then you should set the domain_base of for detector object (ExoLoader.getDetector()) to “exosrv.com” before the first addZone call. This is done as shown below:

<script type="text/javascript" src="/nb/fro_lo.js"></script>
<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        ExoLoader.getDetector().domain_base = "exosrv.com";
    })();
</script>
...
<!-- First addZone call -->
<script type="text/javascript">
    (function () {
        function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val=" \ndocument.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){}var myEl={el:null};try{var event=new CustomEvent("getexoloader",{detail:myEl})}catch(e){(event=document.createEvent("CustomEvent")).initCustomEvent("getexoloader",!1,!1,myEl)}window.document.dispatchEvent(event);var ExoLoader=myEl.el;
        
        ExoLoader.addZone({"idzone":"111"});
    })();
</script>

No ads showing

If there are no ads showing first check the diag.php file to see if any of the configurations are incorrect. If all tests are successful create a test page with just one zone to ensure it works in isolation. At this point if no ads are showing see our Help section for additional details.