Настройка интеграции Calltouch и Google Analytics с помощью Google Tag Manager

Пришлось столкнуться с задачей настройки интеграции Calltouch и Google Analytics на сайте нескольких клиентов. Сложность заключалась в том, что ранее у них был настроен Google Analytics с помощью Google Tag Manager.

При этом, если вам приходилось добавлять на сайт сервис Calltouch, то рекомендации предоставляемые этим сервисом представляют из себя немного доработанный код отслеживания Universal Analytics. Обратите внимание, что речь идет именно об Universal Analytics, т.к. используя его возможности сервис Calltouch может передавать информацию о звонках в Google Analytics и вы получаете возможность работать с этой информацией в стандартных отчетах.

Пример отчета по событиям с Calltouch

Пример отчета по событиям с Calltouch

Поскольку на сайте клиента была выполнена настройка Google Analytics с помощью Google Tag Manager, то вариант предлагаемого сервисом Calltouch внедрения оказался неприемлем. Возник вопрос по интеграции с помощью Google Tag Manager.

Первое решение, которое приходит в голову – это использование пользовательского HTML тега и добавление в него необходимого кода отслеживания. Но зная, что это не правильное и не корректное решение оно было отклонено сразу. Я начал искать способ выполнить внедрение через стандартный тег Universal Analytics и решение было найдено с помощью стандартных средств.

Первое с чего нужно начать, это с изучения кода предлагаемого сервисом Calltouch для интеграции его на сайт и связи с Google Analytics. Приведу пример стандартного кода, который содержится в рекомендациях:

Обратите внимание на строчки 15-19, это тот блок, который отличает этот код от стандартного. Что-же он значит и для чего нужен? Давайте разберемся.

Нужен он для загрузки основного файла сервиса Calltouch с дополнительными параметрами. Этот файл и производит подмену телефонного номера на сайте.

Из всех параметров, которые присутствуют в запросе нам необходимо обратить внимание на client_id, который передает уникальный идентификатор пользователя сервису. Для чего?

Все очень просто, Calltouch после звонка по подменному номеру, передает с помощью Measurement Protocol информацию в Google Analytics, а как известно при таком запросе параметр client_id является обязательным и позволяет связать ранее выполненные действия посетителя на сайте со звонком.

Значение этого параметра хранится в cookie и извлекается с помощью кода tracker.get(‘clientId’), который присутствует в 18 строке, затем подставляется в URL загрузки файла сервиса.

У вас наверное возник вопрос, что значит блок ga(function(tracker) {} в который заключен вызов описанный выше. Это так называемая hitCallback функция (о ней я уже рассказывал ранее, см. ссылку). Она появилась в Universal Analytics и служит для выполнения кода на JavaScript после загрузки и выполнения кода отслеживания.

Задача становится более ясной для решения, нам нужно использовать стандартный тег Google Tag Manager типа Universal Analytics, организовать выполнение hitCallback функции, которая загрузит файл сервиса Calltouch.

Создаем тег типа Universal Analytics, в нем указываем тип отслеживания как Просмотр страницы, указываем для него правила активации:

Настройка тега Universal Analytics в Google Tag Manager

Настройка тега Universal Analytics в Google Tag Manager

Перед тем как сохранить изменения нужно добавить еще одну опцию. Перейдите к блоку Дополнительные настройки в Настройках тега, в нем выберите пункт Поля, которые необходимо задать и укажите имя поля hitCallback, а в качестве значения используйте переменную, которую сейчас и создадим:

Создание hitCallback переменной

Создание hitCallback переменной

В настройках переменной укажите ее имя, в примере это hitCallback, а также тип:

Настройки hitCallback переменной

Настройки hitCallback переменной

Содержание переменной должно быть следующим:

Поясню, что он делает. Когда загрузится и выполнится код отслеживания Universal Analytics будет выполнен код приведенный выше, который передаст в dataLayer значение нужного нам параметра client_id и событие под именем hitCallback, которые понадобятся нам чуть позже.

Сохраняем созданный макрос нажатием на синюю кнопку Сохранить и в итоге должно получиться примерно следующее:

Настройка произвольного поля

Настройка произвольного поля

Теперь сохраните настройки тега (синяя кнопка внизу страницы) и перейдите к созданию еще одной переменной. Для этого выберите соответствующий пункт меню в левой части страницы, после чего нажмите кнопку Создать:

Создание переменной

Создание переменной

В появившемся окне укажите следующие настройки:

  • имя переменной - cid;
  • тип переменной - Переменная уровня данных;
  • имя переменной уровня данных – cid;
  • версия уровня данных – версия 2;
  • значение по умолчанию – n\a.
Переменная cid

Переменная cid

Если вы ранее не работали с Google Tag Manager, то поясню. В эту переменную попадет значение из dataLayer, которое будет получено в переменной hitCallback. Если такого значения не окажется, то оно будет равно n\a. Вот этот фрагмент в коде, где мы получаем значение client_id:

Теперь нам нужно создать тег, который будет подгружать сервис Calltouch:

Создание тега Google Tag Manager

Создание тега Google Tag Manager

Настройки, которые необходимо указать:

Настройки тега с кодом Calltouch

Настройки тега с кодом Calltouch

В поле HTML введите следующий код (не будет работать если нет на сайте JQuery, но подгрузить JS файл с помощью JavaScript не составит труда для любого разработчика):

Описывать, что он делает я не буду, скажу только, что это равносильно строчкам кода 16-18 из рекомендаций в начале этой публикации. Обратите внимание, в этом коде мы используем ранее созданную переменную {{cid}} (имена переменных в Google Tag Manager обрамляются двойными фигурными скобками).

Важный момент, для этого тега нужно указать триггеры его активации. Нажмите на кнопку Еще:

Активация тега CallTouch

Активация тега CallTouch

В открывшемся окне кнопку Создать, затем выберите тип Пользовательское событие:

Пользовательское событие

Пользовательское событие

В открывшемся окне укажите следующие настройки:

Настройки триггера для Calltouch

Настройки триггера для Calltouch

Сохраните триггер. После этого сохраните настройки тега. Теперь необходимо опубликовать новую версию контейнера и проверить корректность работы выполненных настроек.

Для этого после публикации версии контейнера перейдите на сайт, нажмите клавишу F5, чтобы обновилась страница и обратите внимание, что номер должен подмениться (я подразумеваю, что вы выполнили настройки тегов HTML для подмены, как того рекомендуют инструкции Calltouch).

Чтобы проверить, что запрос отправляется корректно, в браузере Chrome нажмите Ctrl + Shift + I, выберите вкладку Network, в поле фильтра введите d_client, должна появится строка в которой должен быть фрагмент ;clientid а за ним различные цифры:

Проверка работы

Проверка работы

На этом настройка интеграции Calltouch и Google Analytics с помощью Google Tag Manager завершена.

Общая схема выглядит так:

  • создаем тег Universal Analytics, в нем добавляем возможность выполнения hitCallback функции;
  • создаем макрос, который выполняет роль hitCallback функции и передает в dataLayer значение client_id и event;
  • создаем пользовательский тег HTML, который выполняет загрузку кода сервиса Calltouch, указывая у него правило активации на событие созданное в пункте выше;
  • публикуем версию контейнера;
  • проверяем корректность запроса на загрузку сервиса Calltouch;
  • удаляем с сайта ранее размещенные коды Calltouch.

Важные замечания.

1. Выполненная настройка проверена на одном из сайтов, при проведении сверки со службой поддержки Calltouch установлено, что 100% запросов с сайта корректны и позволяют передавать из Calltouch в Google Analytics сведения о звонках.

2. Количество звонков по статистике в панели управления Calltouch и в отчетах Google Analytics будет, скорее всего, различаться. Этому есть обоснования и они заключаются в особенностях работы Calltouch и Google Analytics.

3. Не забудьте включить интеграцию с Google Analytics в панели управления Calltouch.

4. С сайта после описанной настройки должны быть удалены все коды Calltouch ранее размещенные на нем.

5. Я не гарантирую, что описанный метод будет работать у вас, используйте его на свой страх и риск. Я не несу ответственности за последствия его применения вами.

В заключении хочу поблагодарить Валерия Ерёмушкина, специалиста технической поддержки CallTouch, за оперативную связь и помощь в решении ряда технических вопросов возникших в процессе настройки.

Не забудьте нажать одну, а лучше несколько, кнопок социальных сетей под этой строкой.

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

20 комментария(ев) к “Настройка интеграции Calltouch и Google Analytics с помощью Google Tag Manager

  1. Иван, спасибо за статью!
    Когда я обращался CallTouch, мне ответили, что не рекомендуется подобная установка, так как, в таком случае они не гарантируют точность измерения.
    У них что-то изменилось?

    • @Дмитрий, я по ходу подготовки этого материала общался с сотрудниками Calltouch, проверяли логи, должно работать. При проверке логов было 100% корректных запросов

  2. Если client_id не получается от гугла, а задается на стороне сайта – как передать его в Analytics через GTM?

    • @Михаил, вероятно Вы путаете clienId и userId. Первый сохраняется в куке и доступен на стороне клиента, второй Вы сами генерируете для каждого пользователя и передаете в GA. Как правило, это зарегистрированный на сайте пользователь, а userId его уникальный идентификатор в Вашей системе

  3. Иван, а как для проверки в интерфейсе посмотреть все посещения клиента с конкретным clientid?
    Через measurement protocol получить можно. А как в интерфейсе? Хотел сегмент создать, но такого параметра фильтрации нет.

    • Михаил, уточните – как Вы получаете все данные по clientId через протокол? Он же служит для передачи данных, а не для получения

  4. Иван,
    1) Почему нельзя просто использовать пользовательский HTML тег
    2) В сервисе CT сами номера нужно проставлять метками, если использовать ваш метод номера оставлять старыми метками?

    • Дмитрий, использование пользовательского HTML тега для GA в GTM это не корректное решение. По второму вопросу, Вы имеете ввиду саму подстановку номеров на сайте? Если да – то ничего не меняется

  5. Иван, какое правило должно быть для первого тега Universal Analitics “все страницы”?

  6. Иван, спасибо!
    А как cid можно из DataLayer GTM передать в CRM клиента? Понятно, что это будет скрытое поле в форме заказа. Не могу никак разобраться.

    • Алекс, cid это информация GA, в GTM ее можно получить из GA, если Вам нужно получить этот параметр для работы с ним на странице используйте код описанный в документации GA или получив в GTM, с помощью JavaScript “вытаскивайте” из dataLayer и затем применяйте по Вашему усмотрению

    • Николай, все зависит от реализации, не смогу ответить точнее, т.к. не знаком с ней на Вашем сайте

  7. Дмитрий Захарченко 06.05.2015 в 23:59 - Ответить

    dataLayer.push в режиме preview&debug не работает.
    Я потратил много времени в попытках отследить работу кода (=

    • Дмитрий, для поиска проблемы нужно работать с сайтом, из Вашего сообщения ничего не понятно

  8. Иван, подскажите, пожалуйста, как получить СlientID (не User ID) из GA(или GTM) посредством подключения по API (любой версии)? Задача: 1. необходимо связать свой ид и clientID 2. Получить данную связку через API. Возможно как-то можно через пользовательские параметры?

    • Дмитрий, “по умолчанию” этого не сделать, но если записывать значение ClientID в пользовательский параметр, а затем его выгружать по API, то это возможно. Посмотрите вот этот материал

  9. Не понятно, а почему нельзя использовать стандарный механизм в мануале call touch по связка сервиса с ГА?

Добавить комментарий

Current month ye@r day *