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

После того, как вы установили скрипт Callibri на все страницы сайта, необходимо настроить подмену номера телефона. Это можно сделать с помощью идентификатора или по номеру телефона. 

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

Настройка подмены по номеру телефона

Перейдите в Настройки МультиТрекинга — Основное и найдите раздел Настройка подмены номера.
odin.png
odin.png 102.22 KB
  1. Выберите способ подмены: переместите слайдер в положение По номеру телефона.
  2. В поле Номер телефона укажите номер, который хотите подменить на сайте. 
  3. При необходимости добавьте другие номера телефонов.

Скрипт сам найдет указанный телефон на сайте и подменит его.

Не забудьте сохранить изменения. 

Настройка подмены номера по идентификатору

Идентификатор — это значение class или id в теге с номером телефона. Скрипт Callibri ищет целевой блок по #id или .class и таким образом находит на странице сайта номер, который нужно подменить. 

После установки скрипта Callibri на все страницы сайта, добавьте идентификаторы в разделе Настройки МультиТрекинга — Основное.

Это можно сделать с помощью визуального редактора. Просто кликните на все номера, которые нужно подменять на страницах вашего сайта.
editor.jpg
editor.jpg 146.03 KB


Или идентификаторы можно добавить вручную:
hgyuu.png
hgyuu.png 157.48 KB

Как посмотреть значение в теге class или id?

Перейдите на свой сайт, выделите номер и откройте код: 
  • В Chrome: клик правой кнопкой — просмотр кода страницы. 
  • В Opera и Firefox — Ctrl+Shift+K. 
  • В Internet Explorer — F12 и стрелочка в правом верхнем углу. 
  • В Safari — включите отображение меню «Разработка» в настройках браузера, клик правой кнопкой по номеру — проверить объект. 
Откроется html-код сайта с акцентом на теге с номером. В этом коде найдите либо class, либо id.
Посмотреть значение class или id в html-коде
Посмотреть значение class или id в html-коде

Значение, которое указано в кавычках, вам нужно добавить в поле «Идентификатор».При этом оно должно быть уникальным, т.е. не повторяться у других элементов сайта. Параметр id чаще всего уникальный. А параметр .class нужно проверить на уникальность. Как это сделать? 
  • Кликните в любой элемент кода, чтобы курсор сконцентрировался не на сайте, а на коде.
  • Нажмите ctrl (или command) + F и в появившемся окне напишите «.class». Система покажет, сколько раз класс встречается на странице. 
    При помощи стрелочек можно посмотреть элементы, в которых встречается этот класс. Если он встречается только у номера телефона, то класс уникальный.
  • Если класс встречается у других элементов, то класс неуникальный. В таком случае вы можете добавить в код сайта в тег, который содержит номер телефона, наш класс «callibri_phone» силами ваших разработчиков. Такой класс воспринимается нашей системой автоматически, поэтому его не придется добавлять в поле «Идентификатор» в настройках. Если вы добавляете отдельно .class в код сайта, то не ставьте точку перед значением.
    Проверьте уникальность класса
    Проверьте уникальность класса

Что делать, если у номера нет уникального .class или #id

Есть и другие способы настройки подмены: 
  • По атрибуту href. Если номер кликабельный, но у тега с ним есть атрибут href, который содержит ссылку на номер. Вы можете добавить значение атрибута href в формате [href="tel:+79990010101"], скопировав его из кода вашего сайта. 





href.jpg
href.jpg 268.16 KB
Важно! Если на сайте все номера кликабельные и у всех одинаковое значение атрибута href, то достаточно добавить этот идентификатор 1 раз, чтобы подменить все номера. 

  • По селектору. Кликните на номер телефона, который нужно подменить, выберите из контекстного меню пункт «Показать код». В самом коде еще раз кликните на элемент с номером телефона, из контекстного меню выберите Copy — Copy Selector для Chrome или Копировать — CSS-селектор для Firefox.

Как указывать идентификатор в кабинете Callibri 

  • Значение class указывается в формате .значение. 
  • Значение id указывается в формате #значение. 
mngfh.png
mngfh.png 22.45 KB

Как заполнить поле «Формат»

В поле «Формат» указывается формат отображения номера. Номер отображается по маске: #{XXX}#{XXX}#{XX}#{XX}. Маску можно разделять на несколько блоков, например, для выделения префикса в городских номерах. Вот примеры самых распространенных форматов:

Задача 1: отобразить номер в формате +7 800 200 26 50.

Формат в таком виде: +7 #{XXX} #{XXX} #{XX} #{XX}

В поле «Формат» могут использоваться html-теги и обычный текст, например, слова «телефон» или «тел.». 

Задача 2: скрыть номер полностью.
<span style="display: none">8 (#{XXXX}) #{XX}-#{XX}-#{XX}</span>
Задача 3: после замены на региональный номер убрать префикс (333 33 33).
<span style="display: none">8 (#{XXXX})</span> #{XX}-#{XX}-#{XX}

Как сделать номер кликабельным

Если вам нужен кликабельный номер на сайте (чтобы пользователи могли звонить напрямую с него), необходимо добавить тег в коде сайта следующим образом: 
<a class="phone" href="tel:+78002002650">8 800 200 26 50</a>. 
В поле «Идентификатор» указывается [href="tel:+78002002650"] или .phone, а в поле «Формат» — 8 (#{XXXX}) #{XX}-#{XX}-#{XX}. Ссылка tel должна быть в одном теге с class или id, чтобы в результате замена происходила и в ссылке. Подробнее об этом мы рассказываем в статье.

Изучите эту инструкцию в видеоформате:
Не нашли решение проблемы? Обратитесь в техподдержку, мы поможем