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

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

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

Рис. 1 «Переход к настройкам сайта»

2) По умолчанию откроется закладка «Общие настройки сайта». Тут при необходимости можно поменять следующие опции для сайта:

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

Рис. 2 «Общие настройки сайта»

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

Рис. 3 «Добавление блоков номеров для подмены»

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

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

 

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

Рис. 4 «Редактирование идентификатора номера»

В первом поле «Заменяемый элемент» выбирается тип идентификатора: name, id или class, или же вы можете выбрать вариант непосредственного ввода номера подменяемого телефона на сайте (Number).  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. Он также должен быть уникальным в пределах одной страницы. Внимание: при использовании данного атрибута в поле «Имя элемента» (рис.4) название идентификатора должно начинаться с символа #.

Пример отображения атрибута в 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) вы можете указать в настройках лишь сам подменяемый номер, и CoMagic сам найдет, где на сайте его необходимо подменять. Например, у вас на сайте есть номер +7 495 926 86 86. Вы можете сразу прописать его в окне настроек для подмены:

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

Селектор - 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.

Screenshot_1.png

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

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

Чтобы выделить первый или последний элемента из списка, используются псевдоклассы :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.

   

Как посмотреть селектор номера телефона с помощью браузера

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

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

Как посмотреть код.png

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

Селектор номера.png

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

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

Как скопировать селектор.png

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

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

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

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

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

Сервис поддержки клиентов работает на платформе UserEcho