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

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:

1
   <div id="AfisazaAnunt"></div>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   function citesteCookie(cnume) {
     var nume = cnume + "=";
     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);
        if(c.indexOf(nume) == 0)
           return c.substring(nume.length,c.length);
        }
     return "";
   }
   function seteazaCookie(cnume, cvaloare, zile_val) {
    var z = new Date();
    z.setTime(d.getTime() + (zile_val*24*60*60*1000));
    var expira = "expires="+ z.toUTCString();
    document.cookie = cnume + "=" + cvaloare + ";" + expira + ";path=/";
   }

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.

1
2
3
4
5
6
7
8
9
10
11
  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 = "<div id='fundalAnunt'><a href='"+url+"' target='_blank' rel='nofollow'><img class='imagine'   src='"+img+"' alt='"+title+"' /></a><span class='inchideAnunt' onclick='ascundeAnunt();'></span>"+contor+"</div>";
	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:

1
2
3
4
5
6
7
8
9
   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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  /* 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!

Distribuie:
TwitterFacebookWhatsAppGoogle+BufferLinkedInPin It

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *