Міст GTM & міст подій GA4

Поєднання кількісної телеметрії Google Analytics 4 із якісними відтвореннями сеансів MousePlayer завдяки двобічній синхронізації dataLayer та API, сумісним із GA4.

1. Огляд архітектури & можливості

Сучасна вебаналітика часто страждає від принципової ізоляції даних: кількісні платформи, як-от Google Analytics 4, показують, що сталося на сайті, а якісні інструменти відтворення сеансів пояснюють, чому це сталося. Міст MousePlayer GTM & GA4 усуває цей розрив, установлюючи двобічний канал синхронізації в середовищі виконання JavaScript браузера.

Після ввімкнення скрипт відстеження ініціалізує два спеціальні основні модулі:

  • Експортер відтворень сеансів (initGa4SessionBridge): Автоматично передає ідентифікатор активного сеансу запису (mp_session_id) і прямий URL відтворення (mp_session_url) у шар даних сайту, щойно сеанс установлено.
  • Приймач подій GA4 (initDataLayerBridge): Додає обробник до масиву шару даних, не порушуючи його роботу. Будь-яка власна подія електронної торгівлі чи поведінки, передана для GA4, одразу дублюється в аналітичній базі MousePlayer як власна подія (ce) разом з усіма числовими й рядковими параметрами.

Підтримка власного об’єкта dataLayer: Якщо вебзастосунок використовує власну назву масиву JavaScript замість стандартної dataLayer (наприклад, xyzDataLayer), рушій динамічно пристосовується до налаштованого параметра gtm_datalayer_name без ручних змін коду.

2. Стратегічна цінність для бізнесу

Вбудовування посилань відтворення сеансів безпосередньо в корпоративні аналітичні потоки даних дає кілька вагомих операційних переваг:

Можливість для бізнесу Операційний вплив
Оптимізація конверсії (CRO) Дає цифровим аналітикам змогу знаходити точки тертя у воронках конверсії GA4 й одразу відкривати записи користувачів, які покинули кошик на певних кроках оформлення замовлення.
Атрибуція доходу & аудит Транзакції електронної торгівлі з високою цінністю можна перевіряти за точними траєкторіями вказівника, кліками та станами області перегляду, що привели до покупки.
Прискорене технічне налагодження Команди QA можуть безпосередньо зіставляти події винятків JavaScript у GA4 або журнали помилок API з візуальними записами екрана, усуваючи потребу відтворювати помилки вручну.
Розв’язання звернень до підтримки Заявки з ідентифікаторами сеансів дають працівникам підтримки змогу переглянути точне відтворення сеансу клієнта й суттєво скоротити час розв’язання.

3. Посібник із налаштування Google Tag Manager

Щоб отримувати URL відтворення в Google Tag Manager і передавати його до Google Analytics 4, потрібно налаштувати три окремі компоненти GTM:

Крок 1: створіть змінні шару даних

У робочому просторі GTM перейдіть до Змінні → Змінні користувача і створіть дві змінні типу Змінна шару даних:

  • Назва змінної: dlv - mp_session_id • Назва змінної шару даних: mp_session_id
  • Назва змінної: dlv - mp_session_url • Назва змінної шару даних: mp_session_url

Крок 2: створіть тригер активації

Перейдіть до Тригери → Створити та виберіть тип тригера Власна подія. Налаштуйте такі параметри:

  • Назва події: mp_session_ready
  • Цей тригер спрацьовує для: Усіх власних подій

Крок 3: налаштуйте тег події GA4

Створіть новий тег типу Google Analytics: подія GA4, щоб передавати посилання на сеанс у ресурс GA4:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. Налаштування досліджень (власних звітів) у GA4

Після розгортання тега GTM GA4 починає отримувати URL відтворення як параметр події. Щоб аналізувати ці дані у власних звітах досліджень, спочатку зареєструйте параметр як спеціальний параметр.

Реєстрація спеціальних параметрів в адмініструванні GA4

В інтерфейсі Google Analytics 4 перейдіть до Адміністратор → Відображення даних → Спеціальні визначення і натисніть Створити спеціальний параметр:

  • Назва параметра: MousePlayer Session URL
  • Область дії: Подія (або Сеанс, якщо його прив’язано до параметрів рівня сеансу)
  • Параметр події: mp_session_url

Створення дослідження для перегляду сеансів

У розділі Дослідження GA4 створіть нове дослідження Довільна форма, щоб вивчати окремі шляхи користувачів:

  • Рядки: Додайте Event name, Transaction ID (для електронної торгівлі) або Landing page.
  • Стовпці / параметри: Додайте щойно створений спеціальний параметр MousePlayer Session URL.
  • Значення: Додайте Event count або Total users.

Створена таблиця звіту показує прямі клікабельні URL поруч із показниками GA4, даючи змогу миттєво переходити від статистичних відхилень до візуальних відтворень.

5. Додавання URL відтворення до стандартних звітів GA4

Окрім досліджень, спеціальні параметри можна додати до звичайних стандартних звітів GA4, як-от Залучення трафіку, Сторінки й екрани або Покупки в електронній торгівлі, через бібліотеку звітів GA4.

Зміна таблиць стандартних звітів

  1. У GA4 відкрийте будь-який стандартний докладний звіт, наприклад Звіти → Взаємодія → Сторінки й екрани.
  2. Натисніть значок олівця Налаштувати звіт у верхньому правому куті (потрібен доступ адміністратора).
  3. На правій панелі в розділі Дані звіту натисніть Параметри.
  4. Додайте MousePlayer Session URL до списку основних або додаткових параметрів і зробіть його видимим.
  5. Натисніть Зберегти → Зберегти зміни в поточному звіті.

Після збереження будь-який аналітик, що переглядає стандартні таблиці залучення чи конверсії, може додати MousePlayer Session URL як додатковий параметр для негайного візуального вивчення поведінки відвідувачів у стандартних сегментах трафіку.

6. Довідник JavaScript API & сумісності з GA4 / GTM

MousePlayer надає зрозумілий JavaScript API, сумісний із GA4 (зі стандартними командами в стилі gtag()), і загальнодоступний глобальний об’єкт (window.MousePlayer). Це дає розробникам змогу отримувати URL сеансів у консолі, додавати ідентифікатори B2B-клієнтів і вбудовувати посилання відтворення в сторонні служби підтримки чи системи відстеження помилок.

1. Пряме додавання URL відтворення (Intercom / Zendesk / власні мости)

Повний URL відтворення активного сеансу відвідувача можна отримати безпосередньо з консолі браузера чи будь-якого власного скрипту за допомогою window.MousePlayer.getSessionUrl():

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. Задання власних ідентифікаторів B2B-клієнтів (user_id)

Щоб ідентифікувати клієнтів SaaS чи B2B, які увійшли в систему, ви можете передати власний user_id (наприклад, ідентифікатор бази даних, електронну адресу чи UUID) або під час початкового налаштування скрипту, або динамічно під час виконання із синтаксисом GA4:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. Методи асинхронного отримання даних

Для асинхронного отримання метаданих сеансу у власних скриптах керування тегами можна використовувати стандартний синтаксис зворотних викликів GA4:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

Усі згадані тут торговельні марки належать їхнім відповідним власникам. MousePlayer не має ділових відносин із цими постачальниками.