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

Со свежими изменениями:


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

Войдите в раздел Сайты, выберите нужный сайт и кликните "редактировать"



Перейдите к вкладке Блоки номеров на сайте. По умолчанию система создает один блок номера. Если на сайте указывается несколько номеров, добавьте блоки под каждый из них

Далее нужно добавить идентификатор — уникальный признак контейнера для телефонного номера на сайте (HTML-теги <DIV> или <SPAN>), позволяющий различать его для подмены номера коллтрекингом. Имя идентификатора может быть последовательностью цифр и латинских букв, а также специальных символов, при условии, что первой стоит буква или специальный символ. 

Можно отредактировать идентификатор comagic_phone, созданный системой по умолчанию, или создать свой:

По клику на название идентификатора откроется окно редактирования:

В поле Заменяемый элемент выберите тип идентификатора: 


  • Name — наиболее ранний атрибут, его значение должно быть уникальным, т.е. одним и тем же атрибутом name отметить два разных контейнера на одной странице нельзя. Если, например, телефон располагается в нескольких местах на странице, то при выборе данного типа разметки надо будет для каждого контейнера с номером создавать свой уникальный идентификатор. Пример отображения атрибута в html-коде:
<span name="comagic_phone"></span><span name="comagic_phone"></span><span name="comagic_phone">236-80-41 </span>
<div name="comagic_phone">236-80-41 </div>
    


  • Id — более современный атрибут, пришедший на смену name, также должен быть уникальным в пределах одной страницы. При использовании данного атрибута в поле Имя элемента название идентификатора должно начинаться с символа #. Пример отображения атрибута в html-коде:
<span id="comagic_phone"></span><span id="comagic_phone"></span><span id="comagic_phone">(495) 236-80-41 </span>
<div id="comagic_phone">(495) 236-80-41 </div>
        


  • Class — может присваиваться нескольким элементам на странице. Если вас устраивает одинаковый формат отображения номера во всех блоках на сайте, вы можете задать идентификатор с помощью данного атрибута и пометить им сразу все контейнеры с телефоном. Пример отображения атрибута в html-коде:

<span class="comagic_phone"></span><span class="comagic_phone">(495) 236-80-41 </span>
<div class="comagic_phone">(495) 236-80-41 </div>
        


  • Number — вместо прописывания специальных атрибутов из кода страницы (IDClass или Name) вы можете указать в настройках лишь сам подменяемый номер, и UIS сам найдет, где на сайте его необходимо подменять. Например, у вас на сайте есть номер +7 495 926 86 86. Вы можете сразу прописать его в окне настроек для подмены.

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

  • Селектор - CSS селекторы используются для выбора элементов или группы элементов на странице, для которых необходимо задать стиль. Это могут быть элементы определенных классов, с определенными идентификаторами, находящиеся в определенном блоке страницы или заключенные в определенные теги.

Селекторы позволяют выбирать и номера телефонов для подмены. Для этого нужно указать цепочку элементов к контейнеру, в котором находится номер. При этом нет необходимости прописывать идентификатор (например, id или класс) для номера в коде сайта.

Селекторы бывают простыми, когда мы указываем на один элемент (например, на класс, тег или id номера для подмены), и вложенными, объединяющими несколько простых селекторов.

Селекторы задаются по определенным правилам:

Тип селектора

Синтаксис

Селектор по классу

<div class="phone">

.имя_класса

.phone

Селектор по id

<div id=phone>

#имя_идентификатора

#phone

Селектор по тегу

<a href tel.:78001234567>

Название тега без <>

а

Во вложенном селекторе все элементы нужно записывать через пробел.

Рассмотрим пример.

Допустим, кликабельный номер телефона для подмены находится в шапке сайта:

<div class="header">

<a href="tel:+74993721750">+7 (499) 372-17-50</a></div>

Чтобы подменить его с помощью селектора, нужно указать, что номер находится в ссылке в блоке с классом header. Цепочка элементов записывается сверху вниз: .header a.

Количество символов в селекторе не ограничено, т.к. цепочки элементов могут быть длинными.

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

Чтобы выделить первый или последний элемента из списка, используются псевдоклассы :first-child или :last-child. Чтобы выделить элемент по номеру, используется псевдокласс :nth-child (3), где в скобках указывается необходимый номер.

Например, в шапке сайта 3 номера телефона. Нам нужно осуществить подмену только для номера с кодом 8800.

<div class="header">

<span>+74951234567 </span>

<span>+78001234567 </span>

<span>+79101234567 </span>

Селектор для нужного нам номера будет следующим: .class span:nth-child(2). Мы указываем, что в блоке с классом header нам нужен второй номер, заключенный в тег span.

Чтобы узнать селектор номера телефона, откройте ваш сайт в браузере, нажмите F12, наведите курсор на нужный элемент сайта (номер телефона) и внизу страницы увидите полный путь к номеру телефона. 

Браузеры позволяют также копировать селекторы любого элемента. Например, чтобы скопировать селектор номера в шапке, выделяем его в коде, нажимаем правую кнопку мыши и в пункте Copy выбираем Copy Selector.

При необходимости можно совмещать все доступные варианты настроек идентификатора. Например, если вы хотите отобразить подменяемый номер с другой маской и шаблоном оформления в каком-то из мест на сайте, то для удобства вы можете произвести общую настройку по номеру, а для нужного вам места воспользоваться специальными атрибутами IDClass и Name

При этом приоритет у подмены по номеру будет самый низкий — то есть, если для какого-то телефона прописаны как настройки подмены по последовательности цифр (номеру), так и по IDClass или Name, он будет подменяться по IDClass или Name

ВНИМАНИЕ: размечать подобным образом необходимо все номера на всех страницах сайта, если у вас установлены разные шаблоны для разных страниц, не забудьте внести корректировки в каждый из них. После того, как сделаны настройки идентификатора номера для коллтрекинга и разметка номеров на сайте с помощью этого идентификатора, можно переходить к настройкам Рекламных кампаний.


Эта статья была полезна для 2 людей. Эта статья помогла Вам?
Подписаться на наши новости