Как настроить коллтрекинг на сайте

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

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

Настройка номера коллтрекинга по номеру телефона

После настройки канала и ВАТС появится поле для настройки подмены, также перейти в блок настройки подмены можно в разделе Настройка — Подмена.

Выберите способ: кликните на тип подмены По номеру телефона.
Название. Здесь можно указать обозначение для подмены номера, например, номер в шапке. Это необязательное для заполнения поле.
В поле Номер телефона укажите номер, который хотите подменить на сайте.
В поле ‎Формат в выпадающем списке можно выбрать, как будет отображаться номер или скрыть его с сайта, если есть такая необходимость.
При необходимости добавьте другие номера телефонов по кнопке «‎Добавить».
Кликните на кнопку «Сохранить».

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

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

Способ, в котором нужно использовать идентификатор с сайта настраивается следующим образом:

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

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

Перейдите на свой сайт, выделите номер и откройте код:

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

Откроется html-код сайта с акцентом на теге с номером. В этом коде найдите либо class, либо id.

Посмотреть значение class или id в html-коде

Значение, которое указано в кавычках, вам нужно добавить в поле «Идентификатор».При этом оно должно быть уникальным, т.е. не повторяться у других элементов сайта. Параметр id чаще всего уникальный. А параметр .class нужно проверить на уникальность. Как это сделать?

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

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

Есть и другие способы настройки:

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

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

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

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

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

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

В поле «Формат» указывается формат отображения номера. Номер отображается по маске: #{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 (#{XXX}) #{XXX}-#{XX}-#{XX}. Ссылка tel должна быть в одном теге с class или id, чтобы в результате замена происходила и в ссылке. Подробнее об этом мы рассказываем в статье.

Связанные страницы

Как настроить МультиТрекинг в первый раз

Если вы впервые подключаете МультиТрекинг, используйте эту инструкцию по настройке сервиса. Здесь вы найдете пошаговый алгоритм действий.

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

Укажите, для каких рекламных источников, на каких устройствах и страницах нужно менять номера.

Как настроить ВАТС

Установите рабочее время для переадресации вызовов, голосовое приветствие и музыку для режима ожидания.

Как настроить коллтрекинг на сайте

Где найти идентификаторы номеров и как правильно их прописать для работы коллтрекинга

Как настроить email-трекинг

Как правильно создать почту для подмены, прописать идентификаторы и другие условия работы email-трекинга.

Перехватчик форм

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

Модель атрибуции

Что такое модель атрибуции, где ее настроить и какой вариант выбрать

Что такое МультиТрекинг?

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

Не подменяется номер на сайте

Алгоритм проверки подмены и вероятные причины сбоя.

Заявки с email-трекинга не отображаются в ЕЖЛ

Что вызывает проблемы с трекингом писем и как это исправить.

У обращений не определился источник

Причины отсутствия трекинговой информации.

Не нашли решение проблемы? Обратитесь в техподдержку, мы поможем

Создать обращение