Popup pubblicitario con conto alla rovescia

filomeni · 24 Set 2015

Convertire i click in acquisto è cosa complicata!
Con il trascorrere della mia esperienza e quindi "provato sulla pelle", un messaggio che sprona molto l'utente è "l'acquisto a tempo"...
Quante volte ci siamo trovati un messaggio:"Attenzione!!! questa promozione scade fra 3 ore 15 minuti 10 secondi"
Questa situazione mette curiosità e il tempo che scorre ci mette in condizione di pensare:"si dai lo compro altrimenti mi sfugge l'occasione!".
Bene allora oggi ho costruito un Popup con Countdown, all'apertura del vostro sito in "overlay" si apre il popup (che in realtà non è un popup ma un div con caratteristiche analoghe).
questo uno screenshot, nel fondo della pagina ho messo una txture del mio logo ma in realtà è per far capire la trasparenza e sarà la vostra pagina...

filomeni · 24 Set 2015

Popup pubblicitario con conto alla rovescia (continuazione)

Ovviamente, io in background ho inserito una texture del mio logo, per voi sarà l'home page o la pagina che deve contenere il messaggio pubblicitario.
La pagina è sviluppata con php, javascript, Jquery, css.
Il css è l'artefice della grafica quindi, colori, pulsanti, sfumature, dimensioni ecc... Il Jquery ci serve per dar "vita" al conto alla rovescia, questo è affiancato da javascript e css.
Il javascript oltre a servire per Jquery, ci servirà per "scrivere" un cookie temporaneo che alla chiusura del browser si distrugge automaticamente.
A proposito dei cookie, argomento molto discusso al momento, ho preparato uno snippet per la gestione avviso dei cookie se volete dare un occhio: http://forum.mrwebmaster.it/snippet/43611-barra-cookie-law.html
Il "pulsante" di chiusura del banner pubblicitario è formato da un "button" che alla sua pressione richiama la funzione Jquery:

Codice:

$(document).ready(function() {
			$("#close").click(
	 		function(){
	 		$(".content-popUp").fadeToggle(1000);			
			});
	});//FINE DOM

e nello stesso istante con javascript, va a scrivere il cookie:

Codice:

onclick="document.cookie='style=none;expires='";

PHP serve per la lettura del cookie memorizzato e se presente "nasconde" l'intero div contenete il banner bubblicitario.

PHP:

$style = $_COOKIE['style'];

il recupero del cookie è possibile anche in javascript ma personalmente mi trovo meglio facendo in questa maniera.
posto la pagina compilata per intero ma per semplicità ho preparato un file zip dove scaricare tuttotto...
scrica qui: http://www.filowebservice.com/download/PopUpCount.zip

ecco tutto:

Codice:

<html>
<head>
<?php
$style = $_COOKIE['style'];
?>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/countdown.js"></script>
<script>
	
		$(document).ready(function(){
			$("#countdown").countdown({
				date: "25 September 2015 00:00:00",//qui setta la data di countdown
				format: "on"
			},
			
			function() {
				
			});
		});
	
	</script>
	<script>//
	$(document).ready(function() {
			$("#close").click(
	 		function(){
	 		$(".content-popUp").fadeToggle(1000);//tempo di dissolvenza		
			});
	});
	</script>
</head>
<body>
<div class="content-popUp" style="display:<?php echo $style ?>"><!--Recuoero cookie per nascondere tutto-->
<div class="alert">
<a href="#"><button type="button" id="close" onclick="document.cookie='style=none;expires='">X</button></a>
<!-- TIMER -->
<div class="timer-area">
<h1>Manca poco alla scadenza</h1>
<h3>Una promozione IMPERDIBILE!!!</h3>
<h4>La tua promozione!!!</h4>
<ul id="countdown">
<li> <span class="days">00</span>
<p class="timeRefDays">Giorni</p>
</li>
<li> <span class="hours">00</span>
<p class="timeRefHours">ore</p>
</li>
<li> <span class="minutes">00</span>
<p class="timeRefMinutes">minuti</p>
</li>
<li> <span class="seconds">00</span>
<p class="timeRefSeconds">secondi</p>
</li>
</ul>
</div>
<!-- end TIMER --> 
<a href="http://www.dove-vuoi-tu.html" class="button">Vai!</a>
</div>
</div>
</body>
</html>

Se ho dimenticato qualcosa o notate degli errori fatemi sapere grazie.

Popup pubblicitario con conto alla rovescia

filomeni

Moderatore

filomeni

Moderatore

Discussioni simili

Popup pubblicitario con conto alla rovescia

filomeni

Moderatore

filomeni

Moderatore

Discussioni simili

Privacy & Transparency

Privacy & Transparency