В этой статье расскажу об установке и настройке чата 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
Мы настроили Google Tag Manager таким образом, что при открытии/закрытии чата, а также при отправке сообщения будет срабатывать триггер, который мы будем использовать для отправки событий в системы аналитики.
Цели в Google Analytics
Для этого создадим ещё один тег Universal Analytics и в параметрах пропишем следующее:
В качестве условия активации нужно указать созданный триггер MeTalk.
Не забываем опубликовать изменения :) и переходим ко всем знакомой настройке целей в GA.
Целей у нас будет 3. Действие для каждой цели указываем своё. А именно:
- openSupport - открытие окна чата
- clientSendMessage - отправка сообщения
- closeSupport - закрытие чата.
Цели в Яндекс.Метрике
Пока я писал этот раздел, тегменеджер немного изменил дизайн, поэтому скриншоты будут отличаться. Но основные элементы остались практически на своих местах.
Чтобы код отправки событий был универсальным, я создал ещё одну переменную типа "константа" и назвал её yaCounter.
Значение переменной - строка вида yaCounterXXXXXXXX. Найти её можно в коде вызова счётчика Метрики. Вот тут:
Создадим ещё один тег типа "Пользовательский HTML" с триггером активации MeTalk. В поле для ввода HTML-кода нужно добавить следующую строку:
<script>
(function(w){
var me = 'metalk_'+{{ME-Talk Event}}
w[{{yaCounter}}] && w[{{yaCounter}}].reachGoal(me);
})(window);
</script>
При срабатывании триггера в этот код при помощи макросов будут подставляться нужные нам номер счётчика и название события:
- metalk_openSupport - открытие окна чата
- metalk_clientSendMessage - отправка сообщения
- metalk_closeSupport - закрытие чата.
Эти события нужно указать в качестве целей в настройках счётчика Метрики
На этом всё. Вопросы и замечания пишите в комментариях.
