Element Visibility (Доступність елементу) в GTM: полезняшка для РРС-спеціалістів

Тетяна Томенко

Head of PPC Department

Подобається

Содержание статьи
Налаштування трігера для відстеження видимості елементів на сайті

Під час налаштування контекстної реклами спеціалісти нашої команди стикаються з тим, що теги GTM, що налаштовані на відправку форми, іноді не спрацьовують (наприклад, ті, що використовують ajax). Відстежувати натискання на кнопку вже не комільфо, тому поява в Google Tag Manager тригера типу Element Visibility (Доступність елементу) - просто вишенька на торті.

Тригер такого типу запускається кожен раз, коли вказаний вами елемент відображається у вікні перегляду браузера.

Завдяки йому в Google Analytics можна відстежити появу повідомлень:

успішна відправка форми;
помилка при відправленні форми;
поява спливаючого вікна;
перегляд відгуків, коментарів;
перегляд банерів з акціями;
перегляд блоку контактів та ін..

Налаштування трігера для відстеження видимості елементів на сайті

Обираємо тип тригера:

Блог_доступность

Налаштовуємо поля тригеру:

Блог_доступность

Обираємо Метод вибору: за допомогою атрибуту ID або за допомогою вказівки CSS.
Ідентифікатор ID – тригер спрацьовуватиме при перегляді певного CSS селектора.
Очевидна відмінність між ними полягає в тому, що ви можете додати кілька селекторів елементів в строку селектора CSS через кому.

Тригер може спрацьовувати, коли ми бачимо кожен з них у вікні браузера.

Порада.
Селектор ідентифікаторів ID працює краще, якщо у вас є тільки один елемент для відстеження.
Визначаємо Правила запуску тригера:

Один раз на сторінку – тригер запускатиметься тільки на поточній сторінці, коли перший елемент відповідає ідентифікатору або рядок селектора входить до області перегляду.

Один раз на елемент – тригер спрацює один раз для ідентифікатора, але кілька разів для селектора. Для групи тригер спрацює один раз для кожного селектора.

З кожною появою елемента на екрані: тригер постійно спрацьовуватиме на певному елементі.

Додаткові налаштування:

мінімальний відсоток видимості – вказуємо, на скільки відсотків елемент повинен відобразитися, щоб тригер спрацював;
мінімальчий час видимості – вказується, як довго елемент в мілісекундах повинен бути в полі зору відвідувача;
реєстрація змін DOM. Налаштування відстежує елементи, котрих спочатку немає на сторінці (наприклад, спливаючі форми). Якщо ваш контент вставляється динамічно, то поставте галочку, і такі елементи стануть видимі.

Як приклад візьмемо відправку заповненої форми для замовлення подарункового сертифікату. Для цього нам потрібно створити тригер з типом “Доступність елементу” і тег, що передаватиме дані до Google Analytics, коли користувач побачить повідомлення про успішну відправку форми.

Форма на сайті:

Блог_доступность

Перегляд коду на панелі розробника:

Блог_доступность

У нашому прикладі ми можемо налаштувати тригер і на ідентифікатор ID, і на селектор CSS (двома способами).

За ID:

Блог_доступность

За селектором CSS (перший спосіб):

Блог_доступность

Зверніть увагу, що атрибут записується до GTM з точкою перед назвою класу.

За селектотом CSS (другий спосіб): За допомогою правої кнопки миші обираємо опцію Копіювати селектор та просто вставляємо в потрібне поле.

Блог_доступность

Далі налаштовуємо тег для передачі дани до Google Analytics.
Тип тригера: Universal Analytics.
Тип відстеження: Подію, Категорію та Дію називаємо на ваш розсуд.

У нашому випадку до тестування додані позначення ID та dot.

Блог_доступность

За цим же прикладом створені ще 2 тригери за селектором CSS. На кожен зі способів.
Перевіряємо в режимі попереднього перегляду GTM та в режимі реального часу Google Analytics, як спрацьовують наші тригери та теги.

Блог_доступность