Tutorial: Esconder / Mostrar publicidad

Daniel Muñoz · 28 Oct 2015

Hola compañeros, hace unos día alguien pregunto que si se podía ocultar la publicidad mediante un botón que el usuario presionara al ingresar a la pagina web entonces empece a leer un poco y decidí darme la meta de hacerlo.

Hoy les traigo este pequeño tutorial para abrirle la imaginación porque se que se puede mejorar / optimizar ya que lo que hice es bastante básico pero funciona a la perfección, si tienen alguna sugerencia no duden en decirme pues me gustaría mejorar en la programación, empecemos!!Lo primero que se necesita es la librería jQuery en nuestro proyecto, ya sea de manera local o desde un servidor externo. Ademas necesitamos el Plugin jQuery Cookie.

El plugin jQuery Cookie despues de descargarlo debes descomprimir y ubicar en tu servidor para luego enlazarlo en tu proyecto.

Debería quedar algo así.

Insertar CODE, HTML o PHP:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.cookie.js"></script>

Luego de eso, vamos a envolver nuestros cuadros de publicidad dentro de unos div para poder modificarlo mas adelante a través del DOM

Quedaria algo asi:

Insertar CODE, HTML o PHP:

<div class="XhwQu"><img src="//lorempixel.com/720/50/" alt=""></div>    
<br>
<iframe width="640" height="360" src="https://www.youtube.com/embed/TYES0S4Jrpc" frameborder="0" allowfullscreen></iframe>
<br>
<div class="XhwQu"><img src="//lorempixel.com/720/50/" alt=""></div>
<br>
<div class="bJLCw">
<input type="button" value="Deseo aceptar AdSense" id="acepto"> - <input type="button" value="No quiero AdSense!!" id="noacepto">
</div>

Siendo este el ejemplo visual, donde los cuadros rojos son publicidad y el verde las opciones que el usuario tiene para escoger.

Hasta aqui, solo hemos incluido jQuery, y jQuery Cookies, ademas hemos puesto nuestra publicidad entre divs con sus clases para manipularlos con el DOM mas adelante.

Ahora vamos a meternos un poco con el jQuery. :encouragement:

Insertar CODE, HTML o PHP:

$(document).ready (function () {
        if ( $.cookie('ads') == null ) {    $.cookie('ads',0,{expires: 2}); console.log('Creamos cookie')    }
        if ( $.cookie('ads') == 1 ) { $('.bJLCw').remove(); console.log('El usuario acepto ver publicidad') }
        if ( $.cookie('ads') == 2 ) { $('.bJLCw').remove(); $('.XhwQu').remove(); console.log('El usuario no acepto ver publicidad') }
    });

Creamos una función que al cargarse el documento haga varias condiciones

Verificamos que no existe la cookie, si no existe creamos una cookie llamada ads con un valor y le ponemos un tiempo de caducidad de 2 días ademas enviamos un mensaje por consola.
Verificamos el valor de la cookie, si es 1 eliminamos a través del DOM los botones y ademas enviamos un mensaje por consola.
Verificamos el valor de la cookie, si es 2 eliminamos la publicidad y los botones y ademas enviamos un mensaje por consola.

Con el valor de la cookie podemos recordar su preferencia y actuar según el lo haya decidido.

Seguidamente agregamos este codigo.

Insertar CODE, HTML o PHP:

$( "#acepto" ).click(function() {    $( ".bJLCw" ).remove(); $.cookie('ads', 1)    });
$( "#noacepto" ).click(function() { $( ".bJLCw" ).remove(); $( ".XhwQu" ).remove(); $.cookie('ads', 2) });

Donde al hacer clic en el botón según su ID realizamos la apción y cambiamos el valor inicial de la cookie. El resultado final seria algo asi.

Insertar CODE, HTML o PHP:

$(document).ready (function () {
        if ( $.cookie('ads') == null ) {    $.cookie('ads',0,{expires: 2}); console.log('Creamos cookie')    }
        if ( $.cookie('ads') == 1 ) { $('.bJLCw').remove(); console.log('El usuario acepto ver publicidad') }
        if ( $.cookie('ads') == 2 ) { $('.bJLCw').remove(); $('.XhwQu').remove(); console.log('El usuario no acepto ver publicidad') }
    });
        
        $( "#acepto" ).click(function() {    $( ".bJLCw" ).remove(); $.cookie('ads', 1)    });
        $( "#noacepto" ).click(function() { $( ".bJLCw" ).remove(); $( ".XhwQu" ).remove(); $.cookie('ads', 2) });




        //console.log($.cookie('ads'));

Si el usuario acepta ver publicidad quedaría así la pagina. ( solo se oculta los botones la publicidad se mantiene )

Si el usuario no acepta ver la publicidad se ocultan ambos elemento y se guarda su preferencia a través de la cookie.

Como lo dije al empezar, cualquier critica es recibida :encouragement:
Archivos: https://www.sendspace.com/file/kkqlj8

SnakeNet · 28 Oct 2015

Está bastante bien el tutorial demasiado practico para los sitios que deseen poner a disposición de los usuarios está opción aunque en cuanto a practico de ganar dinero no es recomendable pero cada quien que haga lo que quiera.

Zarat · 28 Oct 2015

Buen tuto, tal ves lo implemento con otro tipo de publicidad que no sea baners :encouragement:

chobo3 · 28 Oct 2015

Buen tutoral :/ se agradece 🙂

Juvinao · 28 Oct 2015

Buen tutorial amigo, a favoritos.. Quizás lo use para un pequeño proyecto :encouragement:

Neal Caffrey · 28 Oct 2015

gracias por el tutorial, muy bueno

ro0driig0o · 28 Oct 2015

Buen tutorial, Gracias por compartirlo 😀

LuiggiC · 28 Oct 2015

[MENTION=62186]Daniel Muñoz[/MENTION] Muchas gracias por el tutorial 🙂

davo7 · 29 Oct 2015

Como mensionan para ganar dinero no es util. Pero es verdad se puede mejorar y si sacarle provecho, gracias

Enviado desde mi E2306 mediante Tapatalk

Tutorial: Esconder / Mostrar publicidad

Daniel Muñoz

SnakeNet

Zarat

chobo3

Juvinao

Neal Caffrey

ro0driig0o

LuiggiC

davo7

Temas similares