Настройка 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
Привет. Ребята. вы очень круто написали статью все понятно)
Кроме одного пункта — Измените phone на свой css селектор (который мы определили выше) и еще появилась ршибочка такого вида — http://prntscr.com/b3a724
А куда конкретно его ставить в какую строку кода, который мы ставим перед закрывающим /script
Привет, спасибо )
Css селектор — это имя класса или значение id, тега в котором находится ваш номер телефона. В приведенном примере номер телефона находится в теге «p» и имеет класс «phone», на вашем сайте он может быть в другом теге и иметь другой класс или id, как посмотреть имя вашего тега,класса или id описано в статье.
Т.е. вам необходимо в строке:
var business_number_identifier = «p.phone»;
«p.phone» заменить на ваши значения.
По поводу ошибки, скорее всего есть не закрытая скобка или наоборот присутствует лишняя, сделайте пожалуйста скриншот итогового кода, тогда я смогу вам точно подсказать где ошибка.
Порядок строк в скрипте менять не нужно, т.е вы копируете весь скрипт и уже в нем меняете приведенные для примера значения на свои.
У меня получилось опубликовать в таком варианте http://prntscr.com/bdfmfs
И есть через Tag Assistant такой статус http://prntscr.com/bdfkht
То есть как бы должно работать)
Спасибо
Очень полезная статья, согласен с остальными кто комментировал, что с ее помощью можно научиться Call Tracking. Правда, для этого надо что-то смыслить в написании кода…