Перейти к содержанию

Разметка номера телефона для подмены в Коллтрекинге Roistat

Чтобы Roistat подменял номер компании на отслеживаемый, в настройках Коллтрекинга необходимо указать тот элемент в коде, который содержит нужный номер. Так Roistat будет знать, к какому элементу обращаться.

Внимание!

Для подмены номеров необходимо установить на сайт счетчик Roistat.

Настройка

  1. В коде страницы посмотрите значение класса или идентификатор элемента, содержащего номер.

    Это можно сделать во многих браузерах. Наведите курсор на номер, нажмите правую кнопку мыши и в открывшемся меню выберите пункт Просмотреть код или что-то похожее. Например, посмотрим элемент с номером для сайта https://roistat.com/ru/:

    1.png  

    В открывшемся меню разработчика нужный элемент с номером будет подсвечен:

    2.png

  2. Если номер уже размечен каким-либо классом (class) или идентификатором (id), который есть только у нужного вам номера, скопируйте название.  

    У номера телефона может быть несколько классов. Разные классы отделяются друг от друга пробелом. Использовать нужно тот класс, который есть только у номера для подмены.

  3. Если у элемента с номером нет ни класса, ни идентификатора, необходимо добавить их в коде страницы. Для этого внутри тега перед номером добавьте class="уникальное имя класса" или id="уникальное название". Например:

    3.png

    Или:

    4.png

    Таким образом, код кликабельного номера на сайте может иметь вид:

    <a href="tel:+79999999999" class="contact_phone">84951111111</a>
    

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

    <span class="contact_phone">89999999999</span>
    
  4. В настройках сценария Коллтрекинга перейдите к разделу Выберите элемент с номером на сайте. Выберите вкладку CSS Selector и в поле Название CSS-класса или ID введите класс или идентификатор:

    5.png

    Имя класса должно начинаться с точки (.class_name), id – с решетки (#id_name). Можно добавить несколько классов и id через запятую.

  5. В разделе Выберите элемент с номером на сайте можно одновременно добавить и номер телефона с вашего сайта (вкладка Телефонный номер), и CSS Selector. Подменяться будет и номер телефона, и CSS Selector:

    7.png

Внимание!

На странице может быть идентификатор только для одного элемента. Поэтому если вы укажете один идентификатор для двух номеров, то система подменит только самый первый номер. Если вы хотите подменять более одного номера, указывайте класс вместо идентификатора.

Внимание!

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

Оформление номера телефона на сайте

По умолчанию номер телефона, указанный на сайте, подменяется указанным в сценарии номером в формате 8 (XXX) XXX-XX-XX. Вы можете изменить формат номера двумя способами.

В настройках сценария Коллтрекинга

В шаге Выберите элемент с номером на сайте в поле Формат подменного номера:

6.png

Примеры форматов для отображения номеров:

  • В формате 8(ХХХ)ХХХ-ХХ-ХХ номер отображается как 8(123)456-78-90;
  • В формате +X XXX XXX-XX-XX номер отображается как +7 495 123-45-67;
  • В формате ХХХ ХХХХХХХ номер отображается как 123 4567890;
  • В формате ХХХ-ХХ-ХХ номер отображается как 123-45-67 (без кода страны или региона).

В коде сайта

Если используется такой способ настройки, то в настройках маски номера телефона в сценарии нужно указать +X (XXX) XXX-XX-XX, чтобы обозначить разделение на код страны, код региона и номер телефона. Если маска номера телефона настроена и в коде, и в сценарии, применяется вариант настройки в коде.

Для настройки в коде сайта доступны три класса:

  • {название класса, указанного в настройках сценария}-country, например, roistat-phone-country. Определяет код страны в номере телефона.
  • {название класса, указанного в настройках сценария}-region, например, roistat-phone-region. Определяет регион в номере телефона.
  • {название класса, указанного в настройках сценария}-number, например, roistat-phone-number. Определяет формат записи номера телефона.

Внимание!

Если в настройках сценария Коллтрекинга в качестве элемента с номером на сайте вы указали идентификатор, то настройка маски в коде сайта с помощью классов недоступна.

Внимание!

Если ваш сайт сделан на Tilda, перед настройкой коллтрекинга с помощью кода необходимо добавить скрипт в Head сайта:

<script type="text/javascript">
$(document).ready(function() {
    $("здесь вставьте CSS-селектор").first().addClass('roi_phone1')   
})
</script>

В кавычки " " необходимо вставить CSS-селектор нужного элемента (в Инструментах разработчика Chrome кликните правой кнопкой по нужному элементу и выберите CopyCopy selector).

После добавления скрипта вы можете продолжить настройку по стандартной инструкции.

Советы по настройке маски

  • Чтобы убрать из маски знак «+», используйте код:

    <span><span class="roistat-phone-country">7</span>(<span class="roistat-phone-region">495</span>)</span><span class="roistat-phone-number">123-45-67</span>
    
  • Если вы хотите, чтобы номер телефона отображался без кода региона и кода страны, нужно указать только класс roistat-phone-number.

  • Если вы хотите добавить активную ссылку на подменяемый номер и изменять номер телефона одновременно в ссылке и на странице сайта, используйте код:

    <a href="tel:84951111111" class="roistat-phone-tel"><span class="roistat-phone-country">7</span>(<span class="roistat-phone-region">495</span>)<span class="roistat-phone-number">111-11-11</span></a>
    

Рекомендуемые статьи

Подключение и настройка сценариев Коллтрекинга