Настройка автоматического выбора номера

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

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

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

Далее нужно добавить идентификатор — уникальный признак контейнера для телефонного номера на сайте (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 — вместо прописывания специальных атрибутов из кода страницы (ID, Class или 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 номера телефона. Нам нужно осуществить автоматический выбор только для номера с кодом 8-800.

Копировать

<div class="header">
<span>+74951234567</span>
<span>+78001234567</span>
<span>+79101234567</span>

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

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

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

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

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

Важно:

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

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

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

Да, помогла!

Вопрос не решён

Виртуальные номера

Оборудование

Настройка автоматического выбора номера

Рекомендуем