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

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

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

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

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

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

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

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

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

• Id — более современный атрибут, пришедший на смену name, также должен быть уникальным в пределах одной страницы. При использовании данного атрибута в поле Имя элемента название идентификатора должно начинаться с символа #. Пример отображения атрибута в html-коде:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, в шапке сайта 3 номера телефона. Нам нужно осуществить автоматический выбор только для номера с кодом 8-800.

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

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

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

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

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

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