Ponnahdusikkuna mitä. HTML: Luo oma ponnahdusikkuna

Se on tunnettu tosiasia: useimmat vierailijat eivät tee ostoksia ensimmäisellä vierailullaan verkkokaupan tuotesivulla tai edes jätä etua – mutta kuinka suuri tämä enemmistö on?

SeeWhy-yrityksen tutkimuksen mukaan tämä koskee 99 % kävijöistä, jotka vierailevat resurssissa ensimmäistä kertaa. Tietenkin puhumme ensisijaisesti verkkokauppasivustoista, mutta silti herää kysymys: jos 99% kävijöistä ei osta mitään ensimmäisellä vierailullaan, miten kannustaa heitä palaamaan?

Hyvä uutinen on seuraavat tilastot: 75% kävijöistä on edelleen valmiita palaamaan myöhemmin tekemään ostoksen.

Huolimatta siitä, miltä sinusta tuntuu ponnahdusikkunoista, tämä markkinointitekniikka on silti tehokas kiinnittämään huomiota ja keräämään yhteystietoja (liidien luominen).

Yksinkertaisesti sanottuna ponnahdusikkunoiden käyttö on nopein tapa palauttaa vierailija aloitussivulle.

Miksi?

Tähän liittyy suostuttelutekniikka, joka tunnetaan nimellä "kuvion keskeytys", jossa huomiosi tietyn rytmin tai kerronnan sekvenssin tuudittamana kiinnittyy yhtäkkiä aggressiivisesti johonkin odottamattomaan. Koet tämän vaikutuksen usein katsoessasi elokuvia, komediaohjelmia ja jopa tärkeiden neuvottelujen aikana.

Sisältö- ja sähköpostimarkkinoinnin osalta ”kuvion keskeytys” on tehokkainta, kun lukija on jo sitoutunut ratkaisemaan ongelman ja jatkamaan vuorovaikutusta (uutiskirjeen tilaaminen, ostoksen tekeminen jne.).

Esimerkki Made.com-palvelusta. Markkinoijat tarjosivat vierailijoilleen ilmaisen 10 euron arvoisen lahjakortin pelkästä pikkurahasta - sähköpostiosoitteesta. Tämä tehtiin, koska:

ExactTargetin mukaan sähköposti on asiakkaiden suosituin markkinointikanava, sillä 77 % kuluttajista suosii sähköpostia kuin muita vuorovaikutuskanavia brändin kanssa.

Ehkä ponnahdusikkunat eivät olekaan niin huonoja?

Todennäköisesti vihaat ponnahdusikkunoita, ja sinulla on siihen oikeus. Tietenkin, kuka haluaisi nähdä jotain tällaista heti aloitussivulle siirtymisen jälkeen:

Tai tämä:

Et ehkä edes tiedä yrityksen toimialasta, mutta olet jo kaulaa myöten ponnahdusikkunoiden peitossa. Yllä olevat esimerkit eivät ole onnistuneita: ensinnäkin vierailija haluaa oppia lisää brändistä ja sitten ladata "Ilmainen opas liikenteen synnyttämiseen", "Ilmainen e-kirja" jne. Tietenkin useimmat käyttäjät vihaavat tällaisia ​​asioita ja vastata kieltäytymällä vuorovaikutuksesta brändin kanssa.

Ehkä sinun pitäisi jäähtyä hieman ja katsoa testituloksia. Mitä luvut sanovat? Tässä on tiedot ponnahdusikkunan jaetun testin ja ponnahdusikkunatarjouksen "Ei kiitos" -painikkeesta.

Vaikuttava? Katsotaan sitten tuloksia yrityksiltä, ​​jotka käyttävät tätä lähestymistapaa tehokkaasti.

1. Kokemus ponnahdusikkunoista

Tyypillisenä päivänä WP Beginner -palvelu saa noin 70-80 uutta tilaajaa kiitos erilaisia ​​menetelmiä lyijyn sukupolvi. Mutta mitä suurempi tilauskanta, sitä menestyvämpää liiketoimintaa, joten palvelun markkinoijat päättivät kokeilla ponnahdusikkunoita.

Mitä tehtiin?

Kehitettiin ponnahdusikkuna, joka tulee näkyviin, kun käyttäjä aikoo poistua sivustolta. Vaikutus saavutettiin kursorinseurantatekniikoiden ja muiden menetelmien ansiosta. Tältä ikkuna näytti:

Mitkä ovat tulokset?

Ponnahdusikkunan käyttäminen avainsivuilla (ei koko sivustolla) lisäsi rekisteröintejä 660 %. Eli 70-80 liidistä palvelu siirtyi 445-470 liittiin päivässä - harppaus laadullisesti uudelle tasolle.

Seuraava tapaus on Backlinkosta. Kun aloitussivulle oli lisätty toimintakehotus uutiskirjeen tilaajatarjouksella, tulos putosi 1,73 prosenttiin - jotain oli kiireellisesti tehtävä. Yrityksen markkinoijat kehittivät ponnahdusikkunan, joka ilmestyi aloitussivulta poistuvien käyttäjien eteen. Tältä se näytti:

Muistatko, että tulosprosentti oli noin 1,7 % ennen ponnahdusikkunan käyttöä? 2 päivää ponnahdusikkunan käynnistämisen jälkeen tilastot muuttuivat. Vain kahdessa päivässä tulosprosentti nousi 1,73 %:sta 4,83 %:iin – yli 2 kertaa!

Tietenkin maailmassa, jossa yksi pätevä testi voi lisätä konversiota 100, 300 %, jopa 1300 %, tämän kokeen tulokset näyttävät vaatimattomilta. Tämä ei kuitenkaan ole täysin totta.

Ensinnäkin suuren tilaajakunnan ansiosta markkinoijat voivat luoda yleisölleen merkityksellistä sisältöä ja perustaa ristiinmyyntijärjestelmän. Näin ollen, kun otetaan huomioon lisämyynti ja muut tekijät, yksi yhteyshenkilö tuo palveluun keskimäärin 15 dollaria.

Jos ponnahdusikkunat tuovat 15 tilaajaa lisää päivässä, päivätulot kasvavat keskimäärin 225 dollarilla ja vuositulot 82 125 dollarilla. Ei paha tulo 2 minuutin asetusten tarkistamisesta, eikö niin?

Ilmeisesti ponnahdusikkunoiden vihaajat olivat väärässä. Mutta on muitakin tekijöitä: poistumisprosentti ja ponnahdusikkunoiden vaikutus käyttökokemukseen. Entä tämä?

2. Miten ponnahdusikkunat vaikuttavat käyttökokemukseen ja poistumisprosenttiin?

Yksi ensimmäisistä ajatuksista mainittaessa ponnahdusikkuna on epäonnistumisten määrän kasvu, koska yhä useammat ihmiset poistuvat aloitussivulta ponnahdusikkunan vian vuoksi, mikä on täysin loogista. Muista kuitenkin yllä olevat esimerkit: WP Beginner -markkinoijat eivät nähneet tässä indikaattorissa vaihtelua, kuten ei myöskään Backlinko - vikojen määrä ei muuttunut kummassakaan tapauksessa.

Dan Zarrella tuli samaan johtopäätökseen suoritettuaan useita testejä henkilökohtaisella aloitussivullaan ja totesi, että ponnahdusikkunan läsnäolo ei vaikuttanut poistumisprosenttiin. Ainoa asia, joka on muuttunut, on se, että poistamalla ponnahdusikkunat Dan menetti 50 % saapuvista liideistä.

3. Entä käyttökokemus?

Ilmeisesti kävijät eivät välitä. WP Beginner -markkinoijat eivät ole saaneet asiakkailtaan yhtään valitusta ponnahdusikkunoista.

Jos ajattelet sitä, tämä on järkevää. Kyllä, on epämiellyttävää nähdä jotain tällaista, kun olet mennyt resurssille Facebookin linkin avulla:

Mutta tämä ei ole syy poistua sivustolta vihaisena. Mitä yleensä teet tällaisissa tapauksissa? Aivan oikein – sulje ponnahdusikkuna ja jatka haluamasi sisällön etsimistä.

Lisäksi ponnahdusikkunoiden oikea käyttö voi parantaa käyttökokemusta Vero-palvelun esimerkin mukaisesti. Jos pysähdyt kotisivu ja et tee mitään 30 sekunnin kuluessa, näet kulmassa ikkunan, jossa on teksti: "Mikä estää sinua tilaamasta Veroa juuri nyt?"

4. Kuinka tuhota käytettävyys ponnahdusikkunoilla?

Et kuitenkaan voi upottaa mitä tahansa ponnahdusikkunaa aloitussivullesi ja toivoa korkeaa tulosprosenttia. Jos ponnahdusikkuna ei erotu sivulla, se on ainakin hyödytön.

Olet poistumassa aloitussivulta ja sitten... Bam! Tapahtui jotain outoa, missä CTA-painike ilmestyi sivun keskelle? Todellisuudessa tämä ponnahdusikkuna asetettiin tummentamattoman sivun päälle sulautuen taustalle. Kun ponnahdusikkunoita ei eroteta muusta sivusta, se todella pilaa käyttökokemuksen.

Kuten kävi ilmi, monet markkinoijat ovat väärässä ponnahdusikkunoiden suhteen – käy ilmi, että ne toimivat edelleen. Nyt opit käyttämään ponnahdusikkunoita aloitussivullasi parhaan mahdollisen vaikutuksen saavuttamiseksi.

5. Luo tehokkaita ponnahdusikkunoita

Ennen kuin aloitamme ponnahdusikkunoiden luomisen, tarkastellaan niiden päätyyppejä. Ponnahdusikkunoita on kahta päätyyppiä:

Peittokuvat

Ne näyttävät yllä olevassa esimerkissä. Tällaiset ikkunat peittävät koko näytön ja tummentavat taustaa. Ponnahdusikkuna pysyy ainoana elementtinä sivulla, joka on selkeästi käyttäjän nähtävissä - sisään viime aikoina Tässä muodossa on trendi käyttää ponnahdusikkunoita.

Tunnettu markkinoija Dan Zarella käyttää myös taustaa tummentavia peittokuvia, mutta itse ikkuna on paljon tavallista pienempi:

Ikkunat, jotka avautuvat sivun vierityksen seurauksena

Tämän tyyppiset ponnahdusikkunat tulevat näkyviin, kun käyttäjä vierittää sivulla tiettyyn vaiheeseen - useimmiten tämä muoto käytetään blogeissa ja se on erittäin tehokas. Kun olet vierittänyt sivun puolivälissä, näet jotain tällaista:

Käyttämästäsi ohjelmistosta tai laajennuksesta riippuen voit kokeilla vierityssyvyyttä – kuinka pitkälle käyttäjän on mentävä nähdäkseen ponnahdusikkunan. Lisäksi voit määrittää ponnahdusikkunoiden ulkoasun käyttäjän sivustolla viettämän ajan perusteella.

Samat vaatimukset koskevat otsikoita, kenttien tekstejä ja painikkeita ponnahdusikkunoissa kuin toimintakehotuksen sisältöä. Onhan ponnahdusikkunat elementtejä toimintakehotuksesta, jonka tarkoituksena on lisätä näyttökertoja/tilaajia/liidejä.

6. Paras aika näyttääksesi ponnahdusikkunat

Jos puhutaan peittokuvien testaamisesta, niin SumoMe-palvelu on kerännyt seuraavat tiedot: tänään optimaalinen aika on 5 sekuntia vierailijan aloitussivulle siirtymisestä.

WhichTestWon antaa erilaisia ​​tilastoja. Testien aikana peittokuvien ulkonäkö tarkastettiin 15, 30 ja 45 sekunnin kuluttua käyttäjän laskeutumisesta, ja ensimmäinen vaihtoehto osoitti optimaalisen tuloksen: ikkunan ilmestyminen 15 sekunnin kuluttua on 11 % tehokkaampi kuin vaihtoehto 30 sekunnin kuluttua. , ja 50 % tehokkaampi kuin vaihtoehto 45 sekuntia laskeutumisen jälkeen.

Mutta muista - ikkunan ilmestymiselle ei ole ihanteellista aikaa, koska testit ovat tarpeen jokaisessa erityistapauksessa. Tämä koskee myös kysymystä ponnahdusikkunoiden tiheydestä. Yksinkertaisesti sanottuna muiden ihmisten resursseista saadut tilastot voivat motivoida sinua tekemään oman testauksen, mutta ne eivät saa olla jäljitelmän kohteena - testi.

Tänään puhumme oman ponnahdusikkunan luomisesta verkkosivustollesi. Nyt tätä menetelmää on erittäin suosittu, mutta useimmat ratkaisut sen toteuttamiseen ovat maksullisia. Esimerkki ei kovin kauniista ikkunasta (mutta tämä on vain esimerkki) postauksen sisällä...

Tässä viestissä opimme tekemään tällaisen ponnahdusikkunan. Yksinkertainen, nopea, tehokas ja mikä tärkeintä ilmainen!

Mikä tahansa ponnahdusikkuna koostuu pohjimmiltaan kahdesta osasta. Ensimmäinen on yleisen taustan tummentaminen. Toinen on itse ikkuna. Ikkuna puolestaan ​​on yleensä jaettu otsikkoon, tekstiin ja tilauslomakkeeseen. Valmistetaan pohja ikkunallemme ottaen huomioon määritetty rakenne.

Meillä on:
fs_popup_bg — Sivuston himmentäminen;
fs_popup — Itse ikkuna;
fs_popup_head — ikkunan otsikko;
fs_content — Ikkunan sisältö, jaettu kahteen osaan;

Nyt kirjoitetaan tarvittavat tyylit...

#fs_popup_bg ( z-index:9999; vasen:0; ylhäällä:0; sijainti:kiinteä; leveys:100%; korkeus:100%; tausta:rgba(0,0,0,0.9); ) #fs_popup ( marginaali: 10 % 20 %; sijainti: 600px; täyttö: 1px 10px, .fs_content_right

Katsotaanpa nopeasti ponnahdusikkunamme tyylejä.
#fs_popup_bg- osoittaa, että taustamme on musta ja melkein läpinäkymätön (0,9), se sijaitsee vasemmassa yläkulmassa ja vie koko näytön alueen. Tässä tapauksessa elementin syvyys tai pikemminkin sen korkeus muiden elementtien yläpuolelle on erittäin suuri (epäilemättä suurempi kuin muut).
#fs_popup- osoittaa, että ikkuna on yhden tason taustan yläpuolella (muuten emme näe sitä). Sen mitat ovat 600 x 300 pikseliä pyöristetyillä kulmilla ja punaisella reunuksella.
.fs_content_left, .fs_content_right- kertoo, että lohkot on painettu vasemmalle (tarvitaan niiden sijainnille samalla tasolla), niissä on sisennykset ja Arial-fontti.

Täytämme ikkunamme sisällöllä:

Lähellä Tässä viestissä opimme tekemään tällaisen ponnahdusikkunan. Yksinkertainen, nopea, tehokas ja mikä tärkeintä ilmainen! Ole nopea, kirjoita sähköpostiosoitteesi ja saat joukon!*

hyödyllistä tietoa
Sähköpostiosoitteesi:

* - Tämä kenttä ei ole aktiivinen. Napsauttamalla "Tilaa"-painiketta hyväksyt osoitteesi käytön mainosmateriaalin joukkopostituksiin. Ja testamentaa myös autosi, asuntosi ja 10 % tuloistasi sivuston tekijälle.

#fs_popup_bg ( z-index:9999999999998; vasen:0; ylhäällä:0; sijainti:kiinteä; leveys:100%; korkeus:100%; tausta:rgba(0,0,0,0.9); ) #fs_popup ( marginaali: 10 % 20 %; tekstin koristelu: alleviivaus; .fs_popup_head a:hover ( kursori: osoitin; tekstin koristelu: ei mitään ) .fs_content_left ( leveys: 370 pikseliä; väri: #FFF; fontin koko: 17 kuvapistettä; rivin korkeus: 17 kuvapistettä; fonttiperhe : Arial; ) .fs_content_right ( leveys: 200px; väri: #FFFF00;_conten_right; ) .fs -koko: 7px; rivin korkeus: 7px; .fs_content_right input ( margin: 5px; leveys: 190px; color: #000; ) .fs_ok (reunus: 1px solid #FF0000; border-radius: 10px;

korkeus: 35px; tausta: #FFFF00; kohdistin: osoitin;
väri: #000;
)
Siinä on periaatteessa kaikki. Kuten voidaan nähdä JavaScript esimerkki ponnahdusikkunassa sitä tarvitaan olennaisesti kahdessa tapauksessa:

1) Ikkunan sulkemistapahtuma;

2) Tilaa-painikkeen painamisen tapahtuma;

Ei myöskään haittaisi tarkistaa, näkyykö tämä ikkuna

tämä tietokone

. Evästeiden kanssa työskentely on varsin sopivaa näihin tarkoituksiin.

Katsotaanpa modaalisten ponnahdusikkunoiden luomista, joita kutsutaan myös kansanomaisesti ponnahdusikkunoksiksi.

Puhuimme ponnahdusikkunoiden (modaalisten) luomisesta WordPressissä.

korkeus: 100%;