Настройка автоматического выбора номера
Перед тем, как приступить к использованию сервиса Коллтрекинг, необходимо сделать разметку телефонных номеров на сайте соответствующими тегами. Это нужно для того, чтобы при переходе из разных источников на сайте изменялись номера. Приступим к настройке.
Войдите в раздел Сайты, выберите нужный сайт и кликните «редактировать»
Перейдите к вкладке Блоки номеров на сайте. По умолчанию система создает один блок номера. Если на сайте указывается несколько номеров, добавьте блоки под каждый из них
Далее нужно добавить идентификатор — уникальный признак контейнера для телефонного номера на сайте (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.
Важно:
размечать подобным образом необходимо все номера на всех страницах сайта, если у вас установлены разные шаблоны для разных страниц, не забудьте внести корректировки в каждый из них.
После того, как сделаны настройки идентификатора номера для коллтрекинга и разметка номеров на сайте с помощью этого идентификатора, можно переходить к настройкам Рекламных кампаний.
