Серверний CAPI & відстеження подій

Оминайте блокувальники реклами й обмеження ITP, спрямовуючи трафік MousePlayer через власний серверний контейнер GTM першої сторони, і відстежуйте глибоку аналітику електронної торгівлі.

1. Огляд режимів відстеження

MousePlayer V2 пропонує потужний маршрутизатор подій, який дає змогу керувати потоком даних із браузера користувача на наші сервери. Можна вибрати один із трьох режимів:

  • Лише веб (за замовчуванням): Передає всі дані через WebSocket безпосередньо до MousePlayer. Найкраще для живого перегляду в реальному часі, але вразливо до агресивних блокувальників реклами.
  • Гібридний режим: Найкраще з обох підходів. Надсилає легкі координати миші й прокручування через WebSocket для плавного живого перегляду, а великі зміни DOM і власні події об’єднує в пакети й безпечно спрямовує через ваш серверний GTM за допомогою HTTP POST.
  • Лише CAPI: 100% пакетування HTTP POST. Максимальна приватність, жодних WebSocket, повністю на вашому боці першої сторони. Примітка: у цьому режимі живий перегляд вимкнено.

2. Налаштування Google Tag Manager (рекомендовано)

Найпростіший спосіб реалізувати гібридний режим чи режим лише CAPI — скористатися офіційними шаблонами спільноти GTM. Завантажте наведені нижче файли .tpl й імпортуйте їх до робочих просторів GTM.

Завантажити шаблони:

↓ Web GTM: тег MousePlayer SDK

↓ Server GTM: клієнт приймання MousePlayer

↓ Server GTM: тег конектора MousePlayer

Крок 1: налаштуйте серверний клієнт & тег

У серверному контейнері GTM імпортуйте шаблон клієнта приймання. Налаштуйте прослуховування власного шляху, наприклад /mp_capi. Потім імпортуйте тег конектора, налаштуйте його спрацювання для події mouseplayer_batch і розгорніть контейнер.

Крок 2: налаштуйте вебтег GTM

У вебконтейнері GTM імпортуйте тег SDK. Виберіть «Конфігурація й ініціалізація» як тип тега, уведіть Channel ID, виберіть гібридний режим і вставте URL кінцевої точки ssGTM, наприклад https://metrics.yourdomain.com/mp_capi.

3. Ручне встановлення (без GTM)

Якщо ви хочете прописати скрипт у коді, визначте об’єкт window.mp_config перед завантаженням фрагмента коду відстеження.

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. Відстеження воронки електронної торгівлі

Відстежуйте весь шлях клієнта. Стандартні назви подій дають MousePlayer змогу автоматично створювати наочні звіти воронки електронної торгівлі в робочому просторі проєкту. Усі події повністю сумісні з режимами CAPI й «Лише веб».

1. view_item

Запускайте цю подію, коли користувач переглядає сторінку певного товару.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

Запускайте цю подію, коли користувач додає товар до кошика.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

Запускайте цю подію, коли користувач переходить до екрана оформлення замовлення.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

Запускайте цю подію після успішної оплати чи підтвердження замовлення.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. Власні події & залучення лідів

Ви не обмежені електронною торгівлею. Відстежуйте надсилання форм, підписки на розсилку чи власні взаємодії, притаманні вашому вебзастосунку.

Залучення лідів (надсилання форми)

Запускайте цю подію, коли користувач успішно надсилає контактну форму чи запитує цінову пропозицію.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

Власна взаємодія інтерфейсу

Зрозумійте, як користувачі взаємодіють зі складними елементами: калькуляторами, модальними вікнами чи перемикачами вкладок.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. Обмеження параметрів & рекомендації

Типізація даних: MousePlayer автоматично визначає типи параметрів. Надсилайте числа як цілі чи дробові числові значення, наприклад 150.00, а не "150.00", щоб увімкнути розширене числове фільтрування (наприклад, «Ціна > 100») на панелі показників.

Правило Опис
Довжина назви події Щонайбільше 128 символів. Для найкращої читабельності використовуйте snake_case, наприклад user_signup.
Довжина ключа параметра Щонайбільше 64 символи в назві ключа, наприклад transaction_id.
Рядкові значення Текстові параметри обрізаються до 255 символів для оптимальної продуктивності бази даних.
Приватність даних Не надсилайте дані, що дають змогу ідентифікувати особу (PII), як-от необроблені електронні адреси, справжні імена чи паролі, як параметри подій.