🖥Тестирование тригеров GTM

Если вы занимаетесь тестированием веб-сайтов, то, вероятно, вам приходилось тестировать триггеры в Google Tag Manager и отправлять события аналитики.

Почему это важно? Дело в том, что большинство таких событий имеют прямое отношение к маркетингу. Маркетологи используют различные метрики продаж, чтобы понять, как лучше продавать. В общем, это напрямую связано с деньгами.💸

Как тестировать события❕❕

1⃣ для ручного тестирования и самый удобный способ это использовать https://tagassistant.google.com/
Там просто вставляете url, и проходите тест кейсы, а в другом окне наблюдаете события (рекомендуем)

2⃣ Использовать консоли разработчика
все события пушится в переменную dataLayer

3⃣ Тестирование через Network-панель браузера, можно наблюдать был ли отправлен запрос на нужный сервер (например, на сервер Google Analytics).


Для автоматизированного тестирования на Playwright, вы можете использовать несколько подходов👇

*️⃣ отслеживание через запросы

test('Track network request and verify payload', async ({ page }) => {
  await page.goto('https://your-website.com');

  // Перехват и проверка сетевых запросов
  const [response] = await Promise.all([
    page.waitForResponse(response => response.url().includes('www.google-analytics.com/collect') && response.status() === 200),
    // Выполняем действие на странице, которое должно вызвать запрос
    page.click('button')
  ]);

  const requestPayload = JSON.parse(response.request().postData());

  expect(requestPayload).toHaveProperty('event', 'yourExpectedEvent');
  expect(requestPayload).toHaveProperty('gtm', 'expectedGtmId');
});

*️⃣проверка данных в dataLayer

test('Check dataLayer for specific event', async ({ page }) => {
  await page.goto('https://your-website.com');

  // Выполняем действие на странице
  await page.click('button#yourButton');

  // Получаем значение dataLayer из контекста страницы
  const dataLayer = await page.evaluate(() => window.dataLayer);

  // Проверка, что dataLayer содержит ожидаемое событие
  const eventData = dataLayer.find(event => event.event === 'yourExpectedEvent');

  expect(eventData).not.toBeNull();
  expect(eventData).toHaveProperty('gtm', 'yourExpectedGtm');
});

Отслеживание сетевых запросов через Network-панель полно и надежно, но тесты получаются менее стабильны. Проверка данных в dataLayer проста и быстро настраивается, но может пропускать события при перезагрузке страницы или изменениях в dataLayer.

Ставьте 👍 👎


Теги: #testing #playwright #automation #dataLayer #GTM #тестирование #разработка