0
Заголовок темы

Решаем проблему: reCaptcha 2.0 не работает в лайтбоксе Adobe Muse

Думаю, многие из вас уже столкнулись с проблемой спама, который в последнее время часто поступает с форм Adobe Muse. 
Для борьбы со спамом есть различные методы. Один из которых, это использование в форме Google ReCaptha 2.0 — такая штука в виде "галочки" с подписью "Я не робот", которую должен отметить прользователь перед отправкой формы. Роботы не могут инициировать это действие, в результате чего форма не может быть отправлена.
Но, одним из минусов этого метода является то, что рекаптча не работает, когда форма размещается во всплывающем окне (стандартном лайтбоксе). А это значит, что, например, во всплывающей форме обратного звонка нельзя установить такую защиту от спам-ботов.

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

И так, для примера я создам две страницы: главную, где будет кнопка с вызовом лайтбокса и дополнительную (назову её test.html).

Разместим на главной стандартный виджет лайтбокса, во всплывающем окне которого нам потребуется поместить бесплатный виджет "Страница во фрейме".

Страницу test.html я рекомендую создать с гибкой шириной, поместив на ней форму с закреплением объекта по-центру:

Закрепляем форму по центру на гибком макете Muse

Далее, требуется настроить рекаптчу для вашего домена. Как это сделать затрагивать сейчас не будем, т.к. данная заметка не об этом. Если не знаете, как настроить, то вот официальная документация:
https://helpx.adobe.com/ru/muse/using/form-widgets.html#Generate_public_and_private_keys.

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

Вывод формы во фрейме в Adobe Muse

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

Какой вариант подойдёт вам больше, решите самостоятельно. А что у меня получилось, можно посмотреть на живом примере: https://muwilab.ru/uroki/recaptchamuse/.


Можно-ли отслеживать конверсию с формы, которая выводится во фрейме?

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

Создание страницы благодарности в Adobe Muse

Затем либо в шаблон (если страницы сделаны на основе одного шаблона), либо на каждую страницу нужно установить код Яндекс Метрики. Далее необходимо настроить цели на посещение страницы "спасибо", а в формах настроить перенаправление на эту страницу после отправки.

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

Отслеживание конверсии если форма расположена во фрейме Adobe Muse

Тем не менее, это в полне можно использовать и цели будут прекрасно срабатывать. Единственный момент, что если потребуется отслеживать не одну общую цель (типа "отправка формы с сайта"), а для каждой формы отдельно, то придётся для каждой формы сделать свою отдельную страницу благодарности.

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

На этом всё. Если появятся вопросы, или идеи, пишите в ответ.
Обновлено 4 Май 2017, 21:37
Спасибо за статью! Мне раньше помогало добавление стандартного чекбокса. Делал его обязательным (с подписью "я не робот")). Теперь спамовые заявки приходят все равно. Обязательный чекбокс остается не отмеченным. А заявки эти даже в метрике не отображаются.

Читал про вариант с невидимым полем в форме. При его заполнении заявка не отправляется. Боты заполняют ведь все поля, а человек его не видит.
Но в muse такое не сделать.
Обновлено 5 Май 2017, 15:52
Есть одностраничный лэндинг. На нём - 5 разных форм. Гугл рекапча стандартно позволяет добавлять на одну страницу одну рекапчу. Как сделать в Мьюз несколько гугл-рекапч на ОДНОЙ странице?


Сообщение
Ник *
Ваш e-mail *
Защитный код *
 
Опрос
Каких виджетов, по вашему мнению, до сих пор не хватает (не достаточно раскрыта тема)?
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!

© Мувилаб 2016-2017