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

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

1. Перейти в настройки сайта, кликнув на него в списке сайтов в разделе «Сайты» навигационного меню справа:

2. Для задания формата отображения номеров коллтрекинга необходимо перейти ко второй закладке «Номера для подмены» . По умолчанию система создает один блок номера. Если на сайте указывается несколько номеров, необходимо добавить блоки под каждый из них:

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

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

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

В первом поле «Заменяемый элемент» выбирается тип идентификатора: name , id  или class, или же вы можете выбрать вариант непосредственного ввода номера подменяемого телефона на сайте (Number ). Name  — наиболее ранний атрибут из всех трех, его значение должно быть уникальным, т.е. одним и тем же атрибутом name отметить два разных контейнера на одной странице нельзя. Если, например, телефон располагается в нескольких местах на странице, то при выборе данного типа разметки надо будет для каждого контейнера с номером создавать свой уникальный идентификатор. Пример отображения атрибута в html-коде:

Id — более современный атрибут, пришедший на смену name. Он также должен быть уникальным в пределах одной страницы. Внимание : при использовании данного атрибута в поле «Имя элемента» (рис.4) название идентификатора должно начинаться с символа #.

Пример отображения атрибута в html-коде:

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

Пример отображения атрибута в html-коде:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Селекторы каждого элемента страницы можно увидеть в браузере.

Для этого необходимо открыть код страницы: нажать на правую кнопку мышки и выбрать пункт «Просмотреть код» или использовать сочетание Ctrl+Shift+I.

Затем указать на нужный элемент (например, на номер в шапке сайта):

Внизу страницы указан полный путь к номеру телефона.

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

В итоге мы получим следующий селектор: #comagic_phone.

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

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

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