Как создать эффективные всплывающие окна для вашего интернет-магазина

Всплывающие окна могут быть самой ненавистной вещью на сайтах сегодня, но они очень эффективны, когда дело доходит до вождение трафика и получение подписок на ваш сайт. Здесь кроется еще одна проблема: так как некоторые всплывающие окна пользуются такой популярностью, они чрезмерно используются владельцами веб-сайтов и онлайн-маркетологами, но, к сожалению, они редко настраивается правильно.

В этой статье мы рассмотрим, как создавать всплывающие окна для сайтов WooCommerce, используя Popups - WordPress Popup, один из самых популярных плагинов для WordPress, который позволяет вам нацельтесь на свои модалы для максимальной эффективности.

Что делает эффективное всплывающее окно?

Если вы хотите создавать эффективные всплывающие окна, лучшее, что вы можете сделать, это уволить их в нужный момент, так что вы не только избегаете раздражать свою аудиторию, но и можете заставить ее взглянуть на это и рассмотреть ваше сообщение.

Это возможно только при настройке всплывающих окон. на основе активности ваших посетителей на сайте. Поэтому, когда вы выбираете всплывающий плагин для своего сайта WordPress, обязательно найдите тот, который позволит вам модалы огня на выбранных страницах, а также по истечении заданного периода времени.

Почему ваше всплывающее окно не работает

Когда всплывающее окно не конвертируется, это обычно происходит, потому что посетители раздражаются этим. Это заставляет их не только избегать действий, которые вызывает всплывающее окно, но иногда они полностью покидают сайт..

Всплывающее окно обычно считается раздражающим когда:

1. Зритель не могу найти связь между его содержанием и их мгновенным мышлением
2. Это трудно закрыть
3. Это огонь сразу, прежде чем любой другой контент станет видимым

Вам не нужно быть онлайн-читателем, чтобы угадать, о чем думают ваши пользователи. Просто отслеживайте их действия и понимайте, что они делают или на каких страницах они смотрят..

Установка всплывающих окон - WordPress Popup

Чтобы начать создавать свои всплывающие окна, сначала перейдите к Плагины> Добавить новый Меню администратора в вашей панели управления WordPress. Ищи Всплывающие окна - WordPress Popup, нажмите установить, а затем активируйте плагин.

Плагин регистрирует и создает новый тип записи, и помещает совершенно новый пункт меню в панель администратора под названием Всплывающие окна. Как и в случае с сообщениями и страницами, нажатие на элемент меню верхнего уровня отобразит список ваших текущих, активных или неактивных всплывающих окон..

Теперь вы можете легко добавлять новые всплывающие окна на свой сайт, выбрав Всплывающие окна> Добавить новый подменю в вашем админ-меню или выбрав New> Всплывающие окна в админке.

Варианты конфигурации

Когда вы добавите новое всплывающее окно, вы увидите экран, похожий на тот, который вы видите при написании новых сообщений. Помимо этого, всплывающие окна - WordPress Popup также предоставляет подробные параметры конфигурации. Давайте посмотрим на некоторые из основных функций, которые он имеет.

1. Внесение изменений с помощью редактора WYSIWYG

Это ваш обычный редактор WYSIWYG для любого контента WordPress, так что вы, вероятно, уже знакомы с ним. Всплывающий редактор также добавляет ваш Всплывающее окно параметры (см. ниже), так что вы действительно можете увидеть, как будет выглядеть ваше последнее всплывающее окно.

2. Отображение социальных учетных записей с использованием шорткодов

Если вы хотите, чтобы во всплывающем окне отображалось поле страницы Facebook или любая другая связанная социальная учетная запись, этот плагин позволяет вам сделать это, предоставив вам некоторые шорткоды.

Нажав на Посмотреть варианты ссылка под каждым шорткодом, вы увидите, как вы можете настроить эти модалы. Лучший способ научиться использовать эти шорткоды - поэкспериментировать с ними.

Если бы я хотел добавить страницу со страницей Facebook Хонкиата в свое всплывающее окно по умолчанию, я бы выбрал первый шорткод в списке и, следуя инструкциям, заполнил необходимые данные. Вот шорткод, который я получу в итоге:

 [spu-facebook-page href = "https://www.facebook.com/hongkiatcom/" name = "hongkiat.com" show_faces = "false" hide_cover = "true" action = "like"] 

Если добавить этот шорткод в конец моего всплывающего окна, результат будет выглядеть следующим образом:

3. Настроить внешний вид коробки

в Всплывающее окно В этом поле вы можете легко настроить внешний вид вашего последнего всплывающего окна, установив соответствующие значения.

Например, если бы я хотел, чтобы всплывающее окно с красной рамкой на простом белом фоне, я бы настроил Фоновый цвет а также Цвет границы соответственно.

4. Настройте правила отображения всплывающих окон.

Это, пожалуй, самый важный вариант, где вы можете настроить успешный призыв к действиям. В этом поле вы можете установить условия, когда плагин будет показывать ваше всплывающее окно. Чем более точно настроены и, соответственно, релевантны ваши всплывающие окна, тем лучше они будут!

Самый простой способ понять правила отображения всплывающих окон - это рассматривать три компонента (каждый из которых отмечен отдельной строкой ввода, см. На скриншоте ниже) настроек как части составного предложения..

Вы можете добавить столько правил, сколько вы хотите нажав на а также кнопка в конце вашего правила или добавление совершенно нового набора правил нажав на Добавить группу правил кнопка внизу коробки.

Правила, которые вы добавляете с а также Кнопка позволит вашему всплывающему окну появиться, когда все условия внутри данной группы правил выполнены. Новые группы правил добавляются как оператор OR, поэтому, когда у вас есть несколько групп правил, всплывающее окно будет срабатывать всякий раз, когда любая из групп правил является действительным.

Допустим, я хочу показать всплывающее окно только на моей главной странице для пользователей, не использующих смартфоны, и я также хочу показать его всем, кто просматривает мои продукты. Поэтому для этого всплывающего окна я буду использовать следующие условия:

Первая группа правил:

• если Тип страницы (Опция 1) равно (вариант 2) Титульная страница (вариант 3) И
• если Мобильный телефон (Опция 1) не равно (вариант 2) Правда (вариант 3) ИЛИ

Вторая группа правил:

• если Тип сообщения (Опция 1) равно (вариант 2) товар (вариант 3)

5. Настройте параметры отображения всплывающего окна.

Когда плагин видит, что условия, которые вы установили в Правила отображения всплывающих окон встречаются, это смотрит в Показать варианты настройки, чтобы увидеть как показать свой модал.

Большинство всплывающих окон отображаются в середине экрана пользователя, но если вы хотите изменить это, просто выберите другой параметр внутри Положение ящика выпадающий список. Ваше всплывающее окно может исчезать или скользить, в зависимости от вашего выбора в Анимация вариант.

Если вам требуется какое-либо действие от ваших посетителей во всплывающем окне, вы должны установить Закрыть по конверсии? да.

Чтобы избежать вышеупомянутых всплывающих ошибок, обратите внимание на Триггерное действие вариант. Вы можете установить задержку, так что ваше всплывающее окно будет показывать через определенное количество секунд после загрузки страницы, или вы можете запустить свое всплывающее окно, если ваш посетитель прокрутил процент вашего контента.

Если бы я хотел, чтобы мое предыдущее всплывающее окно появилось через 10 секунд на любой странице продукта, я бы выбрал секунд после загрузки страницы действие и установите его на 10.

А теперь, когда вы знаете свои возможности и возможности плагина Popups - WordPress Popup, давайте рассмотрим некоторые идеи по созданию действительно удивительных, целенаправленных всплывающих окон с призывом к действию.!

Как создать успешный призыв к действиям

1. Промо-продукт

Используя немного контент-маркетинга - создавая релевантный, ценный контент, относящийся к одному или нескольким вашим продуктам, - вы можете специально ориентироваться на нишевые аудитории, фактически не продавая их..

Идея такого всплывающего окна заключается в том, что когда ваши пользователи уже читают пост, в котором вы демонстрируете использование или эффективность продукта, он Можно предположить, что они уже заинтересованы.

Так почему не инициализировать промо-всплывающее окно продукта что срабатывает, когда ваш читатель почти через вашу статью о том же продукте ?! Это действительно легко настроить.

• Задавать Правила отображения всплывающих окон чтобы показать всплывающее окно, когда страница или сообщение совпадает с заголовком вашей страницы или сообщения, таким образом, модальный режим загружается только для выбранного содержимого
• Задавать Триггерное действие в Показать варианты в % высоты страницы со значением около 70-80%, поэтому всплывающее окно будет отображаться только тогда, когда зрители уже ознакомились с преимуществами.

Кроме того, почему бы не сделать возможным для посетителей немедленно добавить ваш рекламируемый продукт в корзину?

Для этого вам нужно узнать конкретный идентификатор продукта из списка продуктов и вставить его в следующий шорткод: [товар]. Если у вас есть шорткод, просто вставьте его в содержимое вашего всплывающего окна, используя редактор постов WYSIWYG..

Если вы даже не добавите к ним ничего особенного, вы все равно получите что-то вроде этого (с небольшой помощью The Marketing Gibberish Generator):

Вы также можете использовать этот метод для продаж, например предоставление аксессуаров для определенных продуктов во всплывающем окне после того, как посетитель потратил некоторое время на странице вашего продукта (так как обычно это означает, что они читают описание вашего продукта).

2. Регистрация на подарок

Во многих случаях вы хотите убедиться, что можете связаться с вашими предыдущими клиентами позже когда у вас есть продажа, какие-то новые продукты или тому подобное. Хороший способ сделать это (без рассылки) - это заставить их зарегистрироваться на ваш сайт.

Вероятно, лучшее место для этого либо корзина или экран оформления заказа что они смотрят прямо, прежде чем они закончат с покупкой.

Задавать Правила отображения всплывающих окон так что ваш модал показывает:

• если страница равна Checkout (или как вы его назвали) И
• если пользователь не залогинен

Как настроить: Пользователь вошел в систему | не равно | Правда

Задавать Триггерное действие в Показать варианты до нескольких секунд, так что ваше всплывающее окно не станет сразу видно.

Как настроить: секунд после загрузки страницы | 3

Самый простой способ создать всплывающее окно регистрации - предоставить пользователям ссылку или кнопку, указывающую на экран регистрации. Вы можете найти ссылку для регистрации внизу страницы входа в WordPress..

Если вы не видите ссылку «Регистрация» на экране входа в систему, вы, вероятно, запретили регистрацию посетителей. Вы должны попасть в свой Настройки> Общие меню администратора и проверьте Любой может зарегистрироваться вариант.

Когда вы закончите с всплывающим окном мотивации регистрации, вы, вероятно, получите что-то вроде этого:

Вы, вероятно, лучше знаете покупательские привычки своих клиентов, но в большинстве случаев купон на небольшую сумму или же бесплатная доставка позволяет намного проще убедить посетителей зарегистрироваться.

Установите их через WooCommerce's Менеджер купонов (найдено под WooCommerce> Купоны меню) и отправьте купоны в электронном письме с подтверждением.

3. Купоны для постоянных клиентов

Всегда приятно видеть интернет-магазин, который действительно ценит своих постоянных клиентов предлагая им небольшую скидку или бесплатные подарки для их возвращения бизнеса.

По умолчанию ваши зарегистрированные клиенты получают Покупатель роль пользователя после первой покупки. Поскольку это другая роль пользователя, чем другие редакционные роли WordPress, очень легко настроить таргетинг на этих людей с помощью всплывающего окна, в котором вы можете предоставить этот специальный код купона или предложить им бесплатный, не включенный в список продукт в качестве подарка..

Это также может быть хорошо специально ориентироваться на ваших постоянных клиентов, например, люди, которые купили вещи более 3 раз, с таким предложением. Для этого вам нужно установить пользовательская роль пользователя только для них, что лучше всего сделать с помощью пользовательских кодов и функций или с помощью плагина.

Пока установите свой Правила отображения всплывающих окон показать всплывающее окно, когда роль пользователя равна вашей пользовательской роли, установленной для ваших самых преданных клиентов. Лучше всего оставить условия только на основе роли пользователя, и заставить всплывающее окно появиться через некоторое время в любом месте на вашем сайте.

Я уверен, что ваши клиенты будут любить вас за это небольшое внимание, особенно если у вас есть возможность показать свое имя во всплывающем окне, чтобы сделать его по-настоящему персонализированным (возможно, с помощью какого-нибудь удивительного плагина для шорткода).

Заключительные слова

Существует множество плагинов для WordPress, бесплатных и платных, в дикой природе, и некоторые из них более эффективны, чем другие, когда речь идет о нацеливании на ваши модалы. Хотя в этом посте мы использовали Popups - WordPress Popup, есть много других сильных конкурентов, даже среди бесплатных плагинов..

Я предлагаю вам сначала настроить несколько всплывающих окон, используя наши примеры выше, и посмотреть, как они работают. Затем, через некоторое время, найдите другие возможности в репозитории плагинов WP и посмотрите, что они могут предложить. После тщательного эксперимента вы сможете идеально настроить всплывающие окна для своего сайта WooCommerce.

Что касается меня, я всегда использую, по крайней мере, эти 2 (и иногда добавляю светлый вариант в связку), чтобы лучше ориентироваться на мою аудиторию..

Хотя крайне важно правильно настроить и настроить таргетинг своих всплывающих окон, также всегда помните измерить успех каждого из ваших всплывающих окон. использование аналитика, тепловые карты сайта, или любые другие инструменты, чтобы увидеть, читают ли ваши посетители их вообще.

Если вы видите, что целевое всплывающее окно работает плохо, попробуйте перефразировать или изменить его. Вы знаете своих клиентов лучше всего, вскоре вы получите суть создания идеальных всплывающих окон для них!