Функціонал кнопки CallMe реалізований для економії номерів із пулу динамічної підміни. Уявімо, що у вас є десять підмінних номерів, а на сайті одночасно знаходяться дванадцять користувачів. Останнім двом доведеться видавати номери, які вже показані іншим відвідувачам. Отже, є високий ризик отримати некоректну статистику, адже не вдасться визначити, хто ж із відвідувачів, яким були видані однакові номери, все-таки зателефонував.
Очевидно, що далеко не кожен користувач вирішить зателефонувати. Тому можна показувати номери не всім, і тим самим зберегти їх для тих, хто налаштований подзвонити. Для цього достатньо приховати номери кнопкою "Показати номер". Найбільш зацікавлені відвідувачі натиснуть на неї — і скрипт підміни покаже їм підмінний номер. Тобто, видача номера буде відбуватися лише для готового до дзвінка клієнта.
Технічні вимоги
Кнопки сумісні лише з динамічним колтрекінгом
У пулі підміни має бути 3 і більше номерів
Реалізація кнопки на html+css
Кнопка повинна знаходитися всередині елемента, в якому знаходиться номер, наприклад в елементі <div>, <span> і т.д.
Як налаштувати та ввімкнути?
1. Функціонал можна налаштувати в розділі особистого кабінету Ringostat “Колтрекінг”, підрозділ “XPaths”.
2. Для налаштування потрібно натиснути на редагування вже створеного XPath-a та активувати кнопку або для всіх пристроїв (1), або тільки для мобільних (2).
3. Після чого потрібно вибрати з випадного списку відсоток резервних номерів:
Ви можете вибирати резервну кількість номерів для кожного пулу. Припустімо, в пулі 10 номерів для підміни. Для резерву вибрано 20% номерів. Якщо на сайті одночасно знаходяться вісім відвідувачів, то дев'ятому вже буде показана кнопка «Показати номер». Якщо він на неї натисне, то побачить один із резервних номерів.
Детальніше про логіку роботи чекбоксів:
1) У випадку, якщо жоден з чекбоксів “Call me all” та “Call me mobile” неактивний, кнопка видачі номерів в проекті ніколи не з'явиться.
2) Якщо чекбокс “Call me all” неактивний, а чекбокс “Call me mobile” активний, то кнопка видачі номерів буде відображатися завжди, але лише на мобільних пристроях.
3) У випадку, якщо активні обидва чекбокси, на мобільних пристроях кнопка буде відображатися завжди, а на десктопних - відповідно до вибраного відсотка резервних номерів.
4) Якщо чекбокс “Call me all” активний, а чекбокс “Call me mobile” неактивний, і на мобільних, і на десктопних пристроях кнопка буде відображатися відповідно до відсотка резервних номерів.
4. Останнім пунктом налаштування потрібно вставити в поле “HTML код кнопки Call me” код вашої кнопки.
Після завершення всіх налаштувань потрібно натиснути “Зберегти”, перейти до розділу “Налаштування скрипта” (1) та натиснути кнопку “Застосувати налаштування” (2).
Приклади кнопок
Варіант для десктопної версії 1
Код кнопки:
<div style="border: 1px solid #39464e;border-radius:5px;background: border-box;font-size:14px;font:inherit;color:inherit;margin-right:15px;cursor: pointer;display:inline-block;padding:5px;">0
<span style="opacity:0.8;margin-left:3px;">(8</span>
<span style="opacity:0.5;">0</span>
<span style="opacity:0.2;">0)</span>
<span style="color: inherit; letter-spacing: 0; text-align: center;"> Показати номер </span>
</div>
Варіант для десктопної версії 2
Код кнопки:
<div style="">0
<span style="opacity:0.8;margin-left:3px;">(8</span>
<span style="opacity:0.5;">0</span>
<span style="opacity:0.2;">0)</span>
<span style="color: inherit; letter-spacing: 0; text-align: center;"> Показати номер </span>
</div>
Варіант кнопки для мобільного 1
Код кнопки:
<div style="border: 1px solid #39464e;border-radius:5px;background: border-box;font-size:14px;font:inherit;color:inherit;margin-right:15px;cursor: pointer;display:inline-block;padding:5px;">
<span><img width="20px" src='посилання на вашу іконку'></span>
<span style="color: inherit; letter-spacing: 0; text-align: center;font-size:20px;"> Подзвонити </span>
</div>
Варіант кнопки для мобільного 2
Код кнопки:
<button style="border: 1px solid #39464e;border-radius:15px;background:transparent;color:inherit">
<span style="color:inherit">
(067) Подзвонити
</span>
</button>