El nem tüntethető reklám

Írta: | 2010. április 07. | kategóriák: CSS, JavaScript, Speciális, Web

Kérésre érkezett ez a leírás, amiben bemutatok egy egyszerű trükköt, hogyan készíthetsz olyan popup (felugró) vagy overlay (eltakaró) reklámot, ami egészen addig nem tűnik el, amíg egy reklámra rá nem kattint az olvasó. Tudom, hogy nem szép dolog, de legyünk naívak és gondoljunk arra, hogy ennek akár jószándékú felhasználásai is lesznek.

Induljunk ki abból, hogy senki sem szereti, ha a már meglévő weboldalukat át kell írni egy kis ráncfelvarrásért. Fogjuk a már meglévő weboldalunk és írjuk be a body végére a reklámot tartó divet.

1
2
3
4
5
6
<body>
  <p>Tartalom</p>
  <div id="popupNoHideUntilClick" class="popupNoHideUntilClickClass">
    <a class="adLink" href="http://webpillango.org/" title="WebPillango">WebPillango</a>
  </div>
</body>

Ha ezzel megvagyunk, adjuk hozza a megfelelő CSSt, hogy a reklámunk eltakarja a valós tartalmat, illetve hogy a reklámot egy osztálycserével eltudjuk tüntetni (régi IE-k nem szeretik, ha a style elemüket babrálják, annál inkább, ha kicserélik a className változót, de majd hamarosan meglátod, miről is van szó).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.popupNoHideUntilClickClass {
  width:100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
}
 
.hiddenElement {
  display: none;
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
}

Miután sikeresen beillsztettük a CSS részt is, mindössze be kell másolnunk a JavaScript-et és máris működik a dolog!

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
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
function hidePopup() {
  document.getElementById('popupNoHideUntilClick').className = "hiddenElement";
}
 
function initPopupNoHideUntilClick() {
  var links = document.getElementById('popupNoHideUntilClick').getElementsByTagName('a');
 
  for(var i=0; i < links.length; i++){
    if (links[i].className.indexOf('adLink') != -1) {
      links[i].target = "_blank";
      links[i].onclick = hidePopup;
    }
  }
}
 
addLoadEvent(initPopupNoHideUntilClick);

Természetesen az onLoad eseményre másként is ráköthetjük a reklámunkat kezelő függvényt, de próbáltam úgy elérni a kívánt eredményt, hogy a már meglévő onLoad események ne vesszenek el. Az addLoadEvent függvényt Simon írta. A működési elve egyszerű: megnézed, ha már van onLoad esemény. Ha még nincs ilyen esemény, akkor a kért függvényt csatolod rá. Ellenkező esetben készítesz egy új függvényt, ami meghívja az eddigi onLoad esemény függvényét, majd az újonnan rátett onLoad eseményt. Ezt az összetett függvényt pedig rácsatolod az onLoad eseményre.

A példa oldalt itt találod!



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Nálam nem történik semmi a példa oldalon. Mit kellene látnom?

taz 2010. április 7. - 22:23

Ha a webpillango linkre kattintasz, akkor az megnyilik egy uj ablaoban es eltunik a link, megjelenik egy szoveg: tartalom.

Avatar Tupacko
2010. április 7.
23:19

az addeventhandlerrel mi volt a baj?

Ertem en, hogy legyunk regi kompatibilisek, nade vazz, 2010 van.

(IE-ben mashogy hivjak, de ugyanugy tobb esemenyt lehet kezelni.)

Aadaam 2010. április 7. - 23:34

Ha nem haragszol, 2010ben is vannak, akik nemreg kezdek a szarnyukat probalgatni es ezert probaltam olyan kodot adni, ami az esetek tobbsegeben mukodik es nem kell a bongeszofuggetlensegen dolgozni. Plusz egy kis betekintest is ad, hogy mikent lehet fuggvenyekkel zsonglorkodni JavaScrioptben, ha eppen valaki ez iranyba szeretne elmozdulni 🙂 Nyugodtan kicserelheted, amire szeretned az esemeny figyelo hozzaadasat, szamtalan modszer van. Ez az egyik.

Avatar Tupacko
2010. április 8.
07:11

jah… ez nagyon kegyetlen :S
DE király!!! XD

gr33n 2010. április 10. - 18:43

Ez de szemét! 🙁 Nem kellett volna közzétenni! 🙁 Most minden oldal használni fogja, ha még nem tette. 🙁

Bence 2010. április 13. - 20:34

Mellesleg VALAHOGY biztos ki lehet védeni. Max. nem nézed azt a lapot. 😀

Bence 2010. április 13. - 20:46

Ketlem, hogy valaki, aki minimalis CSS es JavaScript tudassal rendelkezik, ne tudta volna ezt magatol is megirni. Egy jobaratom kert meg, hogy segitsek neki es en szivesen segitek 🙂 Egyet se felj, nem fog most hirtelen megvaltozni a vilaghalo 🙂

Avatar Tupacko
2010. április 13.
21:48

Tudom, de néha paranoiásnak is kell lenni… Jaj, paranoia! :D: 😀 😀

Bence 2010. április 14. - 14:15

Szerintem jó, bár attól függ mire akarjuk használni. Pl. Google Adsensére semmiféle képen se, mert lesz vagy napi 1000 kattintás és kitesz a Google mindenestül. De arra, hogy egyik másik weboldalunkra ilyen módon vigyünk látogatást, arra szerintem tökéletes, bár én még raknák hozzá egy sütit, hogy a szerencsétlen látogatónak, minden frissítés után, ne kelljen a linkre kattintania. Mikor a szavazás volt akkor is nekem mindig megjelent az ablak hogy szavazz, őszintén szólva a végére, már kezdet bosszantani, hisz, direkt szavazni jöttem, mindig.

AutóHifi 2010. május 5. - 14:41

Pedig a szavazasnal volt suti, hogy legyen kevesbe zavarobb 😐 Sajnos voltak paran, akiknel megis megjelent, tobbszor.

Avatar Tupacko
2010. május 5.
16:48

Érdekes vívmány ez az el nem tüntethető reklám. Valóban sokszor kissé szemét dolog, de azért ilyen is kell… vagy mégsem? 😉

Odin 2010. június 27. - 10:14

Véleményem szerint az ilyen reklámozási forma egy idő után drasztikus látogatóesést fog eredményezni. Legyen akár jó indulatú reklám vagy rossz.

Kephost 2010. július 22. - 13:25

Felhozom a Firebug-ot, majd katt az ad containerre, a stílus panelen beállítom a display: none-t, azt csókolom.

Neved kötelező 2010. augusztus 28. - 21:44

Egyetértek Kephost hozzászólásával, ez szerintem sem hatásos…

seobaglyak 2011. április 9. - 15:04

Szia,

nekem egy olyan kérdésem lenne, hogy annak mi a kódja js-ben hogy a felugro popup csak a nyitólapon működjön, vagy ugyanannak a látogatónak naponta csak egyszer ugorjon fel?

Előre is kösz!

Tomtee 2012. március 31. - 15:13

Szia!

Az, hogy csak a nyitolapon mukodjon egyszeru: a scriptet illeszd be csak a nyitooldalba.

A masodik kerdesre a valasz tobbfele lehet. A legegyszerubb, hogy cookie (suti) bejegyzest hozol letre, ami 24 ora multan jar le. Ha van suti ertek, nem jelenited meg a reklamot (nem futtatod le a JavaScriptet). Ha nincs ertek, akkor megjelenik a reklam es – fontos – beirsz a sutibe, hogy a kovetkezo egy napban ne jelenjen meg tobbet a reklam.

PHP-bol a kovetkezo keppen tudod kezelni a sutiket: http://webpillango.org/programozas/php/sutik-kezelese-szerveroldalrol/

JavaScript-bol itt talalsz egyszeru leirast (angol): http://www.w3schools.com/js/js_cookies.asp

Kellemes idotoltest!

Avatar Tupacko
2012. március 31.
18:10

Köszi, valamivel közelebb vagyok az igazsághoz, de még mindig nem az igazi…
WP-ben van egy ilyen kód:

és akkor a … helyén bármi script csak akkor fut le és jelenik meg, ha a főoldalon van az olvasó.

Ugyanerre lenne szükségem Joomla-ban.

Tomtee 2012. március 31. - 19:03

Amit irtam barmiben mukodik, nem CMS fuggo, csak a sablont a megfelelo modon kell szerkeszteni. Mivel egy elegge elterjedt CMSrol van szo, ajanlom figyelmedbe inkabb, hogy keress egy bovitmenyt, ami elvegzi szamodra, ami kell.

UI: kerlek ne toltsd ki a weboldal cimet, ha nincs weboldalad.

Avatar Tupacko
2012. március 31.
19:09

Bocs, figyelmetlen voltam. Ha elküldöm v.milyen formában az eddigi js-em segítesz beleilleszteni hogy ugyanannak a felhasználónak csak egyszer ugorjon fel egy nap? Nagyon megköszönném…

Tomtee 2012. március 31. - 19:14

Nem vagyok otthon Joomlaban, de itt talalhatsz megfelelo bovitmenyt:

http://extensions.joomla.org/extensions/style-a-design/popups-a-iframes

vagy Joomla segitseg itt: http://www.joomla.org.hu/

Avatar Tupacko
2012. március 31.
19:24

Több Joomla plugint és modult is letöltöttem már. Sajnos ezekkel az a baj, hogy mindhez pozíciót kell választani aktíváláskor és a sablonba nincs definiálva popup, ezért max jobbra, balra, top vagy footer jelenik meg és nem felugró ablakként. 🙁

A fentiek miatt szeretném úgy megoldani, hogy egy javascriptet illesztek az index.php-be és valahogy beállítom az időfigyelőjét, hogy ugyanannak az olvasónap naponta csak egyszer ugorjon fel.
Sajnos egyelőre még csak ott tartok, hogy a scriptet már kiolvassa, de minden oldalon megjelenik még.

Tomtee 2012. március 31. - 19:35
Avatar Tupacko
2012. március 31.
19:55