Установка и настройка чата MeTalk при помощи Google Tag Manager

7 июня 2016

В этой статье расскажу об установке и настройке чата MeTalk и настройки целей в Google Analytics без внесения изменений в код сайта. Подразумевается, что вы знаете что такое GTM и используете его на своём сайте.

Для начала всё просто. Создадим новый тег. Выбор продукта - "Пользовательский html" и в поле для ввода html вставим код, полученный из кабинета MeTalk.

Для настройки целей воспользуемся слоем данных (dataLayer) и немного модифицируем код, добавив следующую функцию

  (function(d, w, m,l){
    w[m]("setCallback", 'openSupport', function(data){
      w[l].push({event:'metalk', metalk_event:'openSupport'});
    });
    w[m]("setCallback", 'clientSendMessage', function(data){
      w[l].push({event:'metalk', metalk_event:'clientSendMessage'});
    });
    w[m]("setCallback", 'closeSupport', function(data){
      w[l].push({event:'metalk', metalk_event:'closeSupport'});
    });
  })(document, window, 'MeTalk', 'dataLayer');

Получится как показано на скриншоте:

Создаём пользовательскую переменную уровня данных с именем metalk_event. Её дальше будем использовать для передачи события в GA.

И триггер типа пользовательское событие с именем metalk для активации тега отправки данных в GA

Мы настроили Tagmanaget таким образом, что при открытии/закрытии чата, а также при отправке сообщения будет срабатывать триггер, который мы будем использовать для отправки событий в системы аналитики.

Цели в Google Analytics

Для этого создадим ещё один тег Universal Analytics и в параметрах пропишем следующее:

В качестве условия активации нужно указать созданный триггер MeTalk.

Не забываем опубликовать изменения :) и переходим ко всем знакомой настройке целей в GA.

Целей у нас будет 3. Действие для каждой цели указываем своё. А именно:

  1. openSupport - открытие окна чата
  2. clientSendMessage - отправка сообщения
  3. closeSupport - закрытие чата.

Цели в Яндекс.Метрике

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

Чтобы код отправки событий был универсальным, я создал ещё одну переменную типа "константа" и назвал её yaCounter.

Значение переменной - строка вида yaCounterXXXXXXXX. Найти её можно в коде вызова счётчика Метрики. Вот тут:

Создадим ещё один тег типа "Пользовательский HTML" с триггером активации MeTalk. В поле для ввода HTML-кода нужно добавить следующую строку:

<script>
(function(w){
    var me = 'metalk_'+{{ME-Talk Event}}
    w[{{yaCounter}}] && w[{{yaCounter}}].reachGoal(me);
})(window);
</script>

При срабатывании триггера в этот код при помощи макросов будут подставляться нужные нам номер счётчика и название события:

  1. metalk_openSupport - открытие окна чата
  2. metalk_clientSendMessage - отправка сообщения
  3. metalk_closeSupport - закрытие чата.

Эти события нужно указать в качестве целей в настройках счётчика Метрики


На этом всё. Вопросы и замечания пишите в комментариях.

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