Создание и базовая настройка кода виджета Коллтрекинга MANGO OFFICE

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

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

Важная информация

Код рекомендуется размещать до закрывающего тега body, если это возможно. Если панель администратора сайта не позволяет размещение кода, разместить код можно в любом месте сайта.
Код необходимо разместить на ОДИН РАЗ НА КАЖДОЙ СТРАНИЦЕ вашего сайта. Отсутствие кода на какой-либо странице приведет к некорректной статистике коллтрекинга. Исключение — технические, скрытые страницы сайта, на которые не может попасть посетитель сайта.
Код одного виджета должен быть размещен только на ОДНОМ САЙТЕ. Соблюдайте правило: один виджет — один сайт! Крайне не рекомендуется размещать код на нескольких разных сайтах, так как это отрицательно скажется на статистике коллтрекинга, а разобраться, с какого сайта был совершен звонок, будет затруднительно.
Код может быть размещен как напрямую в коде страниц сайта, так и в отдельном js файле, подключенном к сайту (в этом случае использовать код без тегов), а также в инструмент Google Tag Manager.
Показ номера на сайте происходит с некоторой задержкой после отображения номера. Задержка появляется из-за технических особенностей — ДКТ необходимо дождаться загрузки скриптов аналитики (GA, Я.Метрика, Ройстат), если они есть (это необходимо для последующей интеграцией с этими системами), а также полной загрузки страницы сайта для показа номеров во всех местах страницы. Сократить время задержки можно с помощью оптимизации сайта (для оптимизации сайта обратитесь к разработчику сайта или к открытым источникам информации).
Стандартные способы показа номера номера не предполагают отображения номера в кнопке «Позвонить» (или иконка с трубкой, например, в мобильной версии сайта). Для реализации такого показа нужно устанавливать соответствующие настройки.

Порядок действий. Обобщенно

Чтобы добавить код виджета в код сайта, следует:

создать новую или классическую версии кода виджета при помощи Мастера кода виджета. Инструкции по созданию кода виджета:
- новая версия;
- классическая версия;

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

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

Создание новой версии кода виджета

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

В Личном кабинете MANGO OFFICE, в разделе «Коллтрекинг» —> «Настройки» —> «Код виджета» следует:

выберите виджет, который будете настраивать в поле «Сайт»;
нажмите кнопку «Настройка New»;

Примечание. Нажав кнопку «Настройка New» вы переходите к настройке новой версии кода виджета. По умолчанию генератор кода виджета предлагает именно этот вариант.

выберите вариант поиска и замены на вашем сайте вашего номера на номер коллтрекинга:
- Поиск по классу. Этот вариант самый надежный, он подойдет вам, если элементу, содержащему номер, присвоен определенный класс, либо вы можете его присвоить (изменив код вашего сайта). Виджет ищет элемент с указанными вами классом и заменяет в этом элементе ваш номер телефона на номер коллтрекинга.
  
  Чтобы использовать этот вариант поиска номера в поле «Класс элемента…» введите имя класса элемента с номером телефона и нажмите кнопку «Сохранить»:
- Поиск по номеру. Это самый простой способ, в общем случае не требующий доработок в коде вашего сайта. Виджет ищет ваш номер телефона по всему тексту сайта и заменяет ваш номер на номер коллтрекинга. Чтобы использовать этот вариант поиска номера, в поле «Номер, который нужно заменить…» укажите ваш номер телефона, начиная с +7 и включая код города. Затем нажмите кнопку «Сохранить»:
Примечание. В новой версии кода виджета настройки поиска и замены номера вы можете изменить в любое время, без изменения кода на вашем сайте. Подробнее…
нажмите кнопку «Скопировать»:

Будет скопирован код виджета (новая версия), который вам нужно разместить на каждой странице вашего сайта ОДИН раз перед закрывающем тегом

</body>

Создание классической версии кода виджета

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

Обращаем внимание, что классическая версия код виджета настраивается в момент создания самого кода (в отличии от новой версии). Для изменения настроек и установки дополнительных настроек нужно менять код виджета на вашем сайте или использовать методы JavaScript API

В Личном кабинете MANGO OFFICE, в разделе «Коллтрекинг» —> «Настройки» —> «Код виджета» следует:

выберите виджет, который будете настраивать в поле «Сайт»;
нажмите на ссылку «Классическая настройка»;
выберите вариант поиска и замены на вашем сайте вашего номера на номер коллтрекинга:
- Поиск по классу. Этот вариант самый надежный, он подойдет вам, если элементу, содержащему номер, присвоен определенный класс, либо вы можете его присвоить (изменив код вашего сайта). Виджет ищет элемент с указанными вами классом и заменяет в этом элементе ваш номер телефона на номер коллтрекинга. Чтобы использовать этот вариант поиска номера, активируйте переключатель «Замена номера по имени класса» и в блоке «Класс номера…» введите имя класса элемента с номером:
- Поиск по номеру. Это самый простой способ, в общем случае не требующий доработок в коде вашего сайта. Виджет ищет ваш номер телефона по всему тексту сайта и заменяет ваш номер на номер коллтрекинга. Чтобы использовать этот вариант поиска номера, активируйте переключатель ««Замена номера по тексту», затем в поле «Номер, который нужно заменить…» укажите ваш номер телефона, начиная с +7 и включая код города.
нажмите кнопку «Скопировать код».

Будет скопирован код виджета (новая версия), который вам нужно разместить на каждой странице вашего сайта ОДИН раз перед закрывающем тегом

</body>

Как добавить код виджета в код вашего сайта

Чтобы в коллтрекинга появились данные, нужно добавить код виджета в код вашего сайта. Способов вставки кода виджета несколько:

если на вашем сайте установлен Google Tag Manager (далее — GTM) или платформа сайта поддерживает размещение кода через GTM, то вставьте код виджета при помощи GTM, руководствуясь этой инструкцией;
размещение через панель администратора платформы сайта. Для этого найдите пункт размещения сторонних кодов (виджетов, плагинов) на сайт и разместите наш код. Подробнее о размещении кода виджета в конструкторе и в системе управления контентом…
возможно размещение кода виджета непосредственно в код вашего сайта через редактор файлов (например, через файловый менеджер платформы или FTP-доступ к файлам сайта). Код может быть размещен как напрямую в коде страниц сайта (через редактор файлов например, через файловый менеджер платформы или FTP-доступ к файлам сайта), так и в отдельном js файле, подключенном к сайту (в этом случае использовать код без тегов).