Интеграция сторонних сервисов

Введение

Здравствуйте! Меня зовут Артём, и мы продолжаем заниматься настройкой аналитики в GTM и YTM.

В предыдущих статьях:

• Мы провели необходимые подготовительные работы
• Настроили отслеживание кликов по элементам сайта
• Настроили отслеживание отправки форм
• Настроили отслеживание копирования текста

Если не читали – рекомендую ознакомиться.

А в этой статье мы разберём, как устанавливать на сайт сторонние инструменты и сервисы. А также настроим отслеживание основных целей в известной платформе для связи JivoSite.

Итак, при помощи менеджера тегов у нас есть возможность устанавливать на сайт и скрипты от сторонних сервисов. Что также очень удобно, так как, не вовлекая в задачу разработчика сайта, мы самостоятельно можем установить на сайт: любой коллтрекинг, счётчики/пиксели других систем аналитики, онлайн-чаты, сервисы записи на услуги и многое другое.

Все скрипты мы устанавливаем через Пользовательский HTML-тег. При этом обязательно с обоих сторон обрамляем его в открывающий и закрывающий тег <script></script>

Любой код мы обязательно обрамляем в тег script

В рамках этого руководства мы перенесём из GTM в YTM инструмент Вариокуб и некоторые цели из платформы для связи JivoSite: у моего клиента на проекте подключены только эти инструменты. Но, я надеюсь, что общую суть вы уловили.

При помощи Пользовательского HTML-тега вы можете установить на сайт любой сторонний сервис или инструмент.

Установка JivoSite и настройка целей

Итак, для начала мы должны установить на сайт сам виджет. Хорошая новость – у самого сервиса есть детальная инструкция по установке чата на практически любую платформу/CMS.

Можно установить виджет через код сайта – у моего клиента он как раз так и установлен на Тильде. В личном кабинете JivoSite сгенерируйте свой уникальный скрипт.

Ниже приведу пример:

<script src="//code.jivosite.com/widget/07FHIGH4hn" async></script>

Пример сгенерированного скрипта на платформе JivoSite

Но этот скрипт можно установить и через GTM/YTM. Опять же всё делается при помощи Пользовательского HTML-тега. В качестве триггера снова выбираем «Просмотр страницы» или «Модель DOM готова».

Устанавливаем JivoSite на сайт через менеджер тегов

07FHIGH4hn – это сгенерированный уникальный идентификатор чата (у вас будет свой). Таким же образом мы добавляем на сайт скрипты и от любых других инструментов и сервисов.

Так как скрипт JivoSite у моего клиента установлен напрямую на Тильде – давайте сразу перейдём к настройке целей.

Настройка целей в JivoSite

Переходим к самому интересному. Теперь, когда мы установили на сайт сам чат, нам нужно настроить отслеживание самых значимых для нас событий. В идеале здорово было бы настроить отслеживание всей воронки: открытие чата, отправка сообщения в чат и отправка формы с контактными данными. Для более глубокой аналитики можно, конечно, добавить и ещё событий. В крайнем случае, желательно отслеживать хотя бы отправку формы с контактами.

Напомню, что в JivoSite некоторые события передаются в Яндекс Метрику автоматически. Для этого нужно включить на вашем счётчике автоматические цели. А если вам нужно больше событий, то в базе знаний самого JivoSite есть идентификаторы всех целей, которые только можно отслеживать.

Однако тут не обошлось и без ложки дёгтя. И автоматические цели в Метрике и более детальный спектр событий можно отслеживать в JivoSite только на тарифе «Профессиональный» или выше. Но, хорошая новость – у нас всё равно есть лазейка, при помощи которой мы можем отследить некоторое число событий даже на бесплатном тарифе.

 Как это сделать?

Здесь, чтобы не пересказывать уже хорошо описанное пошаговое руководство, я рекомендую перейти вам на сайт Якова Осипенкова – там решение по настройке и отслеживанию целей в JivoSite изображено максимально подробно. Рекомендую к ознакомлению. Именно на основе этого руководства я и настраивал отслеживание 4 целей на бесплатном тарифе JivoSite в GTM.

Я же расскажу, как можно перенести это решение в YTM.

Есть 2 способа: простой и чуть более сложный. Мы рассмотрим с вами оба. Итак, невзирая на ограничения в настройке целей на бесплатном тарифе JivoSite, у самого виджета, как и у любого другого, есть API-Документация.

Например, Jivo вызывает определённые функции на странице, чтобы сообщить о возникновении события.

Тонкости настройки целей в GTM

На основе этой информации, я всё и настраивал в GTM. Для начала я создал Пользовательский HTML-тег, который должен срабатывать на всех страницах сайта.

<script>
function jivo_onOpen () {
dataLayer.push ({'event':'jivo_onOpen'})
}

function jivo_onMessageSent () {
dataLayer.push ({'event':'jivo_onMessageSent'})
}

function jivo_onAccept () {
dataLayer.push ({'event':'jivo_onAccept'})
}

function jivo_onIntroduction () {
dataLayer.push ({'event':'jivo_onIntroduction'})
}
</script>

При помощи этого скрипта, в зависимости от того, какие функции были вызваны в API JivoSite, мы помещаем в слой данных 4 специальных события.

Вот, как я это настроил в GTM:

Устанавливаем специальный скрипт в GTM

Как видите, я отслеживаю только 4 события (вы можете больше):

• jivo_onOpen – срабатывает при ручном и автоматическом открытии онлайн-чата;
• jivo_onMessageSent – срабатывает, когда посетитель отправляет первое сообщение в чат;
• jivo_onAccept – срабатывает в момент, когда оператор начинает в JiviSite с посетителем;
• jivo_onIntroduction – (самое важное) срабатывает, когда посетитель отправляет в чате контактные данные. 

Далее я создал в GTM триггер «Специальное событие», и при помощи «регулярных выражений» указал все 4 события:

jivo_onIntroduction|jivo_onAccept|jivo_onMessageSent|jivo_onOpen

Создаём триггер «Специальное событие» в GTM + включаем регулярные выражения

Затем я передал все события в Яндекс Метрику. Для этого в Метрике я предварительно создал все нужные цели с идентификаторами, которые указаны в API JivoSite, и которые использовал в «Специальном событии».

Идентификаторы целей в Яндекс Метрике

Следующим шагом в Пользовательском теге я ссылался на переменную {{event}}, которая подтягивала именно тот идентификатор цели, событие которой фиксировалось в API и в dataLayer. В качестве триггера использовал специальное событие, созданное ранее.

Создаем тег Яндекс Метрики и отслеживаем любое из 4 событий

Всё это прекрасно работало в GTM.

Но, как вы уже догадались, в таком виде перенести решение в YTM, увы, нельзя. Помните, что в «Специальном событии» в YTM нельзя указать регулярные выражения? Но, как я писал в самом начале, есть 2 способа: простой и чуть более сложный.

Простой способ переноса Целей из GTM в YTM

Простой способ подразумевает создание в YTM такого же «Пользовательского HTML-тега».

Создаём в YTM такой же тег, как и в GTM

Цели в Метрике у нас уже созданы – делать ничего не нужно!

А, ввиду отсутствия использования регулярных выражений в триггере Специальное событие, мы просто создадим 4 разных триггера под каждое специальное событие.

Событие jivo_onOpen

Событие jivo_onAccept

Событие jivo_onMessageSent

Событие jivo_onIntroduction

Затем создадим не один тег Яндекс Метрики, как это было ранее в GTM, а четыре разных тега. Вот пример создание тега на отслеживание открытия окна чата.

Теперь в режиме отладки YTM можно открыть окно чата и увидеть, что цель благополучно отрабатывает.

Все остальные 3 события, настроенные таким же образом, будут тоже отрабатывать корректно.

Вот, как бы, и всё. На этом настройку переноса 4 событий JivoSite на бесплатном тарифе можно было бы закончить. И большинству этого будет достаточно. Но я пошёл дальше и решил усложнить себе жизнь. И, если вы, как и я, не ищете лёгких путей… То читайте дальше.😊

Более сложный способ переноса Целей из GTM в YTM

Что если я Вам скажу, что и в YTM мы можем повторить тот же сценарий, который был в GTM, где у нас один триггер «Специальное событие», и один Тег с передачей сразу всех 4 событий в Яндекс Метрику? Для тех, кому интересно – прошу к ознакомлению, тем, кому нет – пойму, если пропустите.  😊

Итак, скрипт, который мы ранее использовали на всех страницах сайта:

Скрипт JivoSite

Придётся немного усложнить и заменить на этот:

<script>
function jivo_onOpen () {dataLayer.push({'event': 'jivo_event', 'jivo_goal': 'jivo_onOpen'});}
function jivo_onMessageSent () {dataLayer.push({'event': 'jivo_event', 'jivo_goal': 'jivo_onMessageSent'});}
function jivo_onAccept () {dataLayer.push({'event': 'jivo_event', 'jivo_goal': 'jivo_onAccept'});}
function jivo_onIntroduction () {dataLayer.push({'event': 'jivo_event', 'jivo_goal': 'jivo_onIntroduction'});}
</script>

Создаём в YTM тег «Пользовательский HTML».

Создаём тег Пользовательский HTML с обновленным кодом

Как видите, мы задаём единое специальное событие Event: jivo_event, а также добавляем переменную jivo_goal с такими же значениями, как и наши цели в Яндекс Метрике. В качестве триггера у Тега используем «Модель DOM готова» или «Просмотр страницы».

Дополнительно теперь нам нужно создать пользовательскую переменную уровня данных jivo_goal:

Создаём пользовательскую переменную уровня данных jivo_goal

А в качестве триггера создаём всего один: «Специальное событие» с названием jivo_event!

Триггер «Специальное событие» jivo_event

Остаётся самое сложное – передать все 4 события в рамках одного Пользовательского тега HTML в Яндекс Метрику. Для этого мне пришлось потратить n-е количество времени, чтобы с помощью нейросети написать вот такой код.

В строке ym(XXXXXXXX, ‘reachGoal’, goal); укажите свой счётчик Метрики.

<script>
try {
var goal;
for (var i = dataLayer.length - 1; i >= 0; i--) {
if (dataLayer[i].jivo_goal) {
goal = dataLayer[i].jivo_goal;
break;
}
}

if (goal && typeof ym === 'function') {
ym(XXXXXXXX, 'reachGoal', goal);
console.log('[YTM] Цель передана:', goal);
}
} catch (e) {
console.error('[YTM] Ошибка отправки цели:', e);
}
</script>

Пояснение: в скрипте мы объявляем переменную goal, которая позже будет содержать название цели. Затем ищем событие jivo_goal, которое произошло на сайте, и сохраняем в переменную goal. Если goal нашлась, и библиотека Метрики загружена (typeof ym === ‘function’), мы вызываем функцию ym(…), чтобы передать событие.

Всё! Теперь создаём ещё один «Пользовательский HTML-тег» с триггером «Специальное событие» jivo_event.

Создаём «Пользовательский HTML-тег» с триггером «Специальное событие» jivo_event

Идём в режим отладки и проверяем, как у нас работают цели.

 Супер! Как видите, у нас всё получилось — все цели отрабатывают корректно! Теперь, друзья, вы знаете, что из GTM в YTM реально перенести любую технику настройки, правда иногда только при помощи «танцев с бубнами». 😊

Берите себе на вооружение любой из двух способов, которые я вам привёл. Буду рад, если эта информация вам пригодится.

Установка на сайт инструмента Вариокуб

Теперь предлагаю перенести из GTM в YTM инструмент для экспериментов Varioqub (Вариокуб).

На всякий случай считаю важным немного рассказать, зачем вообще нужен этот инструмент. И тут как нельзя лучше подойдёт цитата из официальной справки инструмента:

…С помощью Varioqub вы можете проводить эксперименты на сайтах разных конфигураций: от одностраничной визитки или лендинга до сайта сложной структуры.

Инструмент позволяет создавать эксперимент со множеством вариантов и менять не только текст, название и цвет элементов, но и изменять стили CSS, а также произвольную HTML-разметку. В результате эксперимента доступна статистика по показателям, которые помогают определить, какой вариант сайта нравится посетителям.

Для проведения эксперимента и распределения посетителей сайта по выборкам Varioqub использует данные Яндекс Метрики…

Если до этого вы ещё никогда не использовали AB-эксперименты на посадочной странице, рекомендую ознакомиться с Вариокубом более детально в официальном источнике по этой ссылке. Там же вы найдёте и детальную инструкцию, как подключить инструмент к работе.

Мы же в рамках статьи перенесём инструмент из GTM в YTM.

Как всё было настроено в GTM

В GTM я импортировал инструмент из Библиотеки шаблонов тегов.

Заходим в шаблоны

Поиск в галерее:

Начинаем поиск по галерее

Varioqub:

Находим и импортируем шаблон

Настройки шаблона детально прописаны в самой Яндекс Метрике в инструкции к установке:

Детальная инструкция по установки Вариокуба в Яндекс Метрике

Согласно инструкции я активировал Тег перед тегом Яндекс Метрики, а в качестве триггера выбирал «Просмотр Страницы».

Активируем тег перед тегом Яндекс Метрики

В YTM же мы тоже должны обратиться к каталогу шаблонов.

Жмём «Добавить тег»

Там мы и найдём этот инструмент.

Находим Вариокуб в шаблонах тегов

Теперь нам останется только указать идентификатор пользователя Метрики в правильном формате metrika.XXXXXX, где XXXXXX – это ID счётчика Метрики.  А в качестве триггера выбрать «Инициализация», который мы предусмотрительно создали ещё в самой первой статье.

Устанавливаем Вариокуб на сайт

Этот вид триггера рекомендован в самом руководстве от разработчиков. А значит именно его и нужно использовать.

Что же, на этом главу по интеграции сторонних сервисов через YTM объявляю закрытой и предлагаю перейти к завершающей статье – настройке более специфический целей.