Налаштування Call Tracking Google AdWords за допомогою Google Tag Manager
В 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>
- //Нижче наведені варіанти змінних виключно для прикладу, вам необхідно їх змінити під себе.
- //Змініть business_number на свій телефонний номер, ТОЧНО як він показується у вас на сайті
- var business_number = “(555) 555-5555”;
- //Змініть business_number_unformatted на свій телефонний номер без додаткових символів і пробілів
- var business_number_unformatted = “5555555555”;
- //Змініть business_number_identifier на свій css селектор (який ми визначили вище)
- var business_number_identifier = “p.phone”;
- //наведена нижче функція залишається незмінною
- var callback = function(formatted_number, unformatted_number) {
- var numberElement = document.querySelector(business_number_identifier);
- var numberString = numberElement.innerHTML;
- numberString = numberString.replace(business_number,formatted_number);
- numberElement.innerHTML = numberString;
- };
- //Нижче наведений рядок коду, потрібний для тестування нашого тега вGTM’s debug mode
- //Він замінює номер телефону на вашому сайті, на тестовий номер ‘666-666-6666’
- window.onload = callback(‘666-666-6666’, business_number_unformatted);
- //Рядок коду нижче і є викликом нашої головної функції. Після того, як ви закінчите
- //тестування і будете готові опублікувати GTM container, додайте ‘//’ перед рядком коду ВИЩЕ і видаліть ‘//’ перед рядком коду НИЖЧЕ.
- //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
