PopUp - skočni prozor. Stvaranje i korištenje skočnih prozora

30.07.2019 Programi

Generator prodaje

Materijal ćemo vam poslati:

Array ( => 21977 [~SHOW_COUNTER] => 21977 => 436 [~ID] => 436 => 7 trikova kada skočni prozori rade [~NAME] => 7 trikova kada skočni prozori ( pop-up) donose uspjeh => 6 [~IBLOCK_ID] => 6 => 13 [~IBLOCK_SECTION_ID] => 13 =>

Pop-up pop-up

Koja je svrha prikupljanja e-pošte?

Iz ovog članka ćete naučiti:

Prikazivanje skočnih prozora - zao ili učinkovit alat

Prednosti skočnih prozora:

Korištenje pop

Nedostaci skočnih prozora:

Pad posjećenosti.
pop-

Od kojih se elemenata sastoji pop-up prozor?

Tekst naslova.

Dizajn zaglavlja.

Dizajn blokova i slika.

Polja obrazaca.

Gumb za izlaz.

Glavni tekst.

Dizajn akcijskog gumba.

Vrste skočnih prozora na stranici

Dobar, loš i izvrstan primjer skočnog prozora

Dobar primjer

Pošaljite svoju prijavu

Sjajan primjer

7 ideja o tome kako postaviti skočne prozore na svoju web stranicu

Prednosti:

minusi:

Prednosti:

minusi:

Prednosti:

minusi:

Prednosti:

minusi:

5. Tajni skočni prozor

Prednosti:

minusi:

Prednosti:

minusi:

Kako stvoriti vlastiti skočni prozor

Onmouseover Onclick

Ovo je tekst u skočnom prozoru

Zatvoriti

pomakni miš ovdje!

Skočni prozor za WordPress

ITRO skočni dodatak

Skočni prozor YITH biltena

WordPress skočni prozor

Optinmonster

Ninja skočni prozori

9 savjeta za stvaranje skočnog prozora bez pretjerivanja

1. Ne budi familijaran

7. Budite konkretni

8. Budite koncizni

9 razloga zašto vaš skočni prozor ne radi Niste ocijenili izvedbu dodatka

Ali to nije sve.

Vaš sadržaj je nebitan

Pošaljite svoju prijavu

[~DETAIL_TEXT] =>

Pop-up je skočni prozor koji se pojavljuje na ekranu prilikom posjete stranici i potiče osobu na poduzimanje određenih radnji (pretplatite se na newsletter, postanite sudionik promocije, unesite svoje podatke za kontakt itd.). Glavna svrha skočnih prozora je prikupljanje adresa e-pošte.

Razna istraživanja ukazuju na učinkovitost skočnih prozora. Na primjer, stranica s 44 tisuće posjetitelja stekla je 10-15 pretplatnika na svoj newsletter dnevno, a nakon pokretanja skočnih prozora s jednominutnom odgodom, oko 100-150 posjetitelja počelo se pretplaćivati svaki dan.

Koja je svrha prikupljanja e-pošte pomoću skočnih prozora? Napravimo jednostavnu analogiju. Mjesto je oštećena kanta ispunjena vodom. Svi vaši napori da ga napunite do vrha osuđeni su na neuspjeh jer tekućina curi iz rupa. Slična je situacija i s posjetiteljima internetskih stranica. Mnogi ljudi zatvore karticu nakon što posjete stranicu i nikada se ne vrate u "kantu".

Da bi posao bio uspješan, morate postići visok promet na svom internetskom resursu. Što više adresa e-pošte prikupite, više ljudi možete kasnije privući na svoju stranicu putem učinkovitog marketinga putem e-pošte.

Iz ovog članka ćete naučiti:

Prikazivanje skočnih prozora - zao ili učinkovit alat

Očite prednosti i nedostaci skočnih prozora

Od kojih se elemenata sastoji pop-up prozor?

Vrste skočnih prozora na stranici

Dobar, loš i izvrstan primjer skočnog prozora

7 ideja o tome kako postaviti skočne prozore na svoju web stranicu

Kako stvoriti vlastiti skočni prozor

Skočni prozor za WordPress

9 savjeta za stvaranje skočnog prozora bez pretjerivanja

9 razloga zašto vaš skočni prozor ne radi

Prikazivanje skočnih prozora - zao ili učinkovit alat

Zamislite situaciju: rado čitate informacije na stranici, pokušavate je skrolati... i ispred vas iskaču prozori s reklamama. Prva reakcija je iritacija. Međutim, ako ste na web stranici internetske trgovine i želite nešto kupiti, tada će vas popust koji se nudi u skočnom prozoru sigurno razveseliti.

Moguća je i druga situacija. Dok čitate publikacije blogera koji se bavi internetskim marketingom, skočni prozor vas poziva da potpuno besplatno preuzmete vodič o najpopularnijim pogreškama u Google Adwordsu. Najvjerojatnije će vas zanimati takva pop-up ponuda.

Percepcija skočnog prozora može biti i negativna i pozitivna. Ovisi, kao i u svakom drugom slučaju, o tome je li ponuda sadržana u skočnom prozoru korisna i relevantna za potencijalnog klijenta.

Očite prednosti i nedostaci prilagodbe skočnih prozora

Prednosti skočnih prozora:

Omogućuju vam da privučete pozornost. Kada korisnici slijede poveznicu s druge stranice, prvo vide skočni banner koji nudi nešto isplativo. To ih odgađa i tjera na daljnje djelovanje.
Kada ih koristite, konverzija se povećava. Statistike pokazuju da su pop-up banneri puno učinkovitiji (13 puta) od običnih bannera, kreirani za povećanje prometa na web stranici ili broja pregleda.
Pomoću skočnih prozora možete brzo dobiti povratne informacije. Pop-up banner na stranici s često postavljanim pitanjima omogućit će posjetiteljima da brže kontaktiraju administratore stranice.

Nedostaci skočnih prozora:

Pad posjećenosti. Ako su skočni prozori pogrešno instalirani, posjetitelji će osjetiti samo iritaciju kada se pojave. Na primjer, ako je banner ogroman ili je potrebno dugo vremena da se pronađe križ da bi se zatvorio, tada korisnici mogu dati prednost drugim stranicama.
S obzirom na bannere kao spam. To je moguće s vrlo velikim brojem skočnih prozora. Rezultat može biti pogoršanje ugleda tvrtke.
Skočni banneri mogu se blokirati. Neki ljudi znaju da je moguće instalirati program u preglednik koji će blokirati skočne prozore. U isto vrijeme, možete zaboraviti na učinkovitost oglašavanja pomoću skočnih prozora.

Od kojih se elemenata sastoji pop-up prozor?

Ključ učinkovite komunikacije s posjetiteljima stranice putem pop-up bannera je stalno testiranje tekstova, dizajna i formata prikaza.

Navodimo najvažnije elemente:

Tekst naslova. Morate formulirati svoj pop-up prijedlog jednostavnim i razumljivim riječima, tada će djelovati učinkovito. Razmotrite različite mogućnosti, analizirajte stav posjetitelja prema svakoj od njih.

Dizajn zaglavlja. Nakon što odaberete odgovarajući naslov, lijepo ga dizajnirajte (odaberite boju, font, veličinu). Trebao bi biti čitljiv.

Dizajn blokova i slika. Saznajte koji su formati blokova, boje i veličine najprikladniji za vašu stranicu. Često je dodavanje slike u blok dovoljno za povećanje konverzije.

Polja obrazaca. Možete koristiti različite fontove, opise postavljati na različite načine (unutar, iznad ili lijevo od polja). Morate imati na umu da ih svaki zaslon mora ispravno prikazati.

Gumb za izlaz. Obavezan element skočnog prozora je gumb koji vam omogućuje da odbijete ponudu (na primjer, "Ne, hvala" itd.). Korisnicima možete dati mogućnost zatvaranja skočnog prozora klikom na glavnu stranicu.

Glavni tekst. Svakako treba sadržavati opis prednosti prijedloga i njegovih značajki. Prema rezultatima testiranja, nedostatak takvih informacija na banneru može uzrokovati nisku konverziju.

Tekst za poziv na akciju. Pokušajte s nekoliko alternativa. Gumb "Pošalji" može se zamijeniti s "Dobijte besplatno izvješće", "Preuzmite sada", "Pretplatite me na newsletter".

Dizajn akcijskog gumba. Testirajte gumbe različitih oblika, veličina i boja kako biste pronašli onaj na koji je najudobnije kliknuti.

Vrste skočnih prozora na stranici

Postoje dvije grupe skočnih prozora: Hello-Board i Page-Stop.

Prvu kategoriju karakterizira vodoravno ili okomito postavljanje bannera, pri čemu glavne informacije stranice ostaju vidljive korisniku, a njezina funkcionalnost ostaje gotovo ista. Ova pop-up opcija je mekana i omogućuje vam održavanje ravnoteže između percepcije posjetitelja i rezultata koji se postiže upotrebom bannera.

Takvi skočni prozori imaju nedostataka, ali ih se trenutno ne može eliminirati - pregled stranice je, iako djelomičan, ograničen. Zbog toga su prozori Hello-board manje učinkoviti od prozora Page-Stop.

Kategorija Page-Stop bannera podrazumijeva potpuno ograničenje aktivnosti na stranici sve dok posjetitelj ne klikne na jedan od gumba - prihvati ponudu ili je odbije zatvaranjem skočnog prozora. U većini slučajeva takav skočni prozor samo smeta korisnicima jer ih odvraća od glavne svrhe posjete stranici.

Dobar, loš i izvrstan primjer skočnog prozora

Dobar primjer

Kada prvi put posjetite Lamoda i Quelle online trgovine, iskaču prozori s posebnim ponudama:

“Kupite i dostava će biti o našem trošku”; "Pretplatite se i dobit ćemo popust od 40%." Atraktivne ponude, zar ne? Treba napomenuti da se takve tehnike stalno koriste u trgovanju. Ako obratite pozornost, primijetit ćete da na svakom odjelu trgovačkih centara postoje oglasi o rasprodajama i velikim popustima koji navodno vrijede danas. Međutim, ovaj sustav prodaje prakticira se cijelo vrijeme.

Za online trgovinu (uključujući Lamodu) vrlo je važno dobiti e-mail adresu posjetitelja. Marketinški stručnjaci će ga uključiti u svoj popis e-pošte za slanje i ponudit će svoje proizvode. Ovo koristi svima. Korisnici dobivaju popuste, a online trgovine redovite kupce. Ovaj model se zove "win-win".

Pošaljite svoju prijavu

Dobro poznati CallBackHunter. Kada se ova tehnologija prvi put pojavila na Runetu, izazvala je wow efekt. Uostalom, morate priznati, ukucate svoj telefonski broj i oni vas automatski nazovu za 30 sekundi i savjetuju vas o određenim pitanjima. Stope pretvorbe za mnoge su stranice porasle. Ali nesposobnost većine vlasnika web stranica da pravilno konfiguriraju ovu tehnologiju ubrzo je dovela do činjenice da ona sve iritira. Dva su razloga za to. Prvi je njegovo trenutno pojavljivanje nakon odlaska na stranicu. Posjetitelj nema vremena ni shvatiti gdje se nalazi i treba li mu što ovdje. Drugo, formulacija u CallBackHunteru je u najmanju ruku zbunjujuća:

Skočni prozor ne sadrži nikakvu povoljnu ponudu, korisnika se ne nagovara na pretplatu. Ovdje računamo na učinak iznenađenja. Ako posjetitelj klikne na željeni pop-up gumb, a da nije smislio kako zatvoriti prozor, automatski će se poslati poziv tvrtki. Zaposlenici će početi nuditi proizvode, a možda i nešto prodati. Na taj način organizacija može samo izgubiti svoj ugled.

Trebate nastojati zadovoljiti potrebe kupaca, a ne povećati prodaju pod svaku cijenu. Odnose s potrošačima treba graditi na povjerenju, tada možete računati na dugoročnu suradnju koja će biti korisna za obje strane.

Sjajan primjer

Na web stranici časopisa General Director, koji je naš klijent, iskače sljedeći banner:

Ovaj obrazac se pojavljuje tijekom čitanja članka ili nakon što provedete određeno vrijeme na stranici. Glavna svrha ovog obrasca je dati ljudima koristan sadržaj kada se spremaju napustiti stranicu.

Imajte na umu da pop-up na web stranici časopisa General Director sadrži dovoljno informacija, njegova ponuda je primamljiva. Također nisu pretjerali s nametljivošću. Posjetitelji nemaju dojam da ovaj skočni prozor pripada drugoj stranici ili da je oglas, tako da djeluje učinkovito.

7 ideja o tome kako postaviti skočne prozore na svoju web stranicu 1. Skočni prozor umjesto bannera

Webmasteri često koriste bannere, postavljajući ih sa strane stranice ili na bočnu traku. Ako kliknete na banner, otvorit će se određena stranica. Ako sadrži ponudu za pretplatu na newsletter, umjesto toga se mogu koristiti pop-up obrasci.

Prednosti:

Skočni prozor će se odmah otvoriti, dok će stranici za pretplatu trebati neko vrijeme da se učita. To može dovesti do povećanja konverzije pretplatnika.
Postoji prilika za uštedu prostora. Ako je banner zamijenjen obrascem za pretplatu, tada se možete ograničiti na samo jedan gumb, uklanjajući sva polja. Klikom na njega pojavit će se skočni prozor.

minusi:

Nećete moći postaviti puno informacija na skočni prozor, za razliku od stranice za pretplatu. Također nećete moći prenijeti sliku ili video.

2. Skočni prozor umjesto pretplate

Ovo se odnosi na obrasce za pretplatu postavljene na zasebnim stranicama i sa strane glavne stranice (u bočnoj traci, kao u primjeru). Na blogovima se na kraju članka nalaze ponude za pretplatu na newsletter. Dobra opcija u ovom slučaju je eliminirati sva polja, ostavljajući jedan klikabilni gumb koji će pozvati skočni prozor. I već može sadržavati potreban broj polja.

Prednosti:

Povećanje broja pretplatnika. Razlog tome je što je posjetitelj klikom na pop-up gumb već skloniji ispunjavanju polja. Ako se obrazac za pretplatu odmah prikaže, obično se zanemaruje.
Ekonomičnije korištenje internetskog prostora. Polja iz obrasca za pretplatu mogu se zamijeniti reklamnim informacijama. Druga je mogućnost dizajnirati stranicu u minimalističkom stilu, čineći je urednom.

minusi:

Očekivanja korisnika ostaju neopravdana. Na primjer, klikom na gumb "Preuzmi" osoba čeka početak preuzimanja. Pojava obrasca za ispunjavanje nakon toga može izazvati negativne emocije. Međutim, to možete kombinirati s bilo kojom stavkom i naknadno stvoriti gumbe koji vam omogućuju trenutno preuzimanje datoteka (bez skočnih prozora).

3. Skočni prozor umjesto riječi zahvale

Ovo je dobro i jednostavno rješenje. Nema potrebe stvarati stranice s riječima zahvalnosti i poveznicama za preuzimanje zanimljivih datoteka. Umjesto toga, trebali biste osobu usmjeriti na istu stranicu, dok joj malo mijenjate adresu (na primjer, /?yhx935/ je dodan u /page/). Takav dodatak će dati naredbu za otvaranje skočnog prozora sa zahvalama ili vezama za preuzimanje.

Prednosti:

Možete izraditi takve stranice, a da na to potrošite mnogo manje vremena.

minusi:

Morat ćete pronaći stručnjaka koji će konfigurirati izgled skočnog prozora prilikom dodavanja tajnog parametra na adresu stranice.
Ne podržavaju svi skočni prozori veze na društvene mreže.

4. Skočni prozor umjesto stranice “Hvala što ste se pretplatili”.

Ovaj oblik skočnog prozora sličan je prethodnim vrstama. Korisnik koji se pretplati na newsletter ne šalje se na stranicu zahvale, već na prodajnu stranicu, gdje se odmah pojavljuje skočni prozor. Sadrži poveznice i riječi zahvale koje posjetitelj treba. Ispod skočnog prozora možete postaviti informacije o plaćenom proizvodu vezanom uz pretplatu i ponudu za njegovu kupnju na promociji.

Prednosti:

Nema potrebe za stranicom zahvale.
Rast pretvorbe. Prilikom zatvaranja prozora, osoba se odvodi na potpuno učitanu stranicu s reklamom za plaćeni proizvod. Ako ga atraktivno dizajnirate, mnogi će zatvoriti skočni prozor kako bi detaljnije pogledali ponudu.

minusi:

Skočni prozor trebao bi se pojaviti odmah, inače bi vas korisnici mogli posumnjati na prijevaru i nedostatak potrebnih veza. Kao rezultat toga, obujam prodaje će pasti.

5. Tajni skočni prozor

Za korisnike koji dugo putuju na vašem internetskom resursu, možete razviti tajni skočni prozor, objavljujući informacije o vrlo povoljnim ponudama na njemu. Ako ga ispravno izradite, samo će određeni ljudi koji su najaktivniji imati priliku vidjeti takav pop-up. Ovo je lijep bonus.

Takav se skočni prozor može pojaviti, na primjer, nakon 36 minuta boravka na vašoj stranici (ili dulje). Alternativno, možete saznati koliko dugo ne više od 1% posjetitelja ostaje na vašoj stranici i zabilježiti to vrijeme u skočnom prozoru. Ne morate nuditi promociju; možete anketirati korisnike (+ zatim dati popust) ako želite prikupiti bilo kakve podatke o onima koji vašu stranicu gledaju dulje vrijeme.

Prednosti:

Najaktivniji dobivaju bonuse. Ako je ponuda isplativa, korisnici će biti zadovoljni. Ova vrsta skočnog prozora za web stranicu je poput skrivenog uskršnjeg jajeta.

minusi:

Ako svi pronađu "jaje", pretrpjet ćete gubitke.

Dodavanje personalizacije na popis može se smatrati čudnim. Međutim, sada se ne koristi često, ali zajedno sa skočnim prozorima djelovao bi prilično učinkovito. Sastoji se u sljedećem. Ako znate korisnikove podatke za kontakt (na primjer, ime, adresu e-pošte, broj telefona), tada:

Na stranici automatski ispunjavate obrasce za pretplatu.
Uklonite nepotrebne obrasce. Nisu ni od kakve koristi jer svoju ponudu posjetitelju možete poslati e-poštom. Izbrisane obrasce moguće je zamijeniti oglašavanjem (umjesto obrasca sa strane stranice izradite banner koji reklamira prodajno mjesto ili promociju).

Prednosti:

Moći ćete postići veće konverzije, budući da će se polja automatski popunjavati, sve što trebate učiniti je kliknuti na gumb pop-up prozora.
Moći ćete postaviti više oglasa na stranicu.

7. Skočni prozor unutar članka

Moguće je ne samo stvoriti skočne prozore koji se pojavljuju sami, već i uključiti nekoliko gumba u tekst na stranici, klik na koji će izazvati pojavljivanje skočnih prozora. Što je duži članak, možete postaviti više gumba.

Prednosti:

Korisnicima neće smetati skočni prozori jer ih mogu pozvati kad god žele.
Prilika za povećanje konverzije. Da biste to učinili, morate privući interes posjetitelja na skočne gumbe za pozive.

minusi:

U članku se pojavljuju nepotrebni elementi. U tom smislu, preporuča se povezati takve gumbe s personalizacijom: pretplaćena osoba ih više ne bi trebala susresti u tekstu.

Kako stvoriti vlastiti skočni prozor

Kako sami napraviti pop-up? Da biste to učinili, morate poznavati HTML barem na osnovnoj razini. U tom slučaju možete jednostavno stvoriti skočni prozor za web mjesto.

Za njegovu izradu često se koriste JavaScript okvirne biblioteke (jQuery, MooTools, Prototype itd.), ali neprofesionalcu nisu od koristi. Alati jezika za označavanje hiperteksta HTML i jezika za opis kaskadnih stilskih listova CSS omogućuju vam da razvijete dobar skočni prozor. Rad prozora napisanih na ovim jezicima neće ovisiti o prisutnosti podrške za JavaScript u pregledniku.

Kod koji daje naredbu za otvaranje skočnog prozora nalazi se u dva retka. Prvi zadatak je generirati poveznicu, klikom na koju se pojavljuje skočni prozor:

Vrijednosti atributa oznake za ovu vezu su sljedeće. Onmouseover definira vrstu pokazivača miša koji se pojavljuje kada prijeđete iznad skočnog gumba. Onclick je potreban za naređivanje pojavljivanja skrivenog bloka s skočnim identifikatorom nakon što korisnik klikne na gumb.

Drugi red je skočni prozor. Identifikator skočnog prozora koristi se za označavanje sloja. Atribut stila omogućuje vam postavljanje parametara prozora, fonta i okvira (njihova boja, veličina, pozadina):

Ovo je tekst u skočnom prozoru

Skočni prozor je prema zadanim postavkama nevidljiv (budući da je birač prikaza postavljen na ništa u tekstu koda).

Ova dva retka dovoljna su za stvaranje skočnog prozora u html-u. Morat ćete ih umetnuti između oznaka svoje stranice i skočni prozor će raditi.

Kako bi se skočni prozor zatvorio, morat ćete umetnuti poveznicu prije oznake koja daje naredbu za skrivanje vidljivog sloja s ID-om skočnog prozora:

Zatvoriti

Ako želite, možete podesiti da se prozor ne pojavljuje kada kliknete na poveznicu, već samo kada postavite kursor iznad nje. Da biste to učinili, promijenite prvi redak:

pomakni miš ovdje!

Skočni prozor za WordPress

Postoji više od jednog skočnog dodatka za Wordpress. Kako među mnogim opcijama odabrati ono pravo? Skočni prozor može se pojaviti neočekivano ili glatko, na glavnoj stranici web mjesta ili na internoj stranici, odmah nakon prijelaza na stranicu ili pri zatvaranju iste. Ispod su najbolje opcije dodataka:

ITRO skočni dodatak

je besplatno. Vrlo je prikladan za korištenje, uređivanje također nije teško. Dodatak pruža mogućnost preuzimanja slika, oznaka za naslove i videozapisa s YouTubea.

Postavke vam omogućuju prilagodbu. Možete izraditi banner bilo koje veličine i boje. Granice skočnih prozora također se mogu uređivati. Također možete odabrati stranice na kojima će se pojaviti skočni prozori.

Skočni prozor YITH biltena

Također je besplatan. Dizajniran za stvaranje skočnog prozora u obliku pretplate. Nije ga teško instalirati i konfigurirati. Morat ćete raditi samo na dvije stranice. Na jednom su opće postavke, na drugom je pop-up editor za dizajn.

Opće postavke omogućuju pisanje naslova, umetanje slike i informacija u obliku teksta. Ovdje možete postaviti boju pozadine, tekst i odabrati font. Nedostatak je nemogućnost odabira mjesta teksta i slika. Međutim, skočni prozor, dizajniran prema predlošku, prilično je sladak.

WordPress skočni prozor

Ovaj vam dodatak omogućuje stvaranje kreativnih skočnih prozora. Njegove prednosti uključuju jednostavnost dodavanja obrazaca i slika te veliki izbor opcija izgleda. Možete postaviti da se skočni prozor pojavljuje samo pred korisnicima koji nisu ništa komentirali na stranici ili koji su na stranicu došli s tražilice. U postavkama možete odrediti koliko puta skočni prozor može iskočiti ispred svakog posjetitelja.

Optinmonster

Ovaj dodatak se plaća, ali pruža opsežne mogućnosti uređivanja skočnih prozora. Automatski ga podržavaju GetResponse, MailChimp i drugi. Nakon odabira usluge e-pošte, dolazi do automatske konfiguracije. Plaćena verzija dizajnirana je za provođenje testiranja i analizu njegovih rezultata kako bi se identificirala učinkovitija skočna opcija. Videozapisi se mogu ugraditi izravno u obrazac.

Ninja skočni prozori

Također plaćeni dodatak koji podržavaju mnoge usluge e-pošte. Predlošci su razvijeni na profesionalnoj razini, dizajn bannera može se izraditi u stilu stranice. Moguće je konfigurirati izgled skočnog prozora na bilo kojoj stranici, u bilo kojoj kategoriji. Skočni prozor također može iskočiti kada je stranica zatvorena.

Stranicu možete učiniti privatnom dok je korisnik ne podijeli na društvenim mrežama ili se pretplati. Moguće je provesti testove za poboljšanje učinkovitosti skočnog prozora.

9 savjeta za stvaranje skočnog prozora bez pretjerivanja

1. Ne budi familijaran

Ni pod kojim uvjetima ne smijete biti nepristojni ili se prema posjetiteljima ponašati kao prema idiotima. Također je bolje ne ulaziti u ono što ih motivira. Zabranjeni su natpisi u skočnim prozorima poput "Ne, radije bih da nemam pretplatnike", jer se mogu shvatiti kao "Ne, ne želim poslovati s vama."

2. Ne nadoknađujte kvalitetu kvantitetom.

Želja da se dosegne 400% ne bi trebala dovesti do povećanja broja skočnih prozora nauštrb njihove kvalitete. Da biste odabrali najučinkovitiju opciju, provedite testove. Ne postavljajte skočne prozore na svaku stranicu svoje web-lokacije.

3. Nemojte se pojaviti na krivom mjestu u krivo vrijeme

Pojavljivanje skočnog prozora dok se stranica učitava rezultirat će gubitkom posjetitelja. Ako je skočni prozor velik i teško ga je zatvoriti, vjerojatno ćete izgubiti potencijalne kupce.

Najbolja opcija je da se skočni prozor pojavi malo prije nego što korisnik zatvori stranicu. Možete ga postaviti na ovaj način analizirajući koliko dugo posjetitelji ostaju na vašoj stranici. Također možete zabilježiti kako se pokazivač pomiče od bloka sa sadržajem do blokova koji nailaze na putanju prema gumbu za zatvaranje stranice.

4. Personalizirajte svoje skočne prozore

U današnje vrijeme, kada se organizira elektronička prodaja, moderno je raditi personalizaciju. Vjeruje se da je osobi ugodnije kupovati u trgovinama u kojima se roba nudi njemu osobno. Nitko ne želi biti korisnik bez lica.

Ako imate priliku, personalizirajte svoje skočne prozore. Ako ste vlasnik internetske trgovine, pričekajte dok klijent ne pokaže da je zainteresiran, a zatim u skladu s tim oblikujte ponudu.

5. Ne skrivaj križ da zatvoriš prozor

Ako je skočni prozor teško zatvoriti, korisnik može razviti negativan stav prema vašoj stranici. Stoga će se smanjiti vjerojatnost da će on kupiti (ili se pretplatiti, itd.).

6. Izbjegavajte biti pretjerano napadan što je više moguće.

Neočekivani događaji ne raduju se uvijek čovjeku, pogotovo ako stanu na put njegovom cilju. Ako se pojavi skočni prozor dok čitate zanimljiv članak ili birate proizvod i traži da se pretplatite na tjedni bilten, tada neće biti produktivne interakcije.

7. Budite konkretni

Osobitost skočnog prozora je potreba za brzim privlačenjem pozornosti posjetitelja. Da biste to učinili, morate jasno formulirati svoje prijedloge, tada će to biti jasno potencijalnim klijentima.

8. Budite koncizni

Ne samo tekstualne informacije, već i dizajn skočnog prozora trebaju biti sažeti. Bolje je odabrati jednostavan dizajn, mirne boje i funkcionalne elemente koji su poznati većini korisnika. Učinkovito je razdvojiti skočni prozor na zone koje čine strukturu vaše ponude jasnom na intuitivnoj razini.

9. Odvažite prednosti i nedostatke

Stvorite skočne prozore samo ako nema drugih opcija.

9 razloga zašto vaš skočni prozor ne radi Vaš skočni prozor nije mobilan

Oko 1/3 korisnika koristi pametne telefone za pregledavanje web stranica. Međutim, u većini slučajeva skočni prozori ne prikazuju se ispravno na vašem telefonu. Slika skočnog prozora na telefonu izgleda mutno i ne postoji način da se zatvori ili vidi u potpunosti. To uzrokuje gubitak prihoda. Svakako provjerite funkcionalnost svojih skočnih prozora. Ako postoje problemi, trebali biste prilagoditi stranicu za pametne telefone.

Niste ocijenili dodatak

Responzivnost vaše web stranice smanjuje se sa svakim dodatkom. Ako je stranica spora, tada ima manje prometa, što znači i manje prodaje. Brzina učitavanja može se pronaći na uslugama Sitespeed.ru ili PageSpeed Insights. Osim rezultata, dobit ćete preporuke za poboljšanje brzine stranice:

Ali to nije sve.

Ako postoji sukob između skočnih dodataka vaše web-lokacije, to može uzrokovati da izgledaju užasno. Prije nego dopustite prikazivanje skočnih prozora posjetiteljima, morate se pobrinuti da dobro izgledaju na svim uređajima.

Vaš dizajn skočnog prozora je loš

Skočni prozor prikazujete svojim potencijalnim klijentima. Kako bi oni stvorili mišljenje o proizvodima vašeg brenda kao praktičnima, kvalitetnima i dobro dizajniranima, morate poraditi na dizajnu skočnih prozora i pobrinuti se da budu prikladni za posjetitelje. Napravite skočni prozor u stilu svoje stranice, koristite lijepe fontove, učitajte slike.

Niste izmislili, nego kopirali tekst za pop-up prozor

Poslovni čovjek mora biti originalan da bi se istaknuo među svojim konkurentima. Tada mu je uspjeh zajamčen. Ako je vaša strategija kopiranje drugih, nećete moći izbiti na prvo mjesto. Korisnici će zadnji posjetiti vašu stranicu. Morate pokazati publici da ste lider. Imajte to na umu prilikom izrade skočnih prozora.

Vaš sadržaj je nebitan

Na primjer, korisnik je dodao artikl u košaricu, preostalo je još malo vremena do završetka kupnje i iz nekog razloga zatvori karticu... Istodobno se pojavljuje skočni prozor s ponudom knjige u elektroničkom obliku. Mislite li da je ova odluka ispravna?

Još jedan primjer. Osoba čita vaš blog, ali ne kupuje ništa. Što mislite, je li mu moguće ponuditi popust na proizvod?

Ista ponuda korisnicima u različitim fazama procesa kupnje neće biti jednako učinkovita. Za one koji su u procesu odabira ili dodavanja artikla u košaricu dobro će doći popust ili besplatna dostava. A za one koji su novi na vašoj stranici, možete ponuditi probnu verziju proizvoda.

Važno je zapamtiti da sadržaj skočnih prozora mora odgovarati sadržaju stranice. Na primjer, u katalogu ženske odjeće ne biste smjeli dopustiti pojavljivanje skočnih prozora s reklamama za kravate.

Tražite previše informacija

Ono što radite odredit će koje informacije želite dobiti o svojim klijentima kako biste s njima mogli surađivati u budućnosti. Ljudi su obično spremniji ispuniti obrasce ako ih ima samo nekoliko.

Međutim, ako osoba daje dodatne podatke (spol, dob, ime, adresa itd.), tada će personalizacija ponuda biti dublja.

Kada stvarate skočni prozor u jednom koraku, najbolje je zatražiti samo e-poštu.

Ako je prozor u više koraka, tada možete zatražiti druge podatke. Ako su posjetitelji zainteresirani za prvi skočni prozor, obično su voljni pružiti više pojedinosti o sebi u drugom skočnom prozoru. Međutim, također ne smije imati više od četiri polja.

Niste napravili A/B testiranje

Marketinški stručnjaci znaju da učinkovito A/B testiranje može povećati prihod od postojećeg prometa.

Prije split testiranja trebate:

odrediti koji okidači imaju glavni utjecaj na korisnike;
izmjerite indikator točke A prije ugradnje točke B;
provjerite sve sami, ne vjerujući općim statistikama;
povećati broj posjeta potrebnih za testiranje (najmanje 1500 po šalteru);
odrediti pokazatelje koje je potrebno mjeriti.

Trebalo bi biti nekoliko testova. Usporedite dizajne skočnih prozora da vidite koji su najučinkovitiji. Čak i male promjene mogu udvostručiti vaše konverzije.

Ako ste isključili utjecaj gore navedenih razloga, tada morate kopati dublje - provesti reviziju mjesta. A za to je bolje obratiti se profesionalcima! Stručnjaci internetske agencije "Sales Generator" brzo će za vas provesti potpunu analizu pogrešaka u internoj i eksternoj optimizaciji resursa, a također će pružiti 47+ preporuka za povećanje prometa i prodaje s vaše stranice.

Pošaljite svoju prijavu

Iz ovog članka ćete naučiti:

Prikazivanje skočnih prozora - zao ili učinkovit alat

Očite prednosti i nedostaci skočnih prozora

Od kojih se elemenata sastoji pop-up prozor?

Vrste skočnih prozora na stranici

Dobar, loš i izvrstan primjer skočnog prozora

7 ideja o tome kako postaviti skočne prozore na svoju web stranicu

Kako stvoriti vlastiti skočni prozor

Skočni prozor za WordPress

9 savjeta za stvaranje skočnog prozora bez pretjerivanja

9 razloga zašto vaš skočni prozor ne radi

Prikazivanje skočnih prozora - zao ili učinkovit alat

Percepcija skočnog prozora može biti i negativna i pozitivna. Ovisi, kao i u svakom drugom slučaju, o tome je li ponuda sadržana u skočnom prozoru korisna i relevantna za potencijalnog klijenta.

Očite prednosti i nedostaci prilagodbe skočnih prozora

Prednosti skočnih prozora:

Omogućuju vam da privučete pozornost. Kada korisnici slijede poveznicu s druge stranice, prvo vide skočni banner koji nudi nešto isplativo. To ih odgađa i tjera na daljnje djelovanje.
Kada ih koristite, konverzija se povećava. Statistike pokazuju da su pop-up banneri puno učinkovitiji (13 puta) od običnih bannera, kreirani za povećanje prometa na web stranici ili broja pregleda.
Pomoću skočnih prozora možete brzo dobiti povratne informacije. Pop-up banner na stranici s često postavljanim pitanjima omogućit će posjetiteljima da brže kontaktiraju administratore stranice.

Nedostaci skočnih prozora:

Pad posjećenosti. Ako su skočni prozori pogrešno instalirani, posjetitelji će osjetiti samo iritaciju kada se pojave. Na primjer, ako je banner ogroman ili je potrebno dugo vremena da se pronađe križ da bi se zatvorio, tada korisnici mogu dati prednost drugim stranicama.
S obzirom na bannere kao spam. To je moguće s vrlo velikim brojem skočnih prozora. Rezultat može biti pogoršanje ugleda tvrtke.
Skočni banneri mogu se blokirati. Neki ljudi znaju da je moguće instalirati program u preglednik koji će blokirati skočne prozore. U isto vrijeme, možete zaboraviti na učinkovitost oglašavanja pomoću skočnih prozora.

Od kojih se elemenata sastoji pop-up prozor?

Ključ učinkovite komunikacije s posjetiteljima stranice putem pop-up bannera je stalno testiranje tekstova, dizajna i formata prikaza.

Navodimo najvažnije elemente:

Dizajn zaglavlja. Nakon što odaberete odgovarajući naslov, lijepo ga dizajnirajte (odaberite boju, font, veličinu). Trebao bi biti čitljiv.

Dizajn blokova i slika. Saznajte koji su formati blokova, boje i veličine najprikladniji za vašu stranicu. Često je dodavanje slike u blok dovoljno za povećanje konverzije.

Polja obrazaca. Možete koristiti različite fontove, opise postavljati na različite načine (unutar, iznad ili lijevo od polja). Morate imati na umu da ih svaki zaslon mora ispravno prikazati.

Glavni tekst. Svakako treba sadržavati opis prednosti prijedloga i njegovih značajki. Prema rezultatima testiranja, nedostatak takvih informacija na banneru može uzrokovati nisku konverziju.

Tekst za poziv na akciju. Pokušajte s nekoliko alternativa. Gumb "Pošalji" može se zamijeniti s "Dobijte besplatno izvješće", "Preuzmite sada", "Pretplatite me na newsletter".

Dizajn akcijskog gumba. Testirajte gumbe različitih oblika, veličina i boja kako biste pronašli onaj na koji je najudobnije kliknuti.

Vrste skočnih prozora na stranici

Postoje dvije grupe skočnih prozora: Hello-Board i Page-Stop.

Dobar, loš i izvrstan primjer skočnog prozora

Dobar primjer

Kada prvi put posjetite Lamoda i Quelle online trgovine, iskaču prozori s posebnim ponudama:

Pošaljite svoju prijavu

Sjajan primjer

Na web stranici časopisa General Director, koji je naš klijent, iskače sljedeći banner:

7 ideja o tome kako postaviti skočne prozore na svoju web stranicu 1. Skočni prozor umjesto bannera

Prednosti:

Skočni prozor će se odmah otvoriti, dok će stranici za pretplatu trebati neko vrijeme da se učita. To može dovesti do povećanja konverzije pretplatnika.
Postoji prilika za uštedu prostora. Ako je banner zamijenjen obrascem za pretplatu, tada se možete ograničiti na samo jedan gumb, uklanjajući sva polja. Klikom na njega pojavit će se skočni prozor.

minusi:

Nećete moći postaviti puno informacija na skočni prozor, za razliku od stranice za pretplatu. Također nećete moći prenijeti sliku ili video.

2. Skočni prozor umjesto pretplate

Prednosti:

Povećanje broja pretplatnika. Razlog tome je što je posjetitelj klikom na pop-up gumb već skloniji ispunjavanju polja. Ako se obrazac za pretplatu odmah prikaže, obično se zanemaruje.
Ekonomičnije korištenje internetskog prostora. Polja iz obrasca za pretplatu mogu se zamijeniti reklamnim informacijama. Druga je mogućnost dizajnirati stranicu u minimalističkom stilu, čineći je urednom.

minusi:

Očekivanja korisnika ostaju neopravdana. Na primjer, klikom na gumb "Preuzmi" osoba čeka početak preuzimanja. Pojava obrasca za ispunjavanje nakon toga može izazvati negativne emocije. Međutim, to možete kombinirati s bilo kojom stavkom i naknadno stvoriti gumbe koji vam omogućuju trenutno preuzimanje datoteka (bez skočnih prozora).

3. Skočni prozor umjesto riječi zahvale

Prednosti:

Možete izraditi takve stranice, a da na to potrošite mnogo manje vremena.

minusi:

Morat ćete pronaći stručnjaka koji će konfigurirati izgled skočnog prozora prilikom dodavanja tajnog parametra na adresu stranice.
Ne podržavaju svi skočni prozori veze na društvene mreže.

4. Skočni prozor umjesto stranice “Hvala što ste se pretplatili”.

Prednosti:

Nema potrebe za stranicom zahvale.
Rast pretvorbe. Prilikom zatvaranja prozora, osoba se odvodi na potpuno učitanu stranicu s reklamom za plaćeni proizvod. Ako ga atraktivno dizajnirate, mnogi će zatvoriti skočni prozor kako bi detaljnije pogledali ponudu.

minusi:

Skočni prozor trebao bi se pojaviti odmah, inače bi vas korisnici mogli posumnjati na prijevaru i nedostatak potrebnih veza. Kao rezultat toga, obujam prodaje će pasti.

5. Tajni skočni prozor

Prednosti:

Najaktivniji dobivaju bonuse. Ako je ponuda isplativa, korisnici će biti zadovoljni. Ova vrsta skočnog prozora za web stranicu je poput skrivenog uskršnjeg jajeta.

minusi:

Ako svi pronađu "jaje", pretrpjet ćete gubitke.

Na stranici automatski ispunjavate obrasce za pretplatu.
Uklonite nepotrebne obrasce. Nisu ni od kakve koristi jer svoju ponudu posjetitelju možete poslati e-poštom. Izbrisane obrasce moguće je zamijeniti oglašavanjem (umjesto obrasca sa strane stranice izradite banner koji reklamira prodajno mjesto ili promociju).

Prednosti:

Moći ćete postići veće konverzije, budući da će se polja automatski popunjavati, sve što trebate učiniti je kliknuti na gumb pop-up prozora.
Moći ćete postaviti više oglasa na stranicu.

7. Skočni prozor unutar članka

Prednosti:

Korisnicima neće smetati skočni prozori jer ih mogu pozvati kad god žele.
Prilika za povećanje konverzije. Da biste to učinili, morate privući interes posjetitelja na skočne gumbe za pozive.

minusi:

U članku se pojavljuju nepotrebni elementi. U tom smislu, preporuča se povezati takve gumbe s personalizacijom: pretplaćena osoba ih više ne bi trebala susresti u tekstu.

Kako stvoriti vlastiti skočni prozor

Kako sami napraviti pop-up? Da biste to učinili, morate poznavati HTML barem na osnovnoj razini. U tom slučaju možete jednostavno stvoriti skočni prozor za web mjesto.

Kod koji daje naredbu za otvaranje skočnog prozora nalazi se u dva retka. Prvi zadatak je generirati poveznicu, klikom na koju se pojavljuje skočni prozor:

Ovo je tekst u skočnom prozoru

Skočni prozor je prema zadanim postavkama nevidljiv (budući da je birač prikaza postavljen na ništa u tekstu koda).

Ova dva retka dovoljna su za stvaranje skočnog prozora u html-u. Morat ćete ih umetnuti između oznaka svoje stranice i skočni prozor će raditi.

Kako bi se skočni prozor zatvorio, morat ćete umetnuti poveznicu prije oznake koja daje naredbu za skrivanje vidljivog sloja s ID-om skočnog prozora:

Zatvoriti

Ako želite, možete podesiti da se prozor ne pojavljuje kada kliknete na poveznicu, već samo kada postavite kursor iznad nje. Da biste to učinili, promijenite prvi redak:

pomakni miš ovdje!

Skočni prozor za WordPress

ITRO skočni dodatak

je besplatno. Vrlo je prikladan za korištenje, uređivanje također nije teško. Dodatak pruža mogućnost preuzimanja slika, oznaka za naslove i videozapisa s YouTubea.

Skočni prozor YITH biltena

WordPress skočni prozor

Optinmonster

Ninja skočni prozori

Stranicu možete učiniti privatnom dok je korisnik ne podijeli na društvenim mrežama ili se pretplati. Moguće je provesti testove za poboljšanje učinkovitosti skočnog prozora.

9 savjeta za stvaranje skočnog prozora bez pretjerivanja

1. Ne budi familijaran

2. Ne nadoknađujte kvalitetu kvantitetom.

3. Nemojte se pojaviti na krivom mjestu u krivo vrijeme

Pojavljivanje skočnog prozora dok se stranica učitava rezultirat će gubitkom posjetitelja. Ako je skočni prozor velik i teško ga je zatvoriti, vjerojatno ćete izgubiti potencijalne kupce.

4. Personalizirajte svoje skočne prozore

Ako imate priliku, personalizirajte svoje skočne prozore. Ako ste vlasnik internetske trgovine, pričekajte dok klijent ne pokaže da je zainteresiran, a zatim u skladu s tim oblikujte ponudu.

5. Ne skrivaj križ da zatvoriš prozor

Ako je skočni prozor teško zatvoriti, korisnik može razviti negativan stav prema vašoj stranici. Stoga će se smanjiti vjerojatnost da će on kupiti (ili se pretplatiti, itd.).

6. Izbjegavajte biti pretjerano napadan što je više moguće.

7. Budite konkretni

Osobitost skočnog prozora je potreba za brzim privlačenjem pozornosti posjetitelja. Da biste to učinili, morate jasno formulirati svoje prijedloge, tada će to biti jasno potencijalnim klijentima.

8. Budite koncizni

9. Odvažite prednosti i nedostatke

Stvorite skočne prozore samo ako nema drugih opcija.

9 razloga zašto vaš skočni prozor ne radi Vaš skočni prozor nije mobilan

Niste ocijenili dodatak

Ali to nije sve.

Vaš dizajn skočnog prozora je loš

Niste izmislili, nego kopirali tekst za pop-up prozor

Vaš sadržaj je nebitan

Još jedan primjer. Osoba čita vaš blog, ali ne kupuje ništa. Što mislite, je li mu moguće ponuditi popust na proizvod?

Tražite previše informacija

Međutim, ako osoba daje dodatne podatke (spol, dob, ime, adresa itd.), tada će personalizacija ponuda biti dublja.

Kada stvarate skočni prozor u jednom koraku, najbolje je zatražiti samo e-poštu.

Niste napravili A/B testiranje

Marketinški stručnjaci znaju da učinkovito A/B testiranje može povećati prihod od postojećeg prometa.

Prije split testiranja trebate:

odrediti koji okidači imaju glavni utjecaj na korisnike;
izmjerite indikator točke A prije ugradnje točke B;
provjerite sve sami, ne vjerujući općim statistikama;
povećati broj posjeta potrebnih za testiranje (najmanje 1500 po šalteru);
odrediti pokazatelje koje je potrebno mjeriti.

Trebalo bi biti nekoliko testova. Usporedite dizajne skočnih prozora da vidite koji su najučinkovitiji. Čak i male promjene mogu udvostručiti vaše konverzije.

Vanjski skočni prozori s reklamama su užasne ideje! Svi razumni webmasteri nikada vam neće savjetovati da ih koristite na svojoj web stranici. Ali, ako govorimo o internim popup prozorima, ovo je koristan element koji daje dodatne informacije, upozorava, sprječava, daje mogućnost izbora i još mnogo toga.

Što ćemo stvoriti?

U ovom vodiču ćemo stvoriti jednostavan i lijep skočni prozor koristeći jquery. Bit će sličan onome što se koristi na twitteru. Naravno, možete mu dati stil koji želite.

Koju će funkcionalnost imati prozor?

Želimo da bude u središtu stranice web-mjesta kada se prikazuje.
Trebao bi postojati gumb "zatvori" ili nešto slično.
Kada kliknemo izvan bloka, skočni prozor će se automatski zatvoriti.
Kada je prozor prikazan, stranica bi trebala biti prekrivena sjenom kako bi se korisnik mogao fokusirati.

Počnimo s razvojem

Za implementaciju skočnog prozora koristit ćemo CSS i nekoliko redaka jQuery koda, te naravno HTML. Imajte na umu da za implementaciju naše ideje ne trebate nikakve dodatke ili dodatne alate, sve je vrlo jednostavno i pouzdano!

Klikni me X Neki naslov ide ovdje: Još malo sadržaja, kada želite dodati još malo

Skočni okvir (položaj: apsolutni; radijus granice: 5px; pozadina: #fff; prikaz: ništa; sjena okvira: 1px 1px 5px rgba(0,0,0,0.2); obitelj-fontova: Arial, sans-serif ; z-index: 9999999; veličina fonta: 14px; ) .popup-box .close ( pozicija: apsolutna; vrh: 0px; desno: 0px; obitelj-fontova: Arial, Helvetica, sans-serif; težina-fonta: podebljano ; kursor: pokazivač; boja: #434343; padding: 20px; veličina fonta: 20px; ) .popup-box .close:hover (boja: #000;) .popup-box h2 (padding: 0; margina: 0; font-size: 18px; ) .popup-box .top ( padding: 20px; ) .popup-box .bottom ( background: #eee; border-top: 1px solid #e5e5e5; padding: 20px; border-bottom-left- radius: 5px; border-bottom-right-radius: 5px; ) #blackout ( background: rgba(0,0,0,0.3); position: absolute; top: 0; overflow: hidden; z-index: 999999; lijevo : 0; prikaz: ništa; )

Definirat ćemo neke druge CSS stilove u JavaScript kodu. Ovi stilovi zahtijevaju dodatno izračunavanje, pa bi bilo bolje to učiniti pomoću jQueryja. Prijeđimo na javascript kod.

jQuery skočni kod prozora

Za početak uključite datoteku jQuery biblioteke. Nakon toga inicijaliziramo jQuery i dodajemo #blackout div u tijelo dokumenta. Također određujemo širinu skočnog prozora.

$(document).ready(function() ( $("body").append(""); var boxWidth = 400;

Zatim stvaramo funkciju koja centrira prozor. Prethodno smo postavili apsolutno pozicioniranje u CSS-u, ne možemo koristiti marginu: 0px auto; trebamo odrediti širinu zaslona, od toga oduzeti širinu skočnog prozora i sve ovo podijeliti s 2. Visina će biti trenutna pozicija pomicanja, plus oko 150 px.

Nešto prije stvorili smo #blackout div, ovo je prekrivanje sadržaja stranice sjenom. Sada moramo biti sigurni da će ovaj blok imati istu širinu i visinu kao monitor. To se također izračunava u ovoj funkciji.

funkcija centerBox() ( /* definirajte potrebne podatke */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); / * Izračunajte položaj */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* Dodajte stilove blokovima */ $(".popup-box").css(("width" : boxWidth+ "px" , "lijevo" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+" px") ); vrati false; )

Ova se funkcija mora pokrenuti 3 puta. Kada se korisnik pomiče, kada korisnik mijenja veličinu prozora, također u početku kada se stranica učitava.

$(prozor).resize(centerBox); $(prozor).scroll(centerBox); središnji okvir();

Konačno, moramo postaviti događaje klikanja. Kada korisnik klikne na područje izvan prozora, on bi se trebao zatvoriti. Kada korisnik klikne na "X", prozor bi također trebao nestati. U slučaju klikova unutar skočnog prozora, ništa se ne bi trebalo dogoditi. Komentari su dodani kodu radi lakšeg razumijevanja.

$("").click(function(e) ( /* Spriječi zadane radnje */ e.preventDefault(); e.stopPropagation(); /* Dohvati ID (zadnji broj u nazivu klase veze) */ var name = $(this).attr("class"); var id = name; var scrollPos = $(window).scrollTop(); /* Ispravan prikaz skočnog prozora, pokrivanje sjenom, sprječavanje pomicanja */ $ ("#popup-box -"+id).show(); $("#blackout").show(); $("html,body").css("overflow", "hidden"); /* Ispravljanje greške u Firefoxu */ $("html").scrollTop(scrollPos); )); $("").click(function(e) ( /* Spriječi rad veze ako je to naš skočni prozor */ e.stopPropagation(); )); $("html").click(function() ( var scrollPos = $(window).scrollTop(); /* Sakrij prozor kada se klikne izvan njegovog područja */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); )); $(".close").click(function() ( var scrollPos = $(window).scrollTop(); /* Sakrij sjenu i prozor kada korisnik klikne na X */ $("").hide() ; $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); )); ));

Ovime je izrada skočnog prozora pomoću jQueryja završena! Ne trebamo preuzimati dodatke i pisati složene funkcije, samo nekoliko redaka koda. Možete preuzeti izvore i vidjeti kako to radi lokalno na vašem računalu.

PopUP okvir je skočni oglas dizajniran za privlačenje web prometa ili prikupljanje adresa e-pošte. Takvi elementi često su oblici internetskog oglašavanja na WorldWideWebu. Obično su to novi prozori koji se otvaraju u web pregledniku za prikaz reklama. Obično ih generira JavaScript korištenjem cross-site scripting (XSS), ponekad sa sekundarnim opterećenjem i korištenjem AdobeFlash.

Varijacija PopUP-a su skočni oglasi koji se otvaraju u novom prozoru preglednika skriveni u onom aktivnom.

Povijest nastanka

Prvi pop-up oglasi pojavili su se na Tripod.com u kasnim 1990-ima. Ethan Zuckerman tvrdi da je napisao kod za pokretanje oglasa u pojedinačnim prozorima kao odgovor na pritužbe u vezi banner oglasa. Nakon toga, programer se više puta ispričao zbog neugodnosti koje je njegov izum počeo uzrokovati.

Opera je bila prvi veći preglednik koji je uključivao alate za blokiranje skočnih prozora. Preglednik Mozilla kasnije je poboljšao ovaj razvoj blokiranjem PopUP prozora koji se stvara kada se stranica učita. U ranim 2000-ima, svi glavni web preglednici osim Internet Explorera omogućili su korisniku da gotovo potpuno eliminira neželjene skočne oglase. Godine 2004. Microsoft je izdao Windows XP SP2, koji je ovom pregledniku dodao blokadu.

Većina modernih preglednika dolazi s alatima za zaštitu od skočnih prozora. Alati trećih strana obično uključuju druge značajke, kao što je filtriranje oglasa.

Skočni prozori

Neke vrste preuzetog sadržaja - slike, besplatna glazba i drugi - mogu uzrokovati skočne prozore. Osim toga, ponekad izgledaju kao normalne web-stranice, a naziv stranice pojavit će se u traci za pretraživanje. Mnogi resursi koriste skočne prozore za prikaz informacija bez prekidanja trenutno otvorene stranice. Na primjer, ako ste ispunili obrazac na web-stranici i trebale su vam dodatne upute, PopUP prozor će vam dati dodatne informacije, a da pritom ne izgubite podatke koji su već uneseni u obrazac. Većina programa za blokiranje skočnih oglasa dopušta ovu vrstu preuzimanja.

No imajte na umu da neki programi za web instalaciju, poput onih koje koristi McAfee, koriste skočni prozor za instalaciju softvera. U mnogim internetskim preglednicima pritiskom na tipku Ctrl dok klikate vezu zaobići ćete filtar.

U tom slučaju klik (čak i slučajno) na jedan skočni prozor može dovesti do otvaranja drugih.

Zaobići blokator skočnih prozora

Kombinacija banner oglasa i skočnog prozora je "oglas koji lebdi" koji koristi DHTML za prikaz na zaslonu na vrhu sadržaja stranice. Pomoću JavaScripta oglas se može postaviti na vrh web stranice u prozirnom sloju. Ovaj oglas se može pojaviti u gotovo svim slučajevima kada oglašivač želi da se pojavi. Ovakva skripta PopUP prozora ne može se uočiti unaprijed. Na primjer, oglas može sadržavati AdobeFlash animaciju povezanu s web-stranicom oglašivača. Također može izgledati kao običan prozor. Budući da su oglasi dio web stranice, ne mogu se blokirati pomoću programa za blokiranje, ali se može spriječiti njihovo otvaranje pomoću aplikacija trećih strana (kao što su AdBlock i AdblockPlus) ili korištenjem prilagođenih listova stilova.

PopUnder

Ovaj je oglas sličan uobičajenom skočnom prozoru, ali se čini skriven iza glavnog prozora preglednika, a ne ispred njega. Kad su skočni oglasi postali široko rasprostranjeni i počeli zauzimati cijeli zaslon računala, mnogi su ih korisnici naučili odmah zatvoriti bez gledanja. Zato su se pojavili PopUNDER, koji ne ometaju korisnika u pregledu sadržaja stranice. Obično ostaju neotkriveni sve dok se glavni prozor preglednika ne zatvori ili minimizira. Istraživanja su pokazala da korisnici bolje reagiraju na ove oglase nego na skočne oglase jer ne djeluju nametljivo.

Popularna tehnologija oglašavanja

Oglas koristi dvije vrlo jednostavne JavaScript funkcije uvedene 1997. s preglednikom Netscape 2.0B3. Ova metodologija se široko koristi na Internetu. Moderni web-izdavači i oglašivači koriste ga za stvaranje prozora ispred sadržaja stranice, učitavanje oglasa i njegovo slanje sa zaslona.

Većina modernih preglednika dopušta otvaranje PopUP skočnog prozora samo kada dođe do neke interakcije korisnika (kao što je klik mišem). Svi neinteraktivni pozivi (povratni poziv tajmera, događaji učitavanja itd.) rezultirat će blokiranjem novog prozora. Kako bi se zaobišlo ovo ograničenje, većina skočnih oglasa pokreće se pomoću slušatelja događaja miša koji je izravno priložen dokumentu ili tijelu dokumenta. To vam omogućuje snimanje svih klikova mišem na stranici koje nisu koristili drugi rukovatelji događajima. Na primjer, kada korisnik odabere tekst, klik mišem detektira slušatelj priložen dokumentu. Ovo će otvoriti skočni prozor pomoću gornjeg koda.

"Zeznuti" generator PopUP prozora

Korisnici raznih web stranica i web aplikacija stalno se susreću s neželjenim skočnim prozorima prilikom korištenja preglednika. Obično se takav PopUP prozor uklanja pomoću funkcije "zatvori" ili "otkaži". Budući da je ovo tipičan odgovor korisnika, programeri su počeli koristiti neke trikove. Stoga se prilikom izrade reklamnih poruka kreiraju zaslonske tipke ili kontrole koje su slične opciji “zatvori” ili “otkaži”. Međutim, kada korisnik odabere jednu od ovih opcija, gumb izvodi neočekivanu ili neovlaštenu radnju (na primjer, otvaranje novog skočnog prozora ili preuzimanje neželjene datoteke u sustav korisnika).

Budući da tehnologije web dizajna dopuštaju autorima korištenje bilo kojeg oblika "lažnjaka", neki korisnici uopće odbijaju kliknuti ili komunicirati s bilo kojim elementom unutar skočnog prozora.

URL preusmjeravanje

Ponekad se URL-ovi preusmjeravaju na reklamne stranice pomoću značajke pozadinskog preusmjeravanja URL-a. Ponekad se otvaraju u novoj kartici, a zatim se sadržaj stare pozadinske kartice zamjenjuje reklamnim stranicama pomoću preusmjeravanja. AdblockPlus, uBlock ili NoScript ne mogu blokirati ova preusmjeravanja skočnih prozora. Ovu značajku sve više koriste distributeri oglašavanja u potrazi za načinom da PopUP prozor učine najaktivnijim.

Kako se riješiti skočnih prozora

Kako ukloniti oglase u pregledniku? Prije svega provjerite ima li ažuriranja. Ažuriranje preglednika uvelike će pomoći u borbi protiv skočnih prozora. Većina preglednika postavljena je na automatsko ažuriranje, ali to se može isključiti. Ovaj proces obično traje samo nekoliko minuta.

Firefox: kliknite gumb naziva aplikacije u gornjem lijevom kutu. Zadržite pokazivač miša iznad Pomoć i odaberite O Firefoxu. Ovo će otvoriti prozor s informacijama o verziji preglednika. Ako se vaš preglednik automatski ne preuzima i instalira.
Chrome: kliknite gumb izbornika u gornjem desnom kutu. Odaberite "O Chromeu" na dnu, otvorit će se nova kartica i preglednik će provjeriti postoje li ažuriranja. Ako ih ima, automatski će se instalirati.
Internet Explorer: Metoda ažuriranja ovisi o verziji preglednika koji koristite. Za starije opcije morat ćete ući u Windows Update. Za Internet Explorer 10 i 11 možete uključiti automatsko ažuriranje klikom na ikonu zupčanika i odabirom O Internet Exploreru.

Ako ažuriranja ne pomognu

Ponekad su PopUP-ovi web-mjesta i sličan softver preduboko ugrađeni da bi se mogli ukloniti ažuriranjem. U takvim slučajevima ponovna instalacija ili promjena web-preglednika može pomoći u rješavanju problema.

Najprije preuzmite najnoviju verziju preglednika koji želite koristiti. Veze za preuzimanje možete pronaći na glavnoj stranici svake aplikacije.

26.09.14. 23K

Kod mnogih korisnika interneta pojam “skočni prozor” budi negativne asocijacije. Pred vašim očima odmah "lebdi" slika kako, pokušavajući vidjeti potrebne informacije na web mjestu, ovaj gmaz pokriva potreban dio teksta. Što je još gore, ako ga pokušate zatvoriti, korisnik se često potpuno prebacuje na drugi resurs.

Zar su ovi tvoji pop-up prozori takvo kopile?

Unatoč ovoj lošoj reputaciji, skočni prozori mogu biti korisni, ali i dosadni. U početku su to samo vrsta dijaloških okvira koji se koriste u programiranju kao elementi korisničkog sučelja.

Služe za informiranje i kao sredstvo dijaloga između korisnika i programa (web aplikacije). No, nažalost, takav negativan stav mnogih korisnika prema skočnim prozorima uvelike je opravdan, jer se na internetu koriste uglavnom u reklamne svrhe.

Otvaranje u prvom planu (skočni prozor) - iskočiti na vrhu glavnog;
Otvaranje u pozadini (pop-under) - otvorite iza glavnog prozora.

Ovi posljednji su najpodmukliji. One postaju aktivne i vidljive korisniku tek nakon zatvaranja glavne. Stoga neće biti moguće utvrditi njihov izvor i blokirati ih na vrijeme.

Sredstva borbe

Zbog raširene upotrebe neželjenih skočnih oglasa na Internetu, mnogi programeri softvera počeli su ugrađivati protumjere u svoje proizvode.

Glavni program za korištenje interneta je preglednik. Stoga je glavna metoda blokiranja reklamnih prozora implementirana u pregledniku:

Internet Explorer je bio posljednji od svih softverskih proizvoda koji je implementirao mogućnost blokiranja skočnih oglasa. To je učinjeno tek 2004. godine;
Opera - ovaj proizvod bio je prvi preglednik na svijetu s ugrađenim blokatorom skočnih prozora. Skočni prozori u Operi mogu se blokirati od 2000.;
Mozilla Firefox - Ovaj preglednik poboljšao je pristup borbi protiv oglašavanja koji je implementiran u Operi. Nasuprot tome, u Mozilli nisu blokirani svi skočni oglasi, već samo oni koji se učitavaju kada se otvori glavni prozor.

U modernim preglednicima sustav za blokiranje skočnih prozora konfigurira se putem korisničkog sučelja. Chrome, kao i većina drugih preglednika, ima mogućnost omogućiti ili onemogućiti blokiranje, kao i stvoriti popis iznimaka (pouzdanih stranica):

Stvaranje skočnih prozora pomoću javascripta

U web programiranju koristi se nekoliko tehnologija za stvaranje skočnih prozora. Glavno sredstvo za njihovo stvaranje i dalje je javascript. Njegova funkcionalnost uključuje nekoliko vrsta dijaloških okvira čija je radnja slična radnji skočnih prozora:

Metoda alert() prikazuje običnu tekstualnu poruku na ekranu. Da biste sakrili dijalog nakon čitanja, morate kliknuti gumb "U redu" na dnu prozora;
Metoda confirm() slična je prethodnoj metodi. Ali dijaloški okvir koji prikazuje, osim "U redu", također je opremljen gumbom "Odustani". Uz njihovu pomoć, korisnik može prihvatiti ili odbiti uvjet naveden u prozoru;
Metoda prompt() koristi se za pozivanje druge vrste javascript skočnog prozora. Za razliku od gore navedenih, ovaj prozor je opremljen i poljem za tekst. Korisnik u njega može unijeti tekstualne podatke kojima se može pripisati vrijednost željene varijable.

Djelovanje sve tri metode i vrste dijaloga koje oni pozivaju prikazani su na slici:

Ali to su samo tipovi dijaloga. Da biste stvorili pravi skočni prozor u javascriptu, koristite metodu open() objekta prozora.

Ovdje je potpuna sintaksa metode:

pobjeda = prozor. open (url, name, parametri) , gdje:

url je adresa stranice koja će se otvoriti u novom prozoru;
Naziv – naziv kreiranog prozora. Može se koristiti za daljnju obradu u obrascima (ciljani parametar);
Params – niz parametara za novi prozor. Njihov potpuni popis možete saznati sami iz javascript dokumentacije.

Slika u nastavku prikazuje metodu na djelu i daje pojednostavljenu skočnu skriptu:

Kreira se funkcija f1 čije tijelo implementira poziv prozoru. otvoren() . Zatim se ova metoda poziva s jednim parametrom koji označava adresu stranice koja će se otvoriti u stvorenom prozoru. Nakon toga se poziva metoda setTimeout(). Njoj se kao parametri prosljeđuju funkcija f1 i vremenski interval nakon kojeg će se otvoriti novi prozor.

Stvaranje skočnog prozora pomoću CSS-a

Također možete stvoriti skočni prozor u CSS-u. Ova je značajka realizirana tek izdavanjem treće verzije ove tehnologije. Ne biste trebali pretjerivati s ovom opcijom jer će raditi samo u najnovijim verzijama preglednika:

Kao što možete vidjeti na slici, takav modalni prozor je kreiran pomoću CSS-a i html-a. Za razliku od onih izrađenih pomoću js-a, ovaj skočni prozor nije moguće pomicati po stranici. Osim toga, njegov kod je previše glomazan da bi ga opisali u okviru ovog članka. Ali takav prozor preglednik neće blokirati.

Pregled ostalih tehnologija

Uopće nije potrebno sami razvijati skočni prozor. Danas je za to stvoreno mnogo besplatnih jquery dodataka. Spajanjem jednog od njih dobit ćete gotov prozor.

Također postoji mnogo dodataka za popularni CMS. Mogu uključivati čitav niz prozora. Dizajn i funkcionalnost svakog od njih je “skrojen” za obavljanje određenog zadatka (registracija, slanje poruke, itd.).

Postoji i nekoliko popularnih scenarija. Primjer jednog od njih bit će dan u nastavku. Skočni prozori u Kontaktu i drugim popularnim društvenim mrežama rade na ovom principu:

Kako napraviti popup prozor u Jquery $(document).ready(function())( PopUpHide(); )); funkcija PopUpShow())( $("#window-popup").show(); ) funkcija PopUpHide())( $("#window-popup").hide(); ) .box ( širina: 400px; visina : 300px; boja pozadine: #ccc; margina:0px auto; padding:10px; veličina fonta:40px; boja: #fff; ) .skočni prozor (širina:100%; min. visina:100%; boja pozadine: rgba( 0,0,0,0.5); overflow:hidden; position:fixed; top:0px; ) .popup .popup-content ( margin:40px auto 0px auto; width:200px; height: 80px; padding:10px; background- color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; ) Primjer skočnog prozora
Prikaži skočni prozorČestitamo, napravili ste skočni prozor!!! Sakrij skočni prozor

Kod je dan u verziji "za lijene". Ako ga zalijepite u bilo koji editor i pokrenete, dobit ćete gotov primjer skočnog prozora temeljenog na jqueryju.

Danas ćemo govoriti o tome kako stvoriti vlastiti skočni prozor za svoju web stranicu. Sada je ova metoda vrlo popularna, ali većina rješenja za njezinu implementaciju se plaća. Primjer ne baš lijepog prozora (ali ovo je samo primjer) unutar posta...

U ovom postu naučit ćemo kako napraviti ovakav popup prozor. Jednostavno, brzo, učinkovito i što je najvažnije besplatno!

Svaki skočni prozor se u biti sastoji od dva dijela. Prvi je zamračivanje opće pozadine. Drugi je sam prozor. Prozor je pak obično podijeljen na naslov, tekst i obrazac za pretplatu. Pripremimo bazu za naš prozor, uzimajući u obzir navedenu strukturu.

Imamo:
fs_popup_bg — Zatamnjenje stranice;
fs_popup — Sam prozor;
fs_popup_head — Naslov prozora;
fs_content — Sadržaj prozora, podijeljen u dva dijela;

Sada napišimo potrebne stilove...

#fs_popup_bg ( z-index:9999; lijevo:0; gore:0; položaj:fiksan; širina:100%; visina:100%; pozadina:rgba(0,0,0,0.9); ) #fs_popup ( margina: 10% 20%; z-indeks:10000; pozicija:fiksna; širina:600px; radijus granice: 25px; granica: 5px čvrsta #FF0000; visina:300px; pozadina: #000080; ispuna: 1px 10px 10px 10px; ) . fs_content_left, .fs_content_right ( float: lijevo; padding: 5px: font-size: 20px; font-family: Arial; )

Pogledajmo na brzinu stilove našeg skočnog prozora.
#fs_popup_bg- označava da će naša pozadina biti crna i gotovo neprozirna (0.9), nalazit će se u gornjem lijevom kutu i zauzimati cijelo područje zaslona. U tom će slučaju dubina elementa, odnosno njegova nadmorska visina iznad ostalih elemenata biti vrlo velika (definitivno veća od ostalih).
#fs_skočni prozor- označava da će prozor biti jednu razinu iznad pozadine (inače ga ne bismo vidjeli). Njegove dimenzije bit će 600 px x 300 px sa zaobljenim kutovima i crvenim rubom.
.fs_sadržaj_lijevo, .fs_sadržaj_desno- govori nam da su blokovi pritisnuti ulijevo (potrebno za njihov položaj na istoj razini), imaju uvlake i font Arial.

Ispunimo naš prozor sadržajem:

Zatvoriti U ovom postu naučit ćemo kako napraviti ovakav popup prozor. Jednostavno, brzo, učinkovito i što je najvažnije besplatno! Požurite i unesite svoj E-Mail i dobijte hrpu korisnih informacija!*

Tvoj email:
* - Ovo polje nije aktivno. Klikom na gumb "Pretplati se" pristajete na korištenje vaše adrese u svrhu masovnog slanja reklamnih materijala. I također ostavljate svoj auto, stan i 10% svojih prihoda autoru stranice.

I dodajmo naše stilove za ljepši prikaz:

#fs_popup_bg ( z-index:9999999999998; lijevo:0; gore:0; položaj:fiksan; širina:100%; visina:100%; pozadina:rgba(0,0,0,0.9); ) #fs_popup ( margina: 10% 20%; z-indeks:999999999999; pozicija:fiksna; širina:600px; radijus granice: 25px; granica: 5px čvrsta #FF0000; visina:300px; pozadina: #000080; ispuna: 1px 10px 10px 10px; ) . fs_popup_head (text-align: desno;) .fs_popup_head a (boja: #FFF; pokazivač: pokazivač; text-decoration: underline; ) .fs_popup_head a:hover (kursor: pointer; text-decoration: none; ) .fs_content_left, . fs_content_right ( float: lijevo; padding: 5px: font-size: 20px; font-family: Arial; ) .fs_content_left ( width: 370px; color: #FFF; font-size: 17px; line-height: 17px; font-family : Arial;) .fs_content_right (širina: 200px; boja: #FFFF00;) .fs_content_right small (veličina fonta: 7px; visina retka: 7px;) .fs_content_right unos (margina: 5px; širina: 190px; boja: #000 ; ) .fs_ok ( obrub: 1px solid #FF0000; radijus obruba: 10px; visina: 35px; pozadina: #FFFF00; kursor: pokazivač; boja: #000; )

To je uglavnom sve. Kao što možete vidjeti iz primjera, JavaScript za skočni prozor je u biti potreban u dva slučaja:
1) Događaj zatvaranja našeg prozora;
2) Događaj za klik na gumb “Pretplati se”;
Također ne bi škodilo provjeriti je li ovaj prozor prikazan na ovom računalu. Rad s kolačićima sasvim je prikladan za ove svrhe.

PopUp - skočni prozor. Stvaranje i korištenje skočnih prozora

Najbolji članci na temu