Наверх

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

Содержание

Описание

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

Добавление подмены

Добавление подмены может происходить в двух местах: в процессе добавления пула на табе "Отслеживание" в разделе меню "Настройки" – "Управление номерами" и на табе "Подмена" в том же меню.

Добавление подмены во время настройки пула

На первом шаге добавления пула вы можете указать настройки подмены на сайте:

Выбор настройки подмены

В данном поле вы можете ввести номера с сайта, которые необходимо подменять пулом, или класс или идентификаторы элементов, в которых расположен номер. Номер указывается в формате 4951234567, то есть без лишний символов и без кода страны. При введении любого из значений на табе "Подмена" будет создан блок подмены, который в дальнейшем можно будет редактировать.

Обратите внимание! Вводя номер телефона, блок подмены будет создан и сразу будет доступен для осуществления подмены, а ввод любых других символов будет распознан как название класса – его необходимо будет донастроить на табе "Подмена", отредактировав созданный блок подмены. Об этом рассказано подробнее далее в инструкции.

Добавление подмены

Добавление подмены происходит по нажатию кнопки "Добавить подмену". По ее нажатию откроется сайдбар с настройками добавления подмены.

mceclip2.png

Далее пункты добавления пула будут рассмотрены подробнее.

Автоматическая подмена номера

Данный пункт выбран по умолчанию. Выбрав данный пункт и введя номер в поле "Номер для поиска", Calltouch автоматически будет искать указанный вами номер и подменит его на отслеживаемый. Если номер встретится на странице несколько раз, все одинаковые номера будут заменены на отслеживаемый номер. 

mceclip0.png

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

advice_ver2.png Главное условие для успешной подмены - номер на сайте должен быть представлен вместе с кодом города, в ином случае используйте подмену по классам или идентификаторам.

В поле "Селектор для поиска номера" указывается CSS-селектор, внутри всех элементов которого будет осуществлен поиск номера. По умолчанию выбран body, то есть поиск будет во всем отображаемом содержимом. Доступные селекторы представлены в таблице:

Селектор Пример Результат
Базовые селекторы
".class" ".call_phone" Выберет все элементы с классом "call_phone".
"#id" "#call_phone" Выберет элемент с идентификатором "call_phone".
"tag" "body" Выберет все элементы внутри тега "body".
Комбинированные селекторы
"first, second, ..." ".call_phone_1, .call_phone_2" Выберет все элементы с классами call_phone_1, call_phone_2.
"outer inner" "div .call_phone_1" Выберет все элементы с классом call_phone_1, которые находятся в тегах div (независимо от уровня вложенности).
"parent > child" "div > .call_phone_1" Выберет все элементы с классом call_phone_1, которые находятся в тегах div на первом уровне вложенности.
Селекторы по атрибутам
"[attr]" "[href]" Выберет все элементы, у которых имеется атрибут href.
"[attr = value]" "[href = 'tel:+74953080100']" Выберет все элементы, у которых атрибут href равен "tel:+74953080100".
"[attr ^= value]" "[href ^= 'tel']" Выберет все элементы, у которых атрибут href начинается с "tel".
"[attr $= value]" "[href $= '0100']" Выберет все элементы, у которых атрибут href заканчивается на "0100".
"[attr *= value]" "[href *= 'tel']" Выберет все элементы, у которых атрибут href содержит подстроку "tel".
"[attr ~= value]" "[name ~= 'Promo']" Выберет все элементы, у которых атрибут name содержит слово "Promo".
"[attr |= value]" "[name |= 'ru']" Выберет все элементы, у которых атрибут name равен "ru", либо начинается с "ru-".
"[first][second][..." "[href *= 'tel'][href *= 'callto']" Выберет все элементы, у которых атрибут href содержит подстроку "tel" или подстроку "callto".
Простые фильтры
":not(selector)" "div:not(.call_phone_3)" Выберет все элементы с тегом div, кроме тех, которые имеют класс call_phone_3.
Фильтры по содержимому
":contains('text')" ":contains('номер')" Выберет все элементы, в которых содержится текст "номер".
":has(selector)" "div:has(a)" Выберет все элементы с тегом div, внутри которых имеются элементы с тегом a.
Фильтры дочерних элементов
":first-child" "a:first-child" Выберет все элементы с тегом a, находящиеся первыми внутри своего родительского элемента.
":last-child" "a:last-child" Выберет все элементы с тегом a, находящиеся последними внутри своего родительского элемента.

":nth-child( )"

":nth-last-child( )"

"a:nth-child(3)"

"a:nth-last-child(1)"

"a:nth-child(3)" выберет все элементы с тегом a, находящиеся третьими сверху внутри своего родительского элемента.

"a:nth-last-child(1)" выберет все элементы с тегом a, находящиеся первыми снизу внутри своего родительского элемента.

":only-child" "a:only-child" Выберет все элементы с тегом a, являющиеся единственными внутри родительского элемента.
":only-of-type" "a:only-of-type" Выберет все элементы с тегом a, являющиеся единственными тегом a внутри родительского элемента.
":first-of-type" "a:first-of-type" Выберет все элементы с тегом a, являющиеся первым тегом a внутри родительского элемента.
":last-of-type" "a:last-of-type" Выберет все элементы с тегом a, являющиеся последним тегом a внутри родительского элемента.

":nth-first-of-type( )"

":nth-last-of-type( )"

"a:nth-first-of-type(3)"

"a:nth-last-of-type(1)"

"nth-first-of-type(3)" выберет все элементы с тегом a, находящиеся третьими сверху (среди элементов с тегом a) внутри своего родительского элемента.

"nth-last-of-type(1)" выберет все элементы с тегом a, находящиеся первыми снизу (среди элементов с тегом a) внутри своего родительского элемента.

advice_ver2.png Обратите внимание, что для работы селекторов на вашем сайте должна быть установлена последняя версия скрипта Calltouch.

Подмена содержимого класса

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

Подмена содержимого класса

В поле "Содержимое класса" введите содержимое HTML-тега, которое необходимо подменять. То, что будет указано в данном поле, будет отображено на сайте, поэтому, для отображения подменного номера, необходимо использовать freemarker шаблон. Этот шаблон использует привычный синтаксис и порядковые номера цифр в номере телефона. Рассмотрим это на примере: если вы хотите, чтобы подменный номер отображался в формате +7 (495) 123-45-67, необходимо использовать шаблон: 

+${pn[0]} (${pn[1]}${pn[2]}${pn[3]}) ${pn[4]}${pn[5]}${pn[6]}-${pn[7]}${pn[8]}-${pn[9]}${pn[10]}

Если в подменяемом HTML-теге, название класса которого вы указываете в настройках подмены, содержится также сопроводительный текст "Номер телефона", то шаблон будет выглядеть как:

Номер телефона: +${pn[0]} (${pn[1]}${pn[2]}${pn[3]}) ${pn[4]}${pn[5]}${pn[6]}-${pn[7]}${pn[8]}-${pn[9]}${pn[10]}

Этот шаблон означает, что вместо каждого элемента от 0 до 10 будут подставлены цифры отслеживаемого номера телефона в 11-значном формате, который закреплен за пулом. Подробнее о freemarker шаблонах на сайте freemarker.apache.org.

Обратите внимание! 

  • Для корректной подмены номера по freemarker шаблону, на сайте должна быть установлена библиотека jQuery. Проверить ее наличие на сайте можно выполнив в консоли браузера команду: console.log(jQuery.fn.jquery);

  • Подключить библиотеку jQuery на ваш сайт можно вставив следующий скрипт перед закрывающим тегом </head> (до скрипта Calltouch):
    <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

Подмена содержимого идентификатора

Данный пункт полностью аналогичен подмене содержимого класса, только вместо класса вы должны указать идентификатор HTML-тега в поле "Название идентификатора".

Подмена содержимого идентификатора

Использование в пулах

После выбора и настройки типа подмены вы можете выбрать в каких пулах использовать данную подмену: во всех созданных или только в определенных пулах:

Использование в пулах

Выбрав опцию "Все онлайн пулы", данная настройка подмены будет применена ко всем онлайн-пулам, которые подразумевают подмену на сайте.

Выбрав опцию "Выборочно", вам будет предложен список пулов, к которым можно применить данную настройку подмены.

Выборочное использование

Редактирование подмены

Редактирование подмены происходит на табе "Подмена". При наведении на блок подмены появится кнопка "Редактировать":

Редактирование подмены

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

Удаление подмены

Обратите внимание! Удалить блок подмены можно только при условии, что он не используется ни в одном пуле.

Удаление подмены происходит на табе "Подмена". При наведении на блок подмены появится кнопка "Удалить":

Удаление подмены