Скрипт статичного колтрекінгу
Опис роботи скрипта для заміни на сайті номерів будь-яких операторів. Конструктор для візуального налаштування скрипта. Підміна заголовків для різних джерел трафіку.
Навіщо потрібен скрипт
Як встановити та налаштувати скрипт
Завантажте скрипт та підключіть на сайті.
Додайте CSS клас ct_phone в елементах, де відбуватиметься заміна номерів. Якщо номер є у шапці та у підвалі сайту, то для всіх номерів потрібно додати клас.
Вставте код заміни. Його можна вставити в будь-якому місці сторінки, головне, щоб він був після елементів, у яких відбувається заміна.
Якщо підміна потрібна тільки в шапці сайту, код можна вставити прямо під номерами. У цьому випадку заміна номерів майже непомітна.
Без особливої причини не рекомендую виконувати код у події готовності DOM моделі або Google Tag Manager, тому що підміна номерів стає помітнішою.
Налаштування за допомогою конструктора
Для спрощення налаштування ми створили конструктор. Для роботи з конструктором раджу прочитати всю статтю, щоби розуміти значення параметрів.
Конструктор має приклади визначення джерел трафіку. Їх можна використовувати як основу, і розширити, якщо потрібно.
Коли всі настроїли готовий код, можна скопіювати внизу сторінки.
Налаштування джерел трафіку
У масиві джерел задаються джерела трафіку.
Підтримуються такі місця пошуку:
У цьому прикладі, в utm_medium буде шукатися підрядок email.
Замінивши підрядок на регулярне вираз можна використовувати складніші правила пошуку.
Якщо пошуку підрядки або регулярного вираження недостатньо, можна задати функцію. У параметр функції подаєтьсязначення місця пошуку, а повернути функція має true або false.
Після налаштування джерел трафіку, потрібно задати відповідність номерів та джерел.
Якщо на сайті одночасно відображаються кілька номерів, їх потрібно перерахувати у масиві phone.
HTML виглядатиме так:
За замовчуванням у targets задано один селектор - .ct_phone
Відображення номерів
Номери відображаються відповідно до параметра pattern. За умовчанням він дорівнює
Замість символів # будуть підставлені цифри номера.
Шаблон слід задавати під конкретні номери. Шаблон за замовчуванням дозволяє відображати 11 значних українських номерів, але не зможе правильно показати білоукраїнський номер, тому що в ньому 12 цифр.
У шаблоні можна використовувати HTML теги. Наприклад, якщо потрібно відокремити номер від коду міста.
Якщо параметр pattern зробити порожнім, номер буде виводитись як він записаний у секції phones.
Якщо шаблону недостатньо, відображення номера можна зробити за допомогою callback функції. У параметр функції подається масив зі списку телефонів.
Підміна заголовків сторінки для різних джерел трафіку
Скрипт можна використовувати для заміни будь-якого вмісту сторінки залежно від джерел трафіку.
Підміна заголовків для різних ключових слів
Тепер потрібно додати CSS клас у тезі заголовка.
У параметр pattern подаємо порожній рядок, щоб шаблон не застосовувався до рядків під час виведення.
Можна змінювати заголовок і підзаголовок, і зробити CSS класи зрозумілішими за допомогою налаштування targets.
Розмічаємо CSS класами title і subtitle елементи, у яких змінюватимемо вміст.
Підміна вмісту за допомогою callback функції.
Для більш складного варіанта заміни можна використовуватифункцію. Такий варіант підійде, якщо потрібно замінити зображення. У функцію передається словник зі списку phones або null, якщо джерело не знайдено.
Перевірка та налагодження коду заміни
Сторінка приземлення та реферер
У звичайному режимі другим параметром скрипта подається об'єкт window. Для налагодження замість нього використовуйте словник, в якому вкажіть referrer та посадкову сторінку.
Вимкнення запам'ятовування джерела відвідувача
При налагодженні важливо вимкнути механізм збереження в куках джерела відвідувача. Для цього додайте два параметри:
Після налагодження не забудьте прибрати cookie_ttl_days та cookie_key та замінити параметр wnd на window.
Висновок
Статичний коллтрекінг має ряд переваг у порівнянні з динамічним: не виникає нестачі номерів при збільшенні трафіку, не виникає колізій, коли номер показаний іншій людині, а по ньому дзвонить попередній відвідувач.
Скрипт ми створювали для наших клієнтів, але оскільки він працює з номерами будь-яких операторів, вирішили зробити його відкритим, ліцензія — MIT.
У планах додати установку через менеджер пакетів, наприклад, Browserify або Webpack.