В Google AdWords існує відмінна функція відстеження дзвінків з сайтів або лендінг-сторінок, що працює на основі підміни вашого телефонного номера на сайті – безкоштовним номером Google, з подальшим відстеженням і переадресацією. Вона буде корисна і навіть обов’язкова для використання всім, у кого є клієнти, які, переходячи на сайт, вважають за краще дзвонити, а не відправляти наприклад форму замовлення, або робити і те й інше. З її допомогою ви зможете більш повно оцінювати, отриману статистику про переходи, що дасть вам можливість більш розумно керувати ставками на основі отриманих даних.

Стандартний спосіб налаштування Call Tracking’a і докладний опис його роботи ви можете знайти в довідці Google AdWords. А ми розглянемо, на мій погляд, більш зручний варіант налаштування, за допомогою Google Tag manager’а.

Зручність цього способу налаштування полягає у відсутності необхідності доступу до сайту і зміни його вихідного коду, що дає нам можливість встановити і налаштувати наш Call Tracking, без участі програмістів, власників сайту і т.д.

Процес, включає в себе чотири етапи налаштування:

Етап 1: Створення конверсії в Google Adwords і створення тега в Google Tag Manager

Насамперед нам необхідно створити нову дію-конверсію (конверсію) в Google Adwords.

Переходимо в розділ Інструменти-> Переходи (мал. 1). І натискаємо “+ конверсія” (мал. 2)

У Джерелі конверсій вибираємо телефонні Дзвінки -> Дзвінки на номер телефону, вказаний на вашому сайті

Заповнюємо необхідні поля на свій розсуд і зберігаємо

Після чого з’явиться вікно “подальші дії“, в якому буде згенеровано наш унікальний код

Копіюємо згенерований код і зберігаємо конверсію.

Відкриваємо свій аккаунт в Google Tag Manager і створюємо новий тег.

У типі тега вибираємо “Custom HTML tag”. Називаємо його, наприклад “AdWords Call Tracking.” Вставляємо раніше скопійований код. Якщо хочете відслідковувати телефонні дзвінки на всіх сторінках вашого сайту то в розділі “Fire On” виберіть “All Pages”, якщо з конкретною, то “Some Pages” і збережіть тег. Пізніше він нам ще знадобиться.

Етап 2: Додавання коду підміни номера телефону

На цьому етапі ми створимо фрагмент коду, який буде підміняти наш номер телефону номером відстеження від Google.

Для цього нам потрібно дізнатися css селектор в якому знаходиться наш телефон на сайті. Натискаємо правою кнопкою миші на наш номер телефону і вибираємо переглянути код.

В даному прикладі номер телефону знаходиться всередині тега <p> і має class phone. Відповідно наш selector буде таким p.phone.

Номер вашого телефону може знаходиться в будь-яких інших тегах. Наприклад, <h2>, <a>, <span>, <div>.

Так само може мати інший class або id

Наприклад, ваш телефон знаходиться в тегі <div> і має class contact-info. Тоді ваш css селектор буде виглядати так div.contact-info

Якщо ваш телефон не має класу, а має id, то замість (.) Вам потрібно використовувати символ (#). Наприклад, div # contact-info

Тепер, коли ми знає наш селектор, повертаємося до раніше створеного тегом в Google Tag Manager (етап 1)

Нам потрібно додати наступний код перед тегом закриття</script>

1. //Нижче наведені варіанти змінних виключно для прикладу, вам необхідно їх змінити під себе.
2. //Змініть business_number на свій телефонний номер, ТОЧНО як він показується у вас на сайті
3. var business_number = “(555) 555-5555”;
4. //Змініть business_number_unformatted на свій телефонний номер без додаткових символів і пробілів
5. var business_number_unformatted = “5555555555”;
6. //Змініть business_number_identifier на свій css селектор (який ми визначили вище)
7. var business_number_identifier = “p.phone”;
8. //наведена нижче функція залишається незмінною
9. var callback = function(formatted_number, unformatted_number) {
10. var numberElement = document.querySelector(business_number_identifier);
11. var numberString = numberElement.innerHTML;
12. numberString = numberString.replace(business_number,formatted_number);
13. numberElement.innerHTML = numberString;
14. };
15. //Нижче наведений рядок коду, потрібний для тестування нашого тега вGTM’s debug mode
16. //Він замінює номер телефону на вашому сайті, на тестовий номер ‘666-666-6666’
17. window.onload = callback(‘666-666-6666’, business_number_unformatted);
18. //Рядок коду нижче і є викликом  нашої головної функції. Після того, як ви закінчите
19. //тестування і будете готові опублікувати GTM container, додайте ‘//’ перед рядком коду ВИЩЕ і видаліть ‘//’ перед рядком коду НИЖЧЕ.
20. //window.onload = _googWcmGet(callback, business_number);

• Змініть телефонний номер (555) 555-5555 на свій телефонний номер, ТОЧНО, як він відображається у вас на сайті
• Замініть не відформатований 5555555555 на свій не відформатований номер без пробілів, круглих дужок, тире або інших символів
• Замініть phone на свій css селектор (який ми визначили вище)

Етап 3: Тестування

Тепер нам потрібно протестувати чи коректно відпрацьовує наш скрипт підміни номера. Для цього ми запускаємо функцію Preview and Debug в Google Tag Manager

І заходимо на наш сайт

• Вікно GTM debug показує, що наш тег відстеження спрацював (Fired)
• Наш телефонний номер у верхньому правому кутку був замінений з – (555) 555-5555 на 666-666-6666.

Це говорить нам про те, що ми все налаштували правильно

Этап 4: Завершення і публікація

Якщо ваше тестування пройшло успішно, то можна переходити до завершального етапу і публікації нашого тега.

Нам залишається закоментувати тестовий рядок, додавши перед ним ‘//’. І розкоментувати виклик нашої головної функції прибравши перед нею ‘//’.

На скріншоті нижче показаний кінцевий результат, вже після виконання вищеописаного кроку

Зберігайте і опублікуйте ваші зміни в Google Tag Manager. На цьому все!

Важливо: на жаль, функція Call Tracking Google AdWords – доступна не для всіх країн. Повний список ви можете знайти тут.

Про те, як відслідковувати дзвінки в Facebook Ads ми розповіли в цій статті.

У статті використані матеріали з ресурсу acceleratedsem.com