Vyskakovacie okno čo. HTML: Vytvorte si vlastné vyskakovacie okno

Je to známy fakt: väčšina návštevníkov neuskutoční nákup pri svojej prvej návšteve produktovej stránky internetového obchodu alebo dokonca nezanechá potenciálneho zákazníka – aká veľká je však táto väčšina?

Podľa výskumu spoločnosti SeeWhy je to prípad 99 % návštevníkov, ktorí zdroj navštívia prvýkrát. Samozrejme, hovoríme predovšetkým o eCommerce stránkach, no stále vyvstáva otázka: ak si 99 % návštevníkov pri prvej návšteve nič nekúpi, ako ich potom povzbudiť, aby sa vrátili?

Dobrou správou sú nasledujúce štatistiky: 75 % návštevníkov je stále ochotných vrátiť sa neskôr, aby dokončili nákup.

Bez ohľadu na to, ako si myslíte o kontextových oknách, táto marketingová technika je stále efektívna na upútanie pozornosti a zhromažďovanie kontaktných údajov (generovanie potenciálnych zákazníkov).

Jednoducho povedané, používanie vyskakovacích okien je najrýchlejší spôsob, ako vrátiť návštevníka na cieľovú stránku.

prečo?

Zahŕňa to techniku ​​presviedčania známu ako „prerušenie vzoru“, pri ktorej je vaša pozornosť, uspávaná konkrétnym rytmom alebo sekvenciou rozprávania, náhle agresívne pritiahnutá k niečomu neočakávanému. Tento efekt často zažívate pri sledovaní filmov, komédií a dokonca aj pri dôležitých rokovaniach.

Pokiaľ ide o obsah a e-mailový marketing, „prerušenie vzoru“ je najúčinnejšie, keď je čitateľ už odhodlaný vyriešiť problém a pokračovať v interakcii (prihlásenie sa na odber bulletinu, nákup atď.).

Príklad zo služby Made.com. Marketéri ponúkli svojim návštevníkom bezplatnú poukážku v hodnote 10 eur za maličkosť – e-mailovú adresu. Stalo sa tak preto, lebo:

Podľa ExactTarget, e-mail je pre zákazníkov najpreferovanejším marketingovým kanálom, keďže 77 % spotrebiteľov uprednostňuje e-mail pred inými kanálmi interakcie so značkou.

Možno, že vyskakovacie okná nie sú až také zlé?

Je pravdepodobné, že nenávidíte kontextové okná a máte na to právo. Samozrejme, kto by chcel niečo také vidieť hneď po prechode na vstupnú stránku:

Alebo toto:

Možno ani neviete o oblasti činnosti spoločnosti, ale už ste po krk zakrytý vo vyskakovacích oknách. Vyššie uvedené príklady sú neúspešné: v prvom rade sa návštevník chce dozvedieť viac o značke a potom si stiahnuť „Bezplatného sprievodcu generovaním návštevnosti“, „bezplatnú elektronickú knihu“ atď. Samozrejme, väčšina používateľov takéto veci nenávidí a reagovať odmietnutím ďalšej interakcie so značkou.

Možno by ste sa mali trochu schladiť a pozrieť sa na výsledky testov. Čo hovoria čísla? Tu sú údaje z rozdeleného testu kontextového okna a tlačidla „Nie, ďakujem“ v kontextovej ponuke.

Pôsobivé? Potom sa pozrime na výsledky spoločností, ktoré tento prístup efektívne využívajú.

1. Skúsenosti s automaticky otváranými oknami

Vďaka službe WP Beginner počas bežného dňa získa približne 70 – 80 nových predplatiteľov rôzne metódy olova. Ale čím väčšia je základňa predplatného, ​​tým úspešnejšie podnikanie, preto sa marketéri služby rozhodli experimentovať s kontextovými oknami.

čo sa urobilo?

Bolo vyvinuté kontextové okno, ktoré sa zobrazí, keď používateľ zamýšľa opustiť stránku. Efekt bol dosiahnutý vďaka technológiám sledovania kurzora a iným metódam. Takto vyzeralo okno:

Aké sú výsledky?

Používanie kontextového okna na kľúčových stránkach (nie na celom webe) zvýšilo registrácie o 660 %. To znamená, že zo 70 – 80 potenciálnych zákazníkov sa služba posunula na 445 – 470 potenciálnych zákazníkov za deň – skok na kvalitatívne novú úroveň.

Ďalší prípad je od Backlinka. Po pridaní CTA na cieľovú stránku s ponukou prihlásiť sa na odber noviniek, konverzia klesla na 1,73 % – niečo bolo treba urgentne urobiť. Obchodníci spoločnosti vyvinuli vyskakovacie okno, ktoré sa objavilo pred používateľmi, ktorí sa rozhodli opustiť vstupnú stránku. Takto to vyzeralo:

Pamätáte si, že pred použitím vyskakovacieho okna bola miera konverzie približne 1,7 %? 2 dni po spustení vyskakovacieho okna sa štatistiky zmenili. Len za dva dni sa miera konverzie zvýšila z 1,73 % na 4,83 % – viac ako 2-krát!

Samozrejme, vo svete, kde jeden kompetentný test môže zvýšiť konverziu o 100, 300 %, dokonca 1300 %, vyzerajú výsledky tohto experimentu skromne. Nie je to však celkom pravda.

Po prvé, s veľkou základňou predplatiteľov môžu obchodníci vytvárať obsah relevantný pre ich publikum a nastaviť systém krížového predaja. Ak teda vezmeme do úvahy upsells a ďalšie faktory, jeden kontakt prináša službu v priemere 15 USD.

Ak vyskakovacie okná prinesú 15 ďalších predplatiteľov denne, potom sa denný príjem zvýši v priemere o 225 USD a ročný príjem o 82 125 USD. Nie je to zlý príjem za 2 minúty kontroly nastavení, však?

Očividne sa neprajníci vyskakovacích okien mýlili. Existujú však aj ďalšie faktory: miera okamžitých odchodov a vplyv kontextových okien na používateľskú skúsenosť. čo s týmto?

2. Ako kontextové okná ovplyvňujú používateľskú skúsenosť a mieru odchodov?

Jednou z prvých myšlienok pri zmienke o pop-up je nárast počtu zlyhaní, pretože vinou vyskakovacieho okna bude vstupnú stránku opúšťať stále viac ľudí, čo je absolútne logické. Pamätajte však na príklady vyššie: WP Beginner marketéri v tomto ukazovateli nezaznamenali žiadne kolísanie, ani Backlinko – počet porúch sa v oboch prípadoch nezmenil.

Dan Zarrella dospel k rovnakému záveru po vykonaní série testov na svojej osobnej vstupnej stránke a zistil, že prítomnosť kontextového okna nemá žiadny vplyv na mieru odchodov. Jediná vec, ktorá sa zmenila, je, že odstránením vyskakovacích okien stratil Dan 50 % prichádzajúcich potenciálnych zákazníkov.

3. A čo používateľská skúsenosť?

Návštevníkom je to očividne jedno. Obchodníci WP Beginner nedostali od svojich klientov ani jednu sťažnosť na vyskakovacie okná.

Ak sa nad tým zamyslíte, dáva to zmysel. Áno, je nepríjemné vidieť niečo také po prechode na zdroj pomocou odkazu z Facebooku:

Ale to nie je dôvod na to, aby ste v hneve opustili stránku. Čo zvyčajne robíte v takýchto prípadoch? Správne - zatvorte kontextové okno a pokračujte v hľadaní požadovaného obsahu.

Okrem toho správne používanie kontextových okien môže zlepšiť používateľskú skúsenosť, po vzore služby Vero. Ak sa zastavíte domovskej stránke a do 30 sekúnd nevykonáte žiadnu akciu, v rohu sa vám zobrazí okno s textom: „Čo vám bráni predplatiť si Vero práve teraz?“

4. Ako zničiť použiteľnosť pomocou vyskakovacích okien?

Na svoju vstupnú stránku však nemôžete vložiť len akúkoľvek kontextovú reklamu a dúfať, že dosiahnete vysoký konverzný pomer. Ak na stránke nevyčnieva vyskakovacie okno, je prinajmenšom zbytočné.

Chystáte sa opustiť vstupnú stránku a potom... Bam! Stalo sa niečo zvláštne, kde sa v strede stránky objavilo tlačidlo CTA? V skutočnosti bolo toto kontextové okno prekryté na nestmavenej stránke a splývalo s pozadím. Keď neoddelíte vyskakovacie okná od zvyšku stránky, skutočne to ničí používateľský zážitok.

Ako sa ukázalo, mnohí obchodníci sa mýlia s kontextovými oknami – ukazuje sa, že stále fungujú. Teraz sa naučíte, ako používať kontextové okná na vašej cieľovej stránke, aby ste dosiahli maximálny efekt.

5. Vytvorte efektívne vyskakovacie okná

Skôr než začneme vytvárať kontextové okná, pozrime sa na ich hlavné typy. Existujú dva hlavné typy vyskakovacích okien:

Prekrytia

Vyzerajú ako v príklade vyššie. Takéto okná zakrývajú celú obrazovku a stmavujú pozadie. Vyskakovacie okno zostáva jediným prvkom na stránke, ktorý je pre používateľa jasne viditeľný - in v poslednej dobe V tomto formáte je trend používať vyskakovacie okná.

Známy obchodník Dan Zarella tiež používa stmavenie pozadia, ale samotné okno je oveľa menšie ako zvyčajne:

Okná, ktoré sa objavia v dôsledku posúvania stránky

Tento typ vyskakovacích okien sa objaví, keď používateľ prejde na určitú fázu stránky – najčastejšie tento formát používa sa v blogoch a je mimoriadne efektívny. Po rolovaní do polovice stránky uvidíte niečo takéto:

V závislosti od softvéru alebo doplnku, ktorý používate, môžete experimentovať s hĺbkou posúvania – ako ďaleko musí používateľ zájsť, aby videl kontextové okno. Okrem toho si môžete nastaviť vzhľad vyskakovacích okien na základe času stráveného používateľom na stránke.

Pre nadpisy, texty polí a tlačidlá vo vyskakovacích oknách platia rovnaké požiadavky ako pre obsah CTA. Vyskakovacie okná sú totiž prvkami výzvy na akciu, ktorej účelom je zvýšiť počet zhliadnutí/odberateľov/potenciálnych zákazníkov.

6. Najlepší čas zobraziť kontextové okná

Ak hovoríme o testovaní prekrytí, služba SumoMe zhromaždila nasledujúce údaje: dnes je optimálny čas 5 sekúnd po tom, čo návštevník prejde na cieľovú stránku.

WhoTestWon poskytuje rôzne štatistiky. Počas testov sa vzhľad prekrytí kontroloval 15, 30 a 45 sekúnd po pristátí používateľa a prvá možnosť ukázala optimálny výsledok: vzhľad okna po 15 sekundách je o 11 % účinnejší ako možnosť s 30 sekundami. a o 50 % účinnejšia ako možnosť 45 sekúnd po pristátí.

Pamätajte však - neexistuje ideálny čas na zobrazenie okna, pretože testy sú potrebné v každom konkrétnom prípade. To platí aj pre otázku frekvencie vyskakovacích okien. Jednoducho povedané, štatistiky zo zdrojov iných ľudí vás môžu motivovať k vlastnému testovaniu, ale nemali by byť predmetom napodobňovania – testovania.

Dnes si povieme, ako vytvoriť vlastné vyskakovacie okno pre váš web. Teraz túto metódu je veľmi populárny, no väčšina riešení na jeho implementáciu je platená. Príklad nie veľmi pekného okna (ale toto je len príklad) vo vnútri príspevku...

V tomto príspevku sa naučíme, ako vytvoriť takéto kontextové okno. Jednoduché, rýchle, efektívne a hlavne zadarmo!

Každé vyskakovacie okno sa v podstate skladá z dvoch častí. Prvým je stmavenie všeobecného pozadia. Druhým je samotné okno. Okno je zasa zvyčajne rozdelené na nadpis, text a formulár predplatného. Pripravme základ pre naše okno, berúc do úvahy špecifikovanú štruktúru.

Máme:
fs_popup_bg — Stmievanie stránky;
fs_popup — Samotné okno;
fs_popup_head — Názov okna;
fs_content — Obsah okna rozdelený na dve časti;

Teraz si napíšeme potrebné štýly...

#fs_popup_bg ( z-index:9999; vľavo:0; hore:0; poloha:pevná; šírka:100%; výška:100%; pozadie:rgba(0,0,0,0,9); ) #fs_popup ( okraj: 10% 20% pozícia:600px; 5px plné #FF0000; padding: 1px 10px 10px; fs_content_left, .fs_content_right ( float: left; padding: 5px: font-size: 20px;

Poďme sa rýchlo pozrieť na štýly nášho vyskakovacieho okna.
#fs_popup_bg- označuje, že naše pozadie bude čierne a takmer nepriehľadné (0,9), bude umiestnené v ľavom hornom rohu a bude zaberať celú plochu obrazovky. V tomto prípade bude hĺbka prvku, respektíve jeho prevýšenie nad ostatnými prvkami, veľmi veľká (určite väčšia ako ostatné).
#fs_popup- označuje, že okno bude o úroveň vyššie ako pozadie (inak by sme ho nevideli). Jeho rozmery budú 600 x 300 pixelov so zaoblenými rohmi a červeným okrajom.
.fs_content_left, .fs_content_right- nám hovorí, že bloky sú stlačené doľava (potrebné pre ich umiestnenie na rovnakej úrovni), majú zarážky a písmo Arial.

Vyplňme naše okno obsahom:

Zavrieť V tomto príspevku sa naučíme, ako vytvoriť takéto kontextové okno. Jednoduché, rýchle, efektívne a hlavne zadarmo! Poponáhľajte sa, zadajte svoj e-mail a získajte veľa!*

užitočné informácie
Váš email:

* - Toto pole nie je aktívne. Kliknutím na tlačidlo „Prihlásiť sa na odber“ súhlasíte s použitím vašej adresy na účely hromadného zasielania reklamných materiálov. A tiež odkážete autorovi stránky svoje auto, byt a 10% z príjmu.

#fs_popup_bg ( z-index:9999999999998; left:0; top:0; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); ) #fs_popup ( margin: 10% 20%; z-index:99999999999; šírka: 5px plné #FF0000; pozadie: 1px 10px ( text-align: right; ) .fs_popup_head a: pointer; #FF text-decoration: underline ) .fs_popup_head a:hover ( kurzor: ukazovateľ; text-decoration: none; ) .fs_content_left, . fs_content_right ( float: left; padding: 5px: font-size: 20px; font-family: Arial; ) .fs_content_left ( šírka: 370px; farba: #FFF; veľkosť písma: 17px; výška riadku: 17px; font-family : Arial; ) .fs_content_right ( šírka: 200px; farba: #FFFF00; ) .fs_content_right -veľkosť: 7px; výška riadku: 7px; .fs_content_right input ( margin: 5px; width: 190px; color: #000 ; ) .fs_ok ( border: 1px solid #FF0000; border-radius: 10px;

výška: 35px; pozadie: #FFFF00; kurzor: ukazovateľ;
farba: #000;
)
To je v podstate všetko. Ako je možné vidieť z Príklad JavaScript pre kontextové okno je to potrebné v dvoch prípadoch:

1) Udalosť zatvorenia nášho okna;

2) Udalosť pre kliknutie na tlačidlo „Prihlásiť sa na odber“;

Nebolo by tiež na škodu skontrolovať, či sa toto okno zobrazilo

tento počítač

. Práca s cookies je na tieto účely celkom vhodná.

Pozrime sa na vytváranie modálnych vyskakovacích okien, ktorým sa ľudovo hovorí aj vyskakovacie okná.

Hovorili sme o vytváraní vyskakovacích (modálnych) okien vo WordPress.

výška: 100 %;