Script pentru afișarea de reclame odată pe zi!

Dacă vrei să afișezi o anume reclamă la câteva secunde după ce pagina s-a încărcat, dar numai odată la n zile pentru fiecare utilizator nou, urmărește acest mic tutorial:

pasul 1 – Marcăm în pagină locul în care să apară reclama.

Creăm un element div căruia îi dăm un id ușor de reținut, dar unic:

   

pasul 2 – Inserăm scriptul javascript

Scriptul de mai jos conține funcțiile necesare pentru a citi și a seta un cookie care să ne permită să identificam dacă utilizatorul a mai încărcat acest cod în ultimele n zile.

   function citesteCookie(cnume) {
     var nume = cnume + "=";
     var ca = document.cookie.split(';');
     for(var i=0; i

Urmează să definim funcția care ne va afișa, în interiorul elementului div creat anterior, anunțul propriu-zis.
Am ales să afișez, în exemplul de mai jos, o imagine cu link de afiliat.

  function arataAnunt() {
	url="_orice_link_de_afiliat";
        img="_un_link_către_imagine";
        contor="_daca_este_cazul_";
        title="_ce_să_conțină_atributul_title_al_img";
        a = "
"+title+""+contor+"
"; document.getElementById('AfisazaAnunt').innerHTML = a; } function ascundeAnunt() { document.getElementById('fundalAnunt').classList = 'ascuns'; }

Deoarece nu vreau ca anunțul să rămână afișat pe pagină, având în vedere că datorită CSS-ului pe care îl voi prezenta ma jos, acesta va inactiva ecranul lăsându-i utilizatorului doar opțiunea de a da click pe imagine, am mai introdus și o funcție care ne va permite să ascundem anunțul, aceasta va fi executată atunci când se va da click pe elementul span, care va apare ca o cruciuliță.

Acum trebuie să executăm funcția arataAnunt doar atunci când va fi cazul:

   function arata_odata(){
      arata = citesteCookie("AmAfisatAnuntul");
      if (arata != "") {
      } else {
       setTimeout(arataAnunt, 5000);      
       seteazaCookie("AmAfisatAnuntul", 1, 1);
      }
   }
  arata_odata();

Pasul 3 - Să avem stil!

Totul va fi bine dacă v-om adăuga la locul său scriptul CSS de mai jos, fără de care nimic nu ar avea farmec:

  /* self add */
  #fundalAnunt {
	display:block;
	width:100%;
	height:100%;
	background-color:#999;
	opacity:0.9;
	position:fixed;
	top:0;
	left:0;
	z-index:99000;
  }

  #fundalAnunt .imagine {
	opacity:1;
	position:absolute;
	top:20%;
	left:0;
	box-shadow:0 0 12px #000;
	display:block;
	width:/*latime_imagine*/;
	height:/*inlatime_imagine*/;
  }
  .inchideAnunt {
    display: inline-block;
    height: 0;
    width: 0;
    padding: 12px 12px;
    line-height: 0;
    position: absolute;
    top: 20%;	
    top: calc(20% - 12px);
    left:/*latime_imagine -12px de la padding */;
    cursor: pointer;
    background: url('_link_catre_imaginea_cu_semnul_de_inchidere') no-repeat center center;
    background-size: contain;
  }

  #fundalAnunt.ascuns {
	display:none;
  }

Probabil că ați văzut acest script în acțiune atunci când ați încărcat această pagină.
Sper ca acest articol să vă fie de folos!

Lasă un răspuns