Example – banner click reward


See also: Examples List



Wouldn’t it be nice to be able to motivate your visitors to click on the banners by giving then some satoshi reward? 😉 Well, now you can…

ATT! Some ad networks explicitly prohibit to provoke banners clicks by any means, so we strongly recommend to check the user agreements first!

So, let’s get to it. Firstly, go create a Remote Faucet (or several ones). If you are not sure how to do it – check this example. Grab the Faucet ID – it will be handy soon.
Now, let’s wrap your banner code into a DIV, somthing like that:

<div id='banner_wrap_1' style='padding:10px; width:750px;border:1px dotted red;'>
<!-- your horizontal banner code goes here -->
</div>

Now, a bit of javascript code:

faucet_on_click = function(banner_wrapper_id,faucet_id,faucet_wrapper_id)
{
    if(!faucet_wrapper_id){  //not set
        faucet_wrapper_id = banner_wrapper_id;//will use one for the banner
    }
    
    var monitor = setInterval(function(){
        var elem = document.activeElement;
        if(elem && (elem.tagName == 'IFRAME') && (document.getElementById(banner_wrapper_id).contains(elem))){
            clearInterval(monitor); //stop monitoping
            document.addEventListener('visibilitychange', function () {
               var o = document.getElementById(faucet_wrapper_id);
               if(o)
               {
                   o.id = 'wmexp-faucet-'+faucet_id; //set actual id
                   var script = document.createElement('script'); //create script
                   script.src = 'https://wmexp.com/faucet/'+faucet_id+'/'; //set actual url based on faucet id
                   document.head.appendChild(script); //add the script - it will render the faucet 
               }
            }, false);            
        }
    }, 100);
}//faucet_on_click 

and later on call it, using your DIV containing the the banner ad, and the Faucet Id as arguments. The bestway is to do it when everything is loaded and ready.

window.onload = function(){ 
    faucet_on_click('banner_wrap_1',123694);
}

That’s it. Here goes the result. It is already operational, feel free to try:

Let’s look a bit close at the arguments of faucet_on_click(banner_wrapper_id,faucet_id,faucet_wrapper_id).

banner_wrapper_id – the id of the element wrapped around your banner ad.
faucet_id – the Faucet ID of thhe faucet you are going to show when bannr is clicked.
faucet_wrapper_id – the id of the element where the faucet is going to appear. If ommited, the banner_wrapper_id will be used, so the faucet replaces the banner. It works well for the horizontal ads, but for the vertical banners (like one to the right) you probably want to create separate place to show, like:

<div id='faucet_wrap_2' style='padding:10px; width:750px;border:1px dotted blue;'>
faucet for the right banner will be shown here
</div>

It will result in:

faucet for the right banner will be shown here

Than call:

faucet_on_click('banner_wrap_2',123695,'faucet_wrap_2');

Optional: It would be nice to highlight faucet-powered butter to give visitor a hint where to look.

Make sure you have the Bootstrap. If not, include this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

If it is included, you will be able to show Bitcoin symbol.

The “<i class="fa fa-btc">” will appear as “” .

Now the CSS:

/* frame */
.wme_banner_hovered { 
    border:3px outset gold !important;
    position:relative;
}
/* icon/buttun with bitcoin symbol */
.wme_banner_icon{
    border-radius: 32px;
    border: 3px solid gold;
    color: gold;
    background-color: darkgoldenrod;
    text-align: center;	
    position:absolute; 
    top:-16px; 
    left:-16px; 
    width:32px; 
    height:32px;
    display:none;
}

And finally the javascript function to highlight banners:

highlight_on_hover = function(banner_wrapper_id){
    var o =  document.getElementById(banner_wrapper_id);
    if(!o){
        console.log(banner_wrapper_id +' not found');
        return;//no such element
    }
    if(o.innerHTML.indexOf('wme_banner_icon') == -1) //did not add icon yet
    {
        var div_icon = document.createElement("div");
        div_icon.innerHTML = "<i class='fa fa-btc' ></i>";
        div_icon.classList.add('wme_banner_icon');
        o.appendChild(div_icon); 
        o.classList.add('wme_banner_hovered');
        setTimeout(function(){
             var elements = document.getElementsByClassName('wme_banner_hovered');
             for (var i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('wme_banner_hovered');
             }       
        },1000)
    }
  
    o.addEventListener("mouseover", function(e){
        this.classList.add('wme_banner_hovered');
        if(this.getElementsByClassName('wme_banner_icon')[0]){
	    this.getElementsByClassName('wme_banner_icon')[0].style.display = 'block';	
        }
    });

    o.addEventListener("mouseout", function(e){
        this.classList.remove('wme_banner_hovered');
        if(this.getElementsByClassName('wme_banner_icon')[0])
        {
	    this.getElementsByClassName('wme_banner_icon')[0].style.display = 'none';
        }
    });
}//highlight_on_hover
It suppose to be called this way:

highlight_on_hover('banner_wrap_1');//now DIV with id=banner_wrap_1 will attract attention

Even more optional:
Insert this CSS, and you will have nice floating title over the banner.

/*  fancy title stuff */
.wme_banner_hovered:after{
    padding: 2px;
    display:none;
    position: absolute;
    bottom: 30px;
    right: 50px;
    width: 150px;
    text-align: center;
    background-color: #fef4c5;
    border: 1px solid #d4b943;
    border-radius: 2px;
}
.wme_banner_hovered:hover:after{ display: block; }
.wme_banner_hovered:after{ content: "satoshi behind"; }

Time to see the whole thing in action:
move mouse over banners...

That's all, falks!

See also: Examples List