Настройка 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>

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