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

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

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

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

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

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

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

1 <script type="text/javascript">
2 (function(i, s, o, g, r, a, m) {
3   i['GoogleAnalyticsObject'] = r;
4  i[r] = i[r] || function() {
5  (i[r].q = i[r].q || []).push(arguments)
6  }, i[r].l = 1 * new Date();
7  a = s.createElement(o),
8 m = s.getElementsByTagName(o)[0];
9  a.async = 1;
10 a.src = g;
11 m.parentNode.insertBefore(a, m)
12 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
13 ga('create', 'UA-ХХХХХХХХ-Х', '{название аккаунта}');
14  ga('send', 'pageview');
15  ga(function(tracker) {
16  (function(w, d, c) {
17  $.getScript(('https:' == d.location.protocol ? 'https://' : 'http://') + "mod.calltouch.ru/d_client.js?param;client_id" + c + ";ref" + escape(d.referrer) + ";url" + escape(d.URL) + ";cook" + escape(d.cookie) + ";");
18  })(window, document, tracker.get('clientId'));
19  });
20 </script>



Обратите внимание на строчки 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, в нем указываем тип отслеживания, например, Просмотр страницы, указываем для него правила активации: 

2158746096fa43a2a349467a93c71e59
Тег Universal Analytics 

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

18827bff5eab49f696f3e43e8fe0151b
Настройки тега Universal Analytics 

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

4df27bd8d0694594a71a0921031bf4d6
Свойства макроса 

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

1 function() {
2   return (function() {
3         dataLayer.push({
4             'cid': ga.getAll()[0].get('clientId'),
5             'event': 'hitCallback'
6         });
7     })
8 }



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

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

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

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

fc45fc589e734329827a5d3404778520
Создание макроса Google Tag Manager 

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

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



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

1 'cid': ga.getAll()[0].get('clientId'),



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

70cfaa38389c4a25bf50800769770022
Создать тег в Google Tag Manager 

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

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

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

1 <script>
2 $.getScript(('https:' == document.location.protocol ? 'https://' : 'http://') + "mod.calltouch.ru/d_client.js?param;client_id" + {{cid}} + ";ref" + escape(document.referrer) + ";url" + escape(document.URL) + ";cook" + escape(document.cookie));
3 </script>



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

Важный момент: для этого тега нужно указать правила активации (это блок в правой части экрана): 

962ef62689e941b5978269c4465cf638
Правила активации тега 

Нажмите на кнопку + Добавить и затем выберите пункт Создать новое правило:

e3784e080d9f4d6fb02d3abee4c003db
Создать новое правило 

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

4d081183c63748d0bac96c86a6cdd01f
Настройки правила для Calltouch 

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

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

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

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

На этом настройка интеграции 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. Мы не гарантируем, что описанный метод будет работать у вас, используйте его на свой страх и риск. Мы не несем ответственности за последствия его применения вами.



Если Вам понравился материал, поделитесь им в социальных сетях.