Как настроить коллтрекинг на сайте
После того, как вы установили скрипт Callibri на все страницы сайта, приобрели услугу МультиТрекинга и настроили канал и ВАТС необходимо настроить номер коллтрекинг. Это можно сделать с помощью идентификатора или по номеру телефона.
Если у вас на сайте есть номера скрытые под надписью "Показать номер" или подобными, мы можем подменить эти скрытые номера со своей стороны. Для проведения этой настройки обратитесь в поддержку в разделе Помощь в боковом меню вашего проекта.
Настройка номера коллтрекинга по номеру телефона
После настройки канала и ВАТС появится поле для настройки подмены, также перейти в блок настройки подмены можно в разделе Настройка — Подмена.
- Выберите способ: кликните на тип подмены По номеру телефона.
- Название. Здесь можно указать обозначение для подмены номера, например, номер в шапке. Это необязательное для заполнения поле.
- В поле Номер телефона укажите номер, который хотите подменить на сайте.
- В поле Формат в выпадающем списке можно выбрать, как будет отображаться номер или скрыть его с сайта, если есть такая необходимость.
- При необходимости добавьте другие номера телефонов по кнопке «Добавить».
- Кликните на кнопку «Сохранить».
Скрипт сам найдет указанный телефон на сайте и заменит его на номер коллтрекинга.
Настройка номера коллтрекинга по идентификатору
Способ, в котором нужно использовать идентификатор с сайта настраивается следующим образом:
- Выберите способ: кликните на тип подмены По идентификатору.
- Название. Здесь можно указать обозначение для подмены номера, например, номер в шапке. Это необязательное для заполнения поле.
- В поле Номер телефона укажите селектор из кода для того номера, который хотите подменить на сайте. Как найти селектор, пишем чуть ниже в этой статье.
- В поле Формат в выпадающем списке можно выбрать, как будет отображаться номер или скрыть его с сайта, если есть такая необходимость.
- При необходимости добавьте другие идентификаторы по кнопке «Добавить».
- Кликните на кнопку «Сохранить».
Как посмотреть значение в теге class или id?
Перейдите на свой сайт, выделите номер и откройте код:
- В Chrome: клик правой кнопкой — просмотр кода страницы.
- В Opera и Firefox — Ctrl+Shift+K.
- В Internet Explorer — F12 и стрелочка в правом верхнем углу.
- В Safari — включите отображение меню «Разработка» в настройках браузера, клик правой кнопкой по номеру — проверить объект.
Откроется html-код сайта с акцентом на теге с номером. В этом коде найдите либо class, либо id.
Значение, которое указано в кавычках, вам нужно добавить в поле «Идентификатор».При этом оно должно быть уникальным, т.е. не повторяться у других элементов сайта. Параметр 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, чтобы в результате замена происходила и в ссылке. Подробнее об этом мы рассказываем в статье.
Не получилось найти решение?
Напишите нам — проконсультируем и обязательно поможем!
Была ли полезна статья?
Как настроить коллтрекинг на сайте
После того, как вы установили скрипт Callibri на все страницы сайта, приобрели услугу МультиТрекинга и настроили канал и ВАТС необходимо настроить номер коллтрекинг. Это можно сделать с помощью идентификатора или по номеру телефона.
Если у вас на сайте есть номера скрытые под надписью "Показать номер" или подобными, мы можем подменить эти скрытые номера со своей стороны. Для проведения этой настройки обратитесь в поддержку в разделе Помощь в боковом меню вашего проекта.
Настройка номера коллтрекинга по номеру телефона
После настройки канала и ВАТС появится поле для настройки подмены, также перейти в блок настройки подмены можно в разделе Настройка — Подмена.
- Выберите способ: кликните на тип подмены По номеру телефона.
- Название. Здесь можно указать обозначение для подмены номера, например, номер в шапке. Это необязательное для заполнения поле.
- В поле Номер телефона укажите номер, который хотите подменить на сайте.
- В поле Формат в выпадающем списке можно выбрать, как будет отображаться номер или скрыть его с сайта, если есть такая необходимость.
- При необходимости добавьте другие номера телефонов по кнопке «Добавить».
- Кликните на кнопку «Сохранить».
Скрипт сам найдет указанный телефон на сайте и заменит его на номер коллтрекинга.
Настройка номера коллтрекинга по идентификатору
Способ, в котором нужно использовать идентификатор с сайта настраивается следующим образом:
- Выберите способ: кликните на тип подмены По идентификатору.
- Название. Здесь можно указать обозначение для подмены номера, например, номер в шапке. Это необязательное для заполнения поле.
- В поле Номер телефона укажите селектор из кода для того номера, который хотите подменить на сайте. Как найти селектор, пишем чуть ниже в этой статье.
- В поле Формат в выпадающем списке можно выбрать, как будет отображаться номер или скрыть его с сайта, если есть такая необходимость.
- При необходимости добавьте другие идентификаторы по кнопке «Добавить».
- Кликните на кнопку «Сохранить».
Как посмотреть значение в теге class или id?
Перейдите на свой сайт, выделите номер и откройте код:
- В Chrome: клик правой кнопкой — просмотр кода страницы.
- В Opera и Firefox — Ctrl+Shift+K.
- В Internet Explorer — F12 и стрелочка в правом верхнем углу.
- В Safari — включите отображение меню «Разработка» в настройках браузера, клик правой кнопкой по номеру — проверить объект.
Откроется html-код сайта с акцентом на теге с номером. В этом коде найдите либо class, либо id.
Значение, которое указано в кавычках, вам нужно добавить в поле «Идентификатор».При этом оно должно быть уникальным, т.е. не повторяться у других элементов сайта. Параметр 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, чтобы в результате замена происходила и в ссылке. Подробнее об этом мы рассказываем в статье.
Не получилось найти решение?
Напишите нам — проконсультируем и обязательно поможем!
Была ли полезна статья?