Инструменты увеличения конверсии Moab Tools

В раздел "Инструменты увеличения конверсии" сервиса https://moab.tools/ входит два инструмента: гео-подмена номеров и мобильная кнопка.

Сервис гео-подмены номеров

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

Гео-подмена - это вывод того или иного телефонного номера в зависимости от города, из которого пользователь зашел к вам на сайт. Это инструмент для увеличения конверсии посетителей в клиенты - посетитель более лояльно относится к сайту, если видит на нём номер из своего города.

Настроить связки "город - номер" вы можете в разделе https://moab.tools/Conv после регистрации в личном кабинете.

Сервис "Мобильная кнопка"

Сервис "Мобильная кнопка" добавляет функционал так называемой мобильной кнопки к мобильной версии вашего сайта. С точки зрения технологии, мобильная кнопка представляет собой обёртку над тегом с атрибутом href="tel:". При нажатии на мобильную кнопку в мобильном браузере происходит перенаправление пользователя в номеронабиратель смартфона, автоматически подставляется указанный в теге href номер телефона. В сервисе https://moab.tools/Conv вы можете настроить внешний вид мобильной кнопки и другие настройки. Мобильная кнопка может работать как самостоятельно, так и используя функционал гео-подмены номеров. Мобильной версией считается версия сайта, имеющая ширину экрана 640 px и менее.

Настройка

В этом репозитории находится публичная полная версия скрипта без индивидуальных настроек. В скрипте, который вы получите в личном кабинете после настройки связок и мобильной кнопки, будут ваши индивидуальные настройки - заполненные переменные moab_api_key, moab_site_id, moab_default_city, moab_default_phone.

Здесь всегда будет находиться последняя полная версия скрипта, которую вы можете скачать и, при желании, установить на своём сайте. Однако, мы рекомендуем пользоваться минифицированной CDN-версией скрипта, код для вызова которой вы можете скопировать в разделе https://moab.tools/Conv.

Пример использования скрипта вы можете посмотреть в файле moabconv.htm

Подключение скрипта к сайту производится обычным для javascript способом:

<scriptsrc="moabconv.js"></script>

Подключение CDN-версии скрипта также не сложно:

<scriptsrc="//moab-a.akamaihd.net/moabconv.min.js"></script>

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

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

<divdata-phone></div><divdata-city></div>

Атрибут data-phone подставляется в элемент, отвечающий за вывод телефона, а атрибут data-city – в элемент, отвечающий за вывод города соответственно. Данные о городе и телефоне будут подставлены в innerHTML указанных элементов. Не обязательно использовать оба элемента - вы можете использовать только один - например, вывести только телефон или только город. Также можно использовать, например, несколько элементов с одинаковыми атрибутом data-phone или data-city - в этом случае замена содержимого произойдёт во всех имеющихся элементах с одинаковым атрибутом.

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

• в Яндекс.Метрике цель должна называться MMB_CLICK
• в Google Analitycs - категория Moab, действие MmbClick

Как ускорить работу скрипта?

Технически, скрипт начинает свою работу по выводу телефонного номера и мобильной кнопки только после того, как ваш сайт полностью загружен в браузере. Для тяжеловесных сайтов время полной загрузки может составлять несколько секунд - и эти несколько секунд на месте номера телефона будет отображаться пустое место (или тот контент, который вы пропишете в качестве содержимого тегов <div data-phone></div>). Если вы хотите ускорить время срабатывания скрипта, то можно предпринять несколько шагов по ускорению работы скрипта.

• ускорьте свой сайт - используйте более быстрый хостинг, все стили и скрипты уберите из кода страницы, поместив их в отдельные файлы, используйте кэширование для статических файлов, настройте заголовки Last Modified и т.д. Выполните все рекомендации на https://developers.google.com/speed/pagespeed/insights/
• в случае, если оптимизация сайта помогла не сильно или нет возможности её провести и скрипт всё равно отрабатывает медленнее, чем хотелось бы, можно прибегнуть к небольшому лайфхаку - на время загрузки страницы показывать пользователю не пустое место, а номер телефона головного офиса. Для этого его нужно прописать в теле соответствующих элементов div на странице, например так: <div data-phone>+7-926-123-56-89</div>. После срабатывания скрипта этот номер будет подменен номером из гео-подмены.
• для ускорения срабатывания скрипта можно отключить проверку завершения рендеринга страницы - в этом случае скрипт будет срабатывать сразу в момент своего вызова, не дожидаясь, пока страница полностью загрузится. Этот способ нужно использовать с осторожностью. Для использования этого способа замените в коде вызова скрипта ссылку //moab-a.akamaihd.net/moabconv.min.js на ссылку //moab-a.akamaihd.net/moabconv.ndc.min.js, а сам вызов скрипта поставьте после последнего тега<div data-phone></div>.

В совокупности описанные выше мероприятия помогут ускорить срабатывание скрипта с нескольких секунд до нескольких десятков миллисекунд.