POP UP - Cookie para abrir uma vez só por dia

14 de abril de 2016 9 respostas

BrunaMarinho 14 de abril de 2016

Bom dia experts do GUJ, estou com uma dificuldade e gostaria muito da ajuda de vocês. Meu primo me deu um pop up pra eu colocar no meu blog do blogger, mas o problema é o seguinte!

Eu coloquei meu programa de afiliados nele pra divulgar eletrodomésticos, etc… e ele fecha sozinho depois de 10 segundos, mas toda vez que eu entro no blog ou atualizo a página, ele aparece de novo.

Eu gostaria que ele aparecesse uma vez só por dia para cada pessoa, pra não irritar meus visitantes, sei que é possível, é o tal do cookie né? Mas não faço ideia de como colocar isso no meu pop up.

Agradeço muito se algum de vocês puder me ajudar com isso.

Meu blog é o (http://www.receitassaborosasdemais.com) e o código completo do pop up segue abaixo, inclusive com o meu código de afiliada.

Muito obrigada.

<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript">
$a = jQuery.noConflict();
$a(document).ready(function(e) {

  //funcoes banners   
    $a('#fecharads1-fx').hover(function(){
    $a('#fecharads1-fx').hide();
    $a('#fecharads2-fx').css('display','block');
  });
   $a('#fecharads2-fx').click(function(){
    $a('#ads-bruna-fx').css('display','none');
  });

});</script> <style type="text/css">#ads-bruna-fx { position:fixed; width:300px; height:250px; top:25%; z-index:999999999999999; left:0; right:0; margin:0 auto; border:0px solid #ddd; -webkit-box-shadow: 0 0 0px 0px #B0B0B0;
box-shadow: 0 0 0px 0px #000; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;}
#ads-bruna-fx #fecharads1-fx{ position:absolute; left:90%; top:10%;  width:24px; height:24px; background:url('#') no-repeat; cursor:pointer;}
#ads-bruna-fx #fecharads2-fx{  opacity:0.7; position:absolute; right:90%; bottom:87%;  width:10px; height:10px; background:url('#') no-repeat; cursor:pointer; display:block;  }
#ads-bruna-fx #fecharads2-fx:hover{opacity:1.0;}</style><div id="ads-bruna-fx">
<br />


<script id='afl_42395' type='text/javascript'>
	var pTitle = document.title, aflDate = new Date(), new_js = document.createElement('script');
	new_js.type = 'text/javascript'; new_js.async = true;
	new_js.src = 'http://img.afiliados.com.br/banner_creator/loader2.php?aflDate='+aflDate.getDate()+aflDate.getHours()+'&banner=42395&franq=AFL-03-151982&title=' + pTitle + '&url='+document.URL;
	document.write(new_js.outerHTML);
</script>


<br />
<div style="text-align: right;">
<span style="color: black; font-family: Times, Times New Roman, serif; font-size: xx-small;"><a href="#" target="_blank"></a></span></div>
<div id="fecharads2-fx" title="">
</div>
<div id="fecharads1-fx">
</div>
</div>
<!-- Fim do código --><br />


<script>setTimeout( function() { $a('#ads-bruna-fx').css('display','none'); }, 10000 );</script>

9 Respostas

Rodrigos_Bragas 14 de abr. de 2016

Você pode definir uma data de expiração para seus cookies. Quando o usuário entrar no seu site, la no servidor puxa o valor do cookie, se não existir valor nenhum, então você mostra seu pop up… depois que ele for mostrado, através de javascript, você captura o tempo da data em milissegundos(é melhor que essa captura seja feita no servidor), soma mais 1 dia também em milissegundos(86400000), defini como a data de expiração para o seu cookie. Ai sempre que o servidor puxar o valor do cookie, se caso esse valor existir, você não mostra o pop up. Depois que o cookie expirar, quando voltar a acessar sua pagina, se o valor do cookie for nulo, então você mostra o pop up e defini o tempo de expiração da mesma forma novamente.
Usando essa lógica, agora você só vai precisar ver como que defini uma data de expiração para os cookies, em javascript.

BrunaMarinho 14 de abr. de 2016

Olá, boa tarde Rodrigo e muito obrigada pela sua resposta, mas o meu blog é do blogguer e não tem como eu subir nenhum arquivo para o servidor. O que eu precisava era colocar um cookie que aparece só uma vez por dia por IP nesse meu pop up aí em cima.

Tenho um pop up do facebook que faz isso, só que não sei o que eu devo copiar dele pra colocar nesse meu pop up aqui em cima.

Se você ou alguém puder me ajudar… muito obrigada.

Segue abaixo o código do pop up que já tem esse cookie de um dia… será que tem como usar o cookie dele no meu pop up lá em cima?

<script src='http://yourjavascript.com/[telefone removido]/jquery-min.js'></script>
<script src="http://yourjavascript.com/[telefone removido]/jquery-colorbox-min.js"></script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*2*60*60*1000));        
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}
jQuery(document).ready(function() {
    var visited = readCookie('visited');
    if (!visited || visited !== "true") {
        createCookie('visited', "true", 1);
        $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
});
</script>
<script type="text/javascript" src="http://yourjavascript.com/[telefone removido]/google-jquery-min.js"></script>
<script type="text/javascript">
// JavaScript Document
 var $q = jQuery.noConflict();
$q(document).ready(function()
{
$q("#lightbox, #lightboxContent").click(function(){
$q("#lightbox, #lightboxContent").hide();
})});
</script>
<style type="text/css">
#lightbox {
    background-color: #000;
    float: left;
    height: 100%;
    opacity: 0.9;
    -moz-opacity: 0.90;
    filter: alpha(opacity=90);
    position: fixed;
    width: 100%;
	z-index:998;    
}   
 
#lightboxContent {
    background-image: url("https://1.bp.blogspot.com/-4eVLZ4__ceA/VtyKKB0H24I/AAAAAAAAHKs/Dfg6ccOz4kM/s1600/script%2Bfacebook.png");
	background-repeat:no-repeat;
    margin: 0 auto;
    opacity: 997;
    padding-top: 43px;
    width: 331px;
    height: 343px;
    z-index:999;
    cursor:pointer;
    margin-left: -157px; /* metade da largura */
    margin-top: -145px; /* metade da altura */
    position: fixed;
    top: 60%;
    left: 50%;
    text-align: center;
}
#fechar {
z-index:10;
}
</style>
<style type="text/css">
<!--
#curtir {
z-index:998;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mouse;
function mouse(e)
{
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;
} else {
xcurs = event.clientX;
ycurs = event.clientY;
}
document.getElementById('position').style.left = (xcurs-150)+'px';
document.getElementById('position').style.top = (ycurs-125)+'px';
}
</script>
<style type="text/css">
<!--
#position {
position: absolute;
z-index:999999;
filter:alpha(opacity=0); 
opacity:0.0;
}
-->
</style>
<div style='display:none' mobile='no'>
<div id='subscribe' mobile='no'>
<div id="position">
<div id="samuellins">
</div>
</div>
<div id="lightbox"></div>
<div id="lightboxContent"><div id="curtir"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Freceitassaborosasdemais/?ref=tn_tnmn1&amp;width=315&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=290" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:315px; height:290px;" allowtransparency="true" onclick="document.getElementByID('lightboxContent').style.display='none';"></iframe><div id="fechar" onclick="document.getElementByID('lightboxContent').style.display='none';"><b></b></div></div></div>
</div></div>

<script>setTimeout( function() { $q("#lightbox, #lightboxContent").hide(); }, 10000 );</script>

Rodrigos_Bragas 14 de abr. de 2016

Analisando esse código aí, parece que você vai só colocar um display:none no seu pop up, para que o usuário não o veja. Mas de qualquer forma, o pop up será carregado na pagina. Certo? Sendo assim assim fica até mais fácil. Você pode fazer o seguinte: Colocar na pagina do seu blog um script que pega o nome do cookie na maquina do usuário. Se a pessoa nunca tiver entrado no seu blog ou se já passou 24 horas e o cookie expirou, então você mostra o pop up e defini um novo cookie e uma nova data de expiração. Nas próximas vez que ele entrar, antes de 24 horas, o valor do cookie do pop up NÃO será nulo, então você NÃO MOSTRA o pop up. Quando expirar, volta a ser nulo e você repete o processo.
Antes de eu ti mostrar como ficara esse código no cliente, existe formas muita mais simples de fazer isso. Por exemplo, você captura com javascript apenas o dia, sem horas ou minutos e salva localmente, no computador. Ai você sempre captura o dia e compara como o que esta salvo no computador. se for diferente, você mostra o pop up e salva o novo dia. Com isso, poupa trabalho de ficar definindo datas de expiração em cookie, bom pelo menos você defini sempre a mesma data, que é lá para o ano de 2200.
E uma dica que eu dou, que é muita mais fácil de trabalhar do que com cookies, não precisa data de expiração, é mais rápido para navegação no seu blog, e principalmente, como você não vai mexer com nada no servidor, é usar LocalStorage. Da uma olhada aqui na w3schools( http://www.w3schools.com/html/html5_webstorage.asp ), que você vai entender.
Bom chega de conversa e veja o script que você pode usar.
Fiz ele com base de que você usa jQuery.

$(document).ready(function(){
	var jaFoiVistoNasUltimas24Horas=getCookie('nomeCookiePopUp');
	if(jaFoiVistoNasUltimas24Horas==null){
		//Código para MOSTRAR o pop up
		mostrarOuNaoPopUp('mostrarSim');
	}else{
		//Código para NÃO MOSTRAR pop up
		mostrarOuNaoPopUp('mostrarNao');
	}
	function mostrarOuNaoPopUp(condicao){
		if(condicao=='mostrarSim'){
			$('classPopUp').css({display:'block'});
			
			definirNovaDataExpiracao();
		}else if(condicao=='mostrarNao'){
			$('classPopUp').css({display:'none'});
		}
	}
	function definirNovaDataExpiracao(){
		var data=new Date();
		var numeroDeDiasParaExpiracao=1;//1 dia
		data.setTime(data.getTime()+(numeroDeDiasParaExpiracao*24*60*60*1000));
		var expires="expires="+data.toUTCString();
		var cookie='nomeCookiePopUp="Ainda não espirou";'+expires;
		document.cookie=cookie;
	}
	function getCookie(nomeCookie){
		var ca=document.cookie.split(';');
		var name=nomeCookie+'=';
		for(var i=0;i<ca.length;i++){
			var c=ca[i].trim();
			if(c.indexOf(name)==0){
				return c.substring(name.length,c.length);
			}
		}
		return null;
	}
});

BrunaMarinho 15 de abr. de 2016

Olá, bom dia Rodrigo… primeiro quero agradecer sua boa vontade em me ajudar e pedir desculpas pelo meu analfabetismo da tecnologia rsrsrs… coloquei esse código que você fez pra mim no meu pop up, mas não funcionou comigo, ele continua aparecendo quando atualizo a página, devo ter feito algo errado né? Segue abaixo o código do pop up inteiro, já com seu código junto, exatamente como tentei colocar no meu blog. Se puder me ajudar? E desculpa a encheção de saco rsrs.

<br /><br />
<script type="text/javascript">
$a = jQuery.noConflict();
$a(document).ready(function(e) {

  //funcoes banners   
    $a('#fecharads1-fx').hover(function(){
    $a('#fecharads1-fx').hide();
    $a('#fecharads2-fx').css('display','block');
  });
   $a('#fecharads2-fx').click(function(){
    $a('#ads-bruna-fx').css('display','none');
  });

$(document).ready(function(){
	var jaFoiVistoNasUltimas24Horas=getCookie('nomeCookiePopUp');
	if(jaFoiVistoNasUltimas24Horas==null){
		//Código para MOSTRAR o pop up
		mostrarOuNaoPopUp('mostrarSim');
	}else{
		//Código para NÃO MOSTRAR pop up
		mostrarOuNaoPopUp('mostrarNao');
	}
	function mostrarOuNaoPopUp(condicao){
		if(condicao=='mostrarSim'){
			$('classPopUp').css({display:'block'});
			definirNovaDataExpiracao();
		}else if(condicao=='mostrarNao'){
			$('classPopUp').css({display:'none'});
		}
	}
	function definirNovaDataExpiracao(){
		var data=new Date();
		var numeroDeDiasParaExpiracao=1;//1 dia
		data.setTime(data.getTime()+(numeroDeDiasParaExpiracao*24*60*60*1000));
		var expires="expires="+data.toUTCString();
		var cookie='nomeCookiePopUp="Ainda não espirou";'+expires;
		document.cookie=cookie;
	}
	function getCookie(nomeCookie){
		var ca=document.cookie.split(';');
		var name=nomeCookie+'=';
		for(var i=0;i<ca.length;i++){
			var c=ca[i].trim();
			if(c.indexOf(name)==0){
				return c.substring(name.length,c.length);
			}
		}
		return null;
	}
});

});</script> <style type="text/css">#ads-bruna-fx { position:fixed; width:300px; height:250px; top:25%; z-index:999999999999999; left:0; right:0; margin:0 auto; border:0px solid #ddd; -webkit-box-shadow: 0 0 0px 0px #B0B0B0;
box-shadow: 0 0 0px 0px #000; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;}
#ads-bruna-fx #fecharads1-fx{ position:absolute; left:90%; top:10%;  width:24px; height:24px; background:url('#') no-repeat; cursor:pointer;}
#ads-bruna-fx #fecharads2-fx{  opacity:0.7; position:absolute; right:90%; bottom:87%;  width:10px; height:10px; background:url('#') no-repeat; cursor:pointer; display:block;  }
#ads-bruna-fx #fecharads2-fx:hover{opacity:1.0;}</style><div id="ads-bruna-fx">
<br />


<script id='afl_42395' type='text/javascript'>
	var pTitle = document.title, aflDate = new Date(), new_js = document.createElement('script');
	new_js.type = 'text/javascript'; new_js.async = true;
	new_js.src = 'http://img.afiliados.com.br/banner_creator/loader2.php?aflDate='+aflDate.getDate()+aflDate.getHours()+'&banner=42395&franq=AFL-03-151982&title=' + pTitle + '&url='+document.URL;
	document.write(new_js.outerHTML);
</script>


<br />
<div style="text-align: right;">
<span style="color: black; font-family: Times, Times New Roman, serif; font-size: xx-small;"><a href="#" target="_blank"></a></span></div>
<div id="fecharads2-fx" title="">
</div>
<div id="fecharads1-fx">
</div>
</div>
<!-- Fim do código --><br />


<script>setTimeout( function() { $a('#ads-bruna-fx').css('display','none'); }, 10000 );</script>

Rodrigos_Bragas 15 de abr. de 2016

Trabalhar com cookies é bastante chato e só convém usar quando realmente é necessário no servidor e não no navegador. Vou colocar uma solução com base nos códigos do seu blog e vou usar localstorage que é mais fácil e nesse caso, é melhor também. Preste muita atenção do que você terá que fazer para testes e depois alterar para seu requisitos de tempo. Você vai copiar esse código do jeito que estar e salvar em um arquivo blog.html na sua área de trabalho e depois abrir no google chrome(seus códigos para pop up não funcionam no firefox). Esse código esta com o tempo de mostrar ou não pop up configurado para 20 segundos depois que a pessoa entrou no seu blog. Para mostrar novamente depois de 24 horas, você terá que mudar a variável tempoParaMostrarNovamente, para 246060*1000;
Depois que você abrir essa pagina, você vera o pop up, você vai atualizar ela de novo, e não vera novamente o pop up, até passar 20 segundos, no primeiro request depois dos vinte segundo, sera novamente mostrado o pop up e o processo se repete. Não esqueça que você tem que mudar a variavel de 20 segundos para 24 horas;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>




<br /><br />
<script language='javascript'type="text/javascript"src="https://code.jquery.com/jquery-1.12.3.js"charset="utf-8"></script>
<script type="text/javascript">
	$a = jQuery.noConflict();
$a(document).ready(function(e) {

  //funcoes banners   
    $a('#fecharads1-fx').hover(function(){
    $a('#fecharads1-fx').hide();
    $a('#fecharads2-fx').css('display','block');
  });
   $a('#fecharads2-fx').click(function(){
    $a('#ads-bruna-fx').css('display','none');
  });
</script>
<style type="text/css">#ads-bruna-fx { position:fixed; width:300px; height:250px; top:25%; z-index:999999999999999; left:0; right:0; margin:0 auto; border:0px solid #ddd; -webkit-box-shadow: 0 0 0px 0px #B0B0B0;
box-shadow: 0 0 0px 0px #000; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;}
#ads-bruna-fx #fecharads1-fx{ position:absolute; left:90%; top:10%;  width:24px; height:24px; background:url('#') no-repeat; cursor:pointer;}
#ads-bruna-fx #fecharads2-fx{  opacity:0.7; position:absolute; right:90%; bottom:87%;  width:10px; height:10px; background:url('#') no-repeat; cursor:pointer; display:block;  }
#ads-bruna-fx #fecharads2-fx:hover{opacity:1.0;}</style><div id="ads-bruna-fx">
<br />


<script id='afl_42395' type='text/javascript'>
	var pTitle = document.title, aflDate = new Date(), new_js = document.createElement('script');
	new_js.type = 'text/javascript'; new_js.async = true;
	new_js.src = 'http://img.afiliados.com.br/banner_creator/loader2.php?aflDate='+aflDate.getDate()+aflDate.getHours()+'&banner=42395&franq=AFL-03-151982&title=' + pTitle + '&url='+document.URL;
	document.write(new_js.outerHTML);
</script>


<br />
<div style="text-align: right;">
<span style="color: black; font-family: Times, Times New Roman, serif; font-size: xx-small;"><a href="#" target="_blank"></a></span></div>
<div id="fecharads2-fx" title="">
</div>
<div id="fecharads1-fx">
</div>
</div>
<!-- Fim do código --><br />


<script>
$(document).ready(function(){
	setTimeout(function(){
		$('#ads-bruna-fx').css('display','none');
	},10000);
	var jaFoiVistoNasUltimas24Horas=window.localStorage.getItem("dataDeExpiracao");
	var validade=0;
	if(jaFoiVistoNasUltimas24Horas!=null){
		var dataAtual=new Date().getTime();
		validade=jaFoiVistoNasUltimas24Horas-dataAtual;
	}
	var tempoParaMostrarNovamente=20*1000;
	if(jaFoiVistoNasUltimas24Horas==null||validade<=-tempoParaMostrarNovamente){
		//Código para MOSTRAR o pop up*/
		mostrarOuNaoPopUp('mostrarSim');
	}else{
		/*/Código para NÃO MOSTRAR pop up*/
		mostrarOuNaoPopUp('mostrarNao');
	}
	function mostrarOuNaoPopUp(condicao){
		if(condicao=='mostrarSim'){
			$('#ads-bruna-fx').css({display:'block'});
			definirNovaDataExpiracao();
		}else if(condicao=='mostrarNao'){
			$('#ads-bruna-fx').css({display:'none'});
		}
	}
	function definirNovaDataExpiracao(){
		var dataDeExpiracao=new Date().getTime();
		window.localStorage.setItem("dataDeExpiracao",dataDeExpiracao);
	}
});
</script>







</body>
</html>

BrunaMarinho 16 de abr. de 2016

Olá Rodrigo, bom dia! Fiz como você me ensinou, deixando nos 20 segundos mesmo, mas infelizmente não deu certo pra mim. Depois alterei ele para 24 horas, igual você me ensinou, mas também não deu. Gravei o código em html e abri com o chrome e com o internet explorer, mas só mostra o código na tela e não o pop up em si.

Também coloquei ele no meu blog como widget no blogger, mas o pop up continua aparecendo toda vez que atualizo a página.

Tá difícil né amigo rsrs… mas agradeço demais seu empenho em me ajudar…

Se tiver mais alguma dica…

Muito obrigada.

David_Ricardo_N_Cost 4 de jan. de 2017

Olá Rodrigo, não compreendo muito bem sobre a programação em si, mas eu pude acompanhar agora esse tópico pois estava precisando justamente de uma função como essa, e funcionou muito bem este exemplo que você deixou, obrigado mesmo, no entanto eu tenho outros sites que precisei colocar esse cookie, sendo que ao acessar o primeiro site o cookie é gravado e fica valendo para todos os outros, resumindo, teria a possibilidade de fazer ele verificar o domínio no qual foi colocado? Assim eu posso fazer o banner aparecer em um site e se caso o mesmo usuário acessar o outro, ele verá um outro banner que sumirá após ser gravado o cookie e o domínio em questão!

Desde já muito obrigado!

Antenor_Junior 12 de nov. de 2021

Teria como você entrar em contato comigo via whatsapp? Preciso tirar uma dúvida sobre a mesma coisa da postagem acima. [telefone removido]

rodriguesabner 14 de nov. de 2021

Olá, a todos que visualizarem este tópico e assim como a @BrunaMarinho não conseguirem resolver, peço que abra outro tópico.

E não inclua informações pessoais aqui no tópico.

Criado 14 de abril de 2016

Ultima resposta 14 de nov. de 2021

Respostas 9

Participantes 5

9 Respostas

Topicos relacionados