Спливаюче вікно на HTML і CSS. PopUp - вікно спливаюче

Відомий факт: більшість відвідувачів не роблять покупки при першому візиті на товарну сторінку інтернет-магазину і навіть не залишають ліди — але наскільки велика ця більшість?

Згідно з дослідженнями компанії SeeWhy, такими є 99% відвідувачів, які вперше зайшли на ресурс. Звичайно, йдеться в першу чергу про сайти eCommerce, але все ж таки виникає питання: якщо 99% відвідувачів нічого не купують при першому візиті, то як спонукати їх повернутися?

Хорошою новиною стане наступна статистика: 75% відвідувачів все ж таки готові повернутися пізніше для завершення покупки.

Як би ви не ставилися до popup вікон, ця маркетингова технологія досі ефективна для привернення уваги та збору контактних даних (лідогенерації).

Простіше кажучи, використовуючи popup вікна, можна найшвидше повернути відвідувача на лендинг.

Чому?

Це пов'язано з методикою переконання, відомою як «переривання патерна» — коли ваша увага, «присиплена» певним ритмом чи послідовністю оповіді, раптом агресивно приваблює щось несподіване. Ви часто відчуваєте цей ефект під час перегляду фільмів, гумористичних шоу і навіть на важливих переговорах.

Якщо говорити про контент-і email-маркетинг, то «переривання патерну» найефективніше, коли читач вже налаштований на вирішення проблеми та продовження взаємодії (підписку на розсилку, покупку тощо).

Приклад від Made.com. Маркетологи запропонували своїм відвідувачам безкоштовний ваучер номіналом у 10 євро за справжню дрібницю — адресу електронної пошти. Це було зроблено тому, що:

Усі люблять грошові подарунки;

10 євро за постійний контакт по e-mail — невелика ціна.

Згідно з даними ExactTarget, електронна пошта — найбільш привабливий для клієнтів маркетинговий канал, адже 77% споживачів віддають перевагу email іншим каналам взаємодії з брендом.

Можливо, спливаючі вікна не такі вже й погані?

Швидше за все, ви ненавидите pop-ups та маєте на це право. Ще б пак, кому сподобається відразу після переходу на лендинг бачити щось подібне:

Або ось таке:

Ви можете навіть не знати про сферу діяльності компанії, а вже по шию засипані вікнами pop up. Приклади вище — невдалі: перш за все відвідувач хоче дізнатися більше про бренд, а потім уже завантажувати «Безкоштовний посібник з генерації трафіку», «Безкоштовну електронну книгу» тощо. Зрозуміло, більшість користувачів ненавидять такі речі і відповідають відмовою від подальшої взаємодії з брендом.

Можливо, варто трохи охолонути та подивитися на результати тестів. Що кажуть цифри? Ось дані спліт-тесту поп-апа і кнопки «Ні, дякую» на popup оффері.

Текст	Кількість переглядів	Кількість зібраних email	Коефіцієнт конверсії
Ні дякую. Я волію платити повну вартість	165 416	9928	6,0%
Мені це не цікаво	165 625	7961	4,81%
Ні дякую	165 021	7616	4,62%
Ні	166 072	7433	4,48%

Вражає? Тоді подивимося на результати компаній, які ефективно використовують такий підхід.

1. Досвід використання спливаючих вікон

За звичайний день сервіс WP Beginner отримує близько 70-80 нових передплатників завдяки різноманітним методам лідогенерації. Але чим більша підписна база, тим успішніший бізнес, тому маркетологи сервісу зважилися на низку експериментів з pop-ups.

Що було зроблено?

Було розроблено popup вікно, що з'являється, коли користувач мав намір залишити сайт. Ефекту було досягнуто завдяки технологіям відстеження курсору та іншим методам. Ось як виглядало вікно:

Які результати?

Використання спливаючого вікна на найважливіших сторінках (не на всьому сайті) збільшило кількість реєстрацій на 660%. Тобто від 70-80 лідів сервіс перейшов до показника 445-470 лідів за добу — стрибок на якісно новий рівень.

Наступний кейс – від Backlinko. Після додавання на лендинг СТА з пропозицією передплатити розсилку, конверсія впала до 1.73% — необхідно було терміново щось зробити. Маркетологи компанії розробили popup вікно, яке з'являлося перед користувачами, які вирішили залишити цільову сторінку. Ось як воно виглядало:

Пам'ятайте, що конверсія була близько 1.7% до використання popup вікно? Через два дні після запуску pop-up статистика змінилася. Усього за два дні коефіцієнт конверсії зріс із 1.73% до 4.83% — більш ніж у 2 рази!

Звичайно, у світі, де один грамотний тест може підвищити конверсію на 100, 300%, навіть 1300% результати цього експерименту виглядають скромно. Однак, це не зовсім так.

Насамперед, маючи велику передплатну базу, маркетологи можуть створювати релевантний для своєї аудиторії контент та налаштовувати систему крос-селінгу. Таким чином, враховуючи допродаж та інші фактори, один контакт приносить сервісу в середньому 15$.

Якщо popup вікна будуть наводити по 15 додаткових передплатників за добу, то щоденний дохід зросте в середньому на $225, а річний дохід — на $82 125 відповідно. Непоганий заробіток за 2 хвилини перевірки налаштувань, вірно?

Очевидно, що ненависники pop-ups були неправі. Але існують і інші фактори: показник відмов і вплив спливаючих вікон на досвід користувача. Що щодо цього?

2. Як pop-ups впливають на досвід користувача і показник відмов?

Одна з перших думок при згадці pop-up — зростання кількості відмов, адже все більше людей йдуть з лендингу з вини вікна, що спливає, що абсолютно логічно. Проте, згадаємо наведені вище приклади: маркетологи WP Beginner не побачили коливання цього показника, як і Backlinko — кількість відмов не змінилося обох випадках.

Ден Зарелла (Dan Zarrella) дійшов такого ж висновку після проведення серії тестів на власній цільовій сторінці, з'ясувавши, що присутність спливаючого вікна ніяк не впливає на показник відмов. Єдине, що змінилося — прибравши pop-ups, Ден втратив 50% лідів.

3. Що щодо користувальницького досвіду?

Зважаючи на все, відвідувачам все одно. Маркетологи WP Beginner не отримали жодної скарги на popup вікна від своїх клієнтів.

Якщо замислитись, у цьому є сенс. Так, неприємно бачити подібне після переходу на ресурс за посиланням з Facebook:

Але це не привід у гніві залишати сайт. Що ви зазвичай робите у подібних випадках? Правильно – закриваєте popup вікно та продовжуєте пошук потрібного контенту.

Більш того, грамотне використання pop-ups здатне підвищити досвід користувача, за прикладом сервісу Vero. Якщо ви зайдете головну сторінку і протягом 30 секунд не почнете жодних дій, то побачите у кутку вікно з текстом: «Що заважає вам підписатися на Vero прямо зараз?».

4. Як знищити юзабіліті за допомогою спливаючих вікон?

Однак ви не можете вбудувати в лендінг будь-яке pop-up оголошення і сподіватися на високу конверсію. Якщо popup вікно не виділяється на сторінці, воно як мінімум марно.

Ви вже збираєтесь піти з лендінгу, і тут… Бам! Сталося щось незрозуміле, звідки всередині сторінки з'явилася кнопка СТА? Насправді це popup вікно наклалося на незатемнену сторінку, злившись із тлом. Коли ви не відокремлюєте pop-ups від решти сторінки, це сильно псує досвід користувача.

Як з'ясувалося, багато маркетологів помиляються щодо спливаючих вікон — виявляється, вони все ще працюють. Зараз ви дізнаєтесь, як використовувати pop-ups на своєму лендингу для досягнення максимального ефекту.

5. Створення ефективних спливаючих вікон

Перш ніж розпочинати створення pop-ups, розглянемо їх основні види. Існує два великі різновиди popup вікон:

Великі вікна (оверлєї).

Вікна, що спливають через прокручування сторінки.

Оверлєї

Вони виглядають як на прикладі вище. Подібні вікна закривають весь екран, затемняючи тло. Спливаюче вікно залишається єдиним елементом на сторінці, який чітко видно користувачеві — останнім часом намітилася тенденція використання вікон, що випливають, саме такого формату.

Відомий маркетолог Ден Зарелла теж використовує оверлеї із затемненням фону, але саме вікно у нього набагато менше звичайного:

Вікна, що спливають через прокручування сторінки

Цей вид pop-ups з'являється, коли користувач прокручує сторінку до деякого етапу - найчастіше цей формат використовується в блогах, і він дуже ефективний. Прогорнувши половину сторінки, ви побачите щось подібне:

Залежно від ПЗ або плагіна, який ви використовуєте, можна експериментувати з глибиною прокручування — як далеко треба зайти користувачеві, щоб побачити спливаюче вікно. Крім того, ви можете задавати появу pop-ups за часом, проведеним користувачем на сайті.

До заголовків, текстів полів і кнопок на спливаючих вікнах застосовні самі вимоги, як і до контенту на СТА. Адже pop-ups є елементами заклику до дії, мета яких — збільшення переглядів/передплатників/лідів.

6. Найкращий час для показу спливаючих вікон

Якщо говорити про тестування оверлєєв, то сервіс SumoMe зібрав такі дані: на сьогоднішній день оптимальний час складає 5 секунд після переходу відвідувача на лендинг.

Сервіс WhichTestWon пропонує іншу статистику. У ході тестів було перевірено появу оверлєїв на 15, 30 і 45 секунді після посадки користувача, і оптимальний результат показав перший варіант: поява вікна через 15 секунд на 11% ефективніша за варіант з 30 секундами, і на 50% — варіант з 45 секунд після посадки. .

Але пам'ятайте — немає ідеального часу появи вікна, адже тести необхідні в кожному конкретному випадку. Це справедливо і для питання про частоту появи pop-ups. Простіше кажучи, статистика чужих ресурсів може мотивувати на власне тестування, але не має бути об'єктом наслідування – тестуйте.

На даний момент жоден сучасний якісний сайт не може обійтися без використання JavaScript. Ця мова дає дуже багато, модифікує і покращує будь-який проект. Але писати на чистому JS часом буває важко та довго. Для значного полегшення обсягу роботи та часу витраченого на неї була створена бібліотека jQuery . Сьогодні ми розглянемо приклад використання jQ і зробимо спливаюче вікно (досить корисне і красиве доповнення до сайту).

Для початку напишемо HTML код:

Popup Show




відправити лист

Повідомлення:

Тут все просто, тепер нам потрібно написати стилі для нашої кнопки, вікна і фону, на якому буде ефект затемнення. Власне, ось і код:

Textarea (
width: 100%;
resize: none;
}

/* Ставимо кнопку по центру */

Content (
text-align: center;
}

/* Стилі для нашої кнопки */

Button (
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
border: 0;
}

Button:active (
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}

Button:focus (
outline: none !important
}

/* Стилі для вмісту popup вікна */

Input, textarea (
color: #494949;
border: 1px solid #e3e3e3;
border-radius: 3px;
background: #fff;
font-size: 14px;
margin: 0 0 10px;
padding: 5px;
width: 100%;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
}

Input:focus (
border-color: # 808080;
outline: none;
}

Textarea:focus (
border-color: # 808080;
outline: none;
}

/* Кнопка */

Blue_btn (
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}

Overlay_popup (
display: none;
position:fixed;
z-index: 999;
top:0;
right:0;
left:0;
bottom:0;
background: #000;
opacity:0.5;
}

Popup (
display: none;
position: relative;
z-index: 1000;
margin:0 25% 0 25%;
width:50%;
}

/* Ще трохи стилів для popup вікна */

Object(
width: 500px;
height: 500px;
background-color: #eee;
padding: 50px 70px;
}

Чудово! Красива кнопка, пристойний блок (pop-up вікно) і поки що, марний блок із затемненням. Залишилося написати лише невеликий шматок коду – і все чудово!

$(".show_popup").click(function() ( // Викликаємо функцію по натисканню на кнопку
var popup_id = $("#" + $(this).attr("rel")); // Зв'язуємо rel та popup_id
$(popup_id).show(); // Відкриваємо вікно
$(".overlay_popup").show(); // Відкриваємо блок заднього фону
})
$(".overlay_popup").click(function() ( // Обробляємо клік по задньому фоні
$(".overlay_popup, .popup").hide(); // Приховуємо затемнене заднє тло та основне спливаюче вікно
})

Задавайте запитання та висловлюйте свою думку у коментарях!

PopUP - це спливаюче оголошення , призначене для залучення веб - трафіку або збору адрес електронної пошти . Такі елементи часто є формами інтернет-реклами у WorldWideWeb. Як правило, це нові вікна, які відкриваються у веб-браузері для показу реклами. Зазвичай вони генеруються JavaScript за допомогою міжсайтового скриптингу (XSS), іноді з вторинним корисним навантаженням та використанням AdobeFlash.

Різновидом PopUP є спливаючі оголошення, які відкриваються у новому вікні браузера, прихованому в активному.

Історія виникнення

Перші спливаючі оголошення з'явилися на хостингу Tripod.com наприкінці 1990 років. Етан Цукерман стверджує, що він написав код для запуску реклами у окремих вікнах у відповідь на скарги на банерні оголошення. Згодом розробник неодноразово вибачався за незручності, які стало завдавати його винахід.

Opera була першим великим браузером, до якого були включені інструменти для блокування спливаючих вікон. Оглядач Mozilla пізніше покращив ці розробки, почавши блокувати PopUP-вікно, що генерується під час завантаження сторінки. На початку 2000-х років усі основні веб-браузери, окрім Internet Explorer, дозволяли користувачеві майже повністю прибирати небажані спливаючі оголошення. У 2004 році Microsoft випустила Windows XP SP2, яка додала блокування і цей оглядач.

Більшість сучасних браузерів поставляються з інструментами захисту від вікон, що спливають. Інші інструменти зазвичай включають інші функції, наприклад, фільтрацію оголошень.

Вспливаючі вікна

Деякі типи завантажуваного контенту - зображення, безкоштовна музика та інші можуть викликати спливаючі вікна. Крім того, вони іноді виглядають як звичайні веб-сторінки, і назва сайту відображатиметься у рядку пошуку. Багато ресурсів використовують спливаючі вікна для відображення інформації, не перериваючи відкриту сторінку. Наприклад, якби ви заповнили форму на веб-сторінці і потребували додаткового посібника, PopUP-вікно дало б вам додаткову інформацію, не викликаючи втрати будь-яких даних, які вже введені у форму. Більшість блокувальників спливаючих оголошень дозволяють таке завантаження.

Але потрібно пам'ятати, що деякі веб-інсталятори, наприклад McAfee, використовують спливаюче вікно для встановлення програмного забезпечення. На багатьох інтернет-браузерах натискання клавіші Ctrl при натисканні на посилання дозволить обійти фільтр.

При цьому клацання (навіть випадкове) по одному спливаючому вікну може призвести до відкриття інших.

Обхід блокувальника спливаючих вікон

Комбінація рекламного банера та спливаючого вікна – це «оголошення при наведенні», яке використовує DHTML для відображення на екрані поверх контенту сторінки. За допомогою JavaScript оголошення може бути накладено поверх веб-сторінки у прозорому шарі. Це рекламне оголошення може з'явитися майже завжди, коли цього хоче автор реклами. Такий скрипт PopUP вікна неможливо помітити заздалегідь. Наприклад, реклама може містити анімацію AdobeFlash, пов'язану із сайтом рекламодавця. Вона також може виглядати як звичайне вікно. Оскільки реклама є частиною веб-сторінки, її не можна заблокувати за допомогою блокувальника, але її відкриття можна уникнути за допомогою сторонніх програм (на зразок AdBlock і AdblockPlus) або за допомогою стилів, що настроюються.

PopUNDER

Таке оголошення схоже на звичайне вікно PopUP, але воно відображається прихованим за основним вікном браузера, а не з'являється перед ним. Коли спливаючі оголошення стали поширеними і почали займати цілий екран комп'ютера, багато користувачів навчилися негайно закривати їх не дивлячись. Тому з'явилися PopUNDER, які не заважають користувачеві переглядати вміст сайту. Вони, як правило, залишаються непоміченими доти, доки основне вікно браузера не буде закрите або згорнуте. Дослідження показали, що користувачі краще реагують на таку рекламу, ніж на реклами, що спливають, оскільки вони не виглядають настільки настирливо.

Популярна рекламна технологія

У рекламному оголошенні задіяні дві дуже прості функції JavaScript, введені в 1997 за допомогою браузера Netscape 2.0B3. Ця методологія широко використовується в Інтернеті. Сучасні веб-видавці та рекламодавці використовують її для створення вікна перед контентом сторінки, завантаження реклами, а потім надсилання його за екран.

Більшість сучасних браузерів дозволяють відкривати спливаюче вікно PopUP тільки в тому випадку, якщо має місце будь-яка взаємодія з користувачем (наприклад, клацання миші). Будь-які неінтерактивні дзвінки (зворотний дзвінок за таймером, події завантаження тощо) призведуть до блокування нового вікна. Щоб уникнути цього обмеження, більшість спливаючих оголошень запускаються за допомогою прослуховувача подій миші, прикріпленого безпосередньо до документа або тіла документа. Це дозволяє зафіксувати всі випадки натискання миші на сторінці, які не були використані іншими обробниками подій. Наприклад, коли користувач виділяє текст, клацання миші виявляється поміченим прослуховувачем, прикріпленим до документа. В результаті відкривається спливаюче вікно з використанням вищевказаного коду.

«Хитрий» генератор PopUP-вікон

Користувачі різних сайтів та веб-застосунків постійно стикаються з небажаними спливаючими вікнами при користуванні браузером. Зазвичай таке PopUP вікно забирається за допомогою функції «закрити» або «скасувати». Оскільки це типова відповідь користувача, розробники почали застосовувати деякі хитрощі. Так, під час розробки рекламних повідомлень створюються екранні кнопки чи елементи управління, схожі опцію «закрити» чи «скасувати». Однак, коли користувач вибирає один з цих варіантів, кнопка виконує несподівану або несанкціоновану дію (наприклад, відкриття нового спливаючого вікна або завантаження небажаного файлу в систему користувача).

Оскільки технології веб-дизайну дозволяють авторам використовувати будь-який варіант «імітації», деякі користувачі відмовляються кликати або взаємодіяти з будь-яким елементом всередині спливаючого вікна взагалі.

URL-перенаправлення

Іноді URL-адреса пересилається на рекламні сторінки за допомогою функції Background URL redirection. Вони іноді відкриваються в новій вкладці, а потім вміст старої вкладки фону замінюється на рекламні сторінки за допомогою редиректа. AdblockPlus, uBlock або NoScript не можуть блокувати ці спливаючі переадресації. Цю особливість все частіше використовують розповсюджувачі реклами у пошуках способу, як зробити PopUP вікно найбільш активним.

Як позбутися спливаючих вікон

Як прибрати рекламу у браузері? Передусім перевірте наявність оновлень. Збереження вашого браузера в актуальному стані буде мати велике значення у боротьбі з вікнами, що спливають. Більшість оглядачів налаштовані на автоматичне оновлення, але може бути вимкнено. Цей процес зазвичай займає лише кілька хвилин.

• Firefox: натисніть кнопку з назвою програми у верхньому лівому куті. Наведіть вказівник миші на «Довідка» та виберіть «Про Firefox». Це відкриє вікно з інформацією про версію браузера. Якщо ваш браузер не буде автоматично завантажено та встановлено.
• Chrome: натисніть кнопку меню у верхньому правому куті. Виберіть "Про Chrome" у нижній частині, відкриється нова вкладка, і браузер перевірить наявність оновлень. Якщо вони є, їх буде встановлено автоматично.
• Internet Explorer: спосіб оновлення залежить від версії браузера, що використовується. Для більш старих варіантів вам потрібно буде увійти Windows Update. Для Internet Explorer 10 і 11 можна ввімкнути автоматичні оновлення, клацнувши значок Gear і вибравши About Internet Explorer.

Якщо оновлення не допомагають

Іноді PopUP-вікно для сайту та подібне програмне забезпечення впроваджено надто глибоко, щоб його можна було видалити шляхом оновлення. У таких випадках переустановка або зміна веб-браузера може допомогти вирішити проблему.

Спочатку завантажте останню версію браузера, який ви хочете використовувати. Ви можете знайти посилання для завантаження на головній сторінці кожної програми.

Давайте розглянемо створення модальних спливаючих вікон, які в народі ще називають popup-вікна.

Про створення спливаючих (модальних) вікон у WordPress ми говорили .

У цьому прикладі модальні вікна з'являються при натисканні на кнопку (текст) і зникають при натисканні в будь-яку область повз модальне вікно, або при натисканні на ключове слово.

Змінюючи значення у скрипті fadeIn, ви можете збільшити або зменшити швидкість відкриття спливаючого модального вікна, а fadeOut — збільшити або зменшити швидкість закриття.

Для роботи необхідно обов'язково підключити бібліотеку jQuery.

Подивитись і завантажити демо приклад ви можете нижче.

Якщо у вас є запитання, ставте у коментарях.

HTML Натисніть на мене! І на мене теж ... Назва першого модального вікна!
Ти дійсно любиш васабі?

НІ Назва другого модального вікна!
Небо синє?

ТАК Wordpress-club.com CSS .fond ( position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; ) .mymagicoverbox ( display:inline -block;color:#ffffff;padding:10px;margin:10px;cursor:pointer;font-weight:300;font-family:"Roboto"; ) .mymagicoverbox_fenetre ( z-index:9999; left:50%;top:100px;text-align:center;display:none;padding:5px;background-color:#ffffff; :300; font-family:"Roboto"; ) .mymagicoverbox_fenetreinterieur ( text-align:centr; :"Roboto"; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px . font-style:normal font-family:"Roboto"; ) #myfond_gris ( display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; ) JS $(document).ready(function()( $(".mymagicoverbox").click(function() ( $("#myfond_gris").fadeIn(300); var iddiv = $(this).attr( $("#"+iddiv).fadeIn(300); $("#myfond_gris").attr("opendiv",iddiv); return false; )); $("#myfond_gris, .mymagicoverbox_fermer ").click(function() ( var iddiv = $("#myfond_gris").attr("opendiv"); $("#myfond_gris").fadeOut(300); $("#"+iddiv).fadeOut (300); )); ));

Давайте розглянемо створення модальних спливаючих вікон, які в народі ще називають popup-вікна. Про створення спливаючих (модальних) вікон у WordPress ми говорили в окремому уроці. У цьому прикладі модальні вікна з'являються при натисканні на кнопку (текст) і зникають при натисканні в будь-яку область повз модальне вікно, або при натисканні на ключове слово. Змінюючи значення у скрипті fadeIn, ви можете збільшити або зменшити швидкість відкриття спливаючого модального вікна, а fadeOut - збільшити або зменшити швидкість закриття. Для роботи потрібно обов'язково підключити бібліотеку jQuery. Подивитись і завантажити демо приклад ви можете нижче. Якщо у вас є запитання, ставте у коментарях. HTML