5 просунутих порад щодо використання GTM

1. document.querySelectorAll()

Припустимо, потрібно відстежувати кліки по конкретним елементам на сторінці (пунктах меню). Ці посилання не мають ідентифікаторів, тому є два варіанти:

• реалізувати їх через розробника;
• або використовувати селектори CSS.

Тоді створюємо селектор, який працює з усіма необхідними елементами. Виникає 2 питання:

1. Як бути впевненим, що селектор правильний і працюватиме лише з тими елементами, які хочете відстежувати?
2. Як бути впевненим, що селектор CSS не поверне будь-який незв’язаний елемент (наприклад, посилання нижнього колонтитула або посилання на бічній панелі)?

Рішення: введіть document.querySelectorAll(). Цей метод покаже список всіх елементів, які відповідають вашому селектору CSS. Якщо він повертає занадто багато елементів, то потрібно зробити свій селектор більш конкретним.

Випробувати це можна в JS консолі розробника вашого браузера. Введемо туди таку команду:

Рис. 1 – Команда для показу елементів, що відповідають селектору

Замініть текст your_css_selector на ім’я вашого селектора. У моєму випадку це .site-nav__link.

Тиснемо Enter та бачимо список всіх елементів на сторінці, які використовують цей клас. У наведеному нижче прикладі 5 елементів. Це можна сказати за номером поряд з NodeList, і якщо я клацну трикутник поряд з ним, побачу список всіх елементів HTML, які використовують цей CSS-клас site-nav__link).

Рис. 2 – NodeList

Якби метод повернув більше елементів, мені довелося б зробити свій селектор точнішим.

2. JSON.parse()

Іноді лише на рівні даних можуть бути перетворення даних. Але вони зберігаються як рядок, а не як об’єкт (ми знаємо, що це рядок, тому що він стоїть у лапках).

Що робити, якщо хочете отримати доступ тільки до певного ключа з цього рядка, наприклад form_id? Використовувати строкові методи та аналізувати текст довго й не потрібно.

Якщо є об’єкт (читай: складна структура), що зберігається у вигляді рядка (читай: простий текст), є зручний метод JSON.parse(). Він бере цей рядок та повертає проаналізований об’єкт. Це дозволяє швидко отримати необхідний ключ від об’єкту.

Наприклад, припустимо, що відстежуєте відправку форм, і це ті дані, що у вас є на Thank-you-page на рівні даних:

Рис. 3 – Код дзвінка API для надсилання форми

Вирішити цю проблему можна створенням змінної рівня даних, яка повертає рядок. Я назвав цю змінну dlv – formData.

Рис. 4 – Змінна рівня даних

Потім створіть змінну JavaScript (ЗК), яка буде передавати змінну рівня даних методу JSON.parse().

Рис. 5 – Код ЗК

Важливо: ім’я змінної рівня даних у коді має бути ТОЧНО таким самим, як ви назвали змінну рівня даних в інтерфейсі GTM.

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

Рис. 6 – Повернутий рядок

Але потім ЗК парсить змінну рівня даних та повертає об’єкт (вже не в лапках).

Рис. 7 – Повернутий об’єкт

А як отримати доступ до певного ключа в цьому об’єкті, наприклад form_id? Потрібно оновити ЗК JS наступним чином:

Рис. 8 – Код доступу до form_id

Я додав .form_id, тому що саме так отримуємо доступ до ключів в об’єкті. Якби я хотів отримати доступ до form_name, код змінної був би таким:

Рис. 9 – Код доступу до form_name

Тобто наприкінці приписуєте ім’я того ключа, до якого хочете отримати доступ.

3 .split() and decodeURIComponent()

Припустимо, я хочу отримати частину URL. URL-адреса виглядає так: https://www.analyticsmania.com/ google-tag-manager-recipes / this-is-a-very-cool-% 26-important-page /? Gtm_debug = x. А я хочу отримати цю частину – this-is-a-very-cool-%26-important-page.

Тут 2 проблеми:

• потрібно якимось чином отримати лише цю частину URL;
• ця частина містить %26. Що це таке та як цього позбутися?

Примітка: є інші методи вилучення частини URL, але в цьому посібнику я поясню цей.

Одним зі способів вилучення частини тексту (рядка) є використання методу split(). Вказуємо йому знак для поділу, а потім він повертає масив з усіма рядками.

У консолі розробника браузера введіть команду:

Рис. 10 – Метод split()

window.location.href повертає повний урл, який ви бачите в адресному рядку браузера.

.split (‘/’) означає, що ця URL буде розбита на кілька рядків (текстів) щоразу, коли буде виявлена коса риса (/). У цьому випадку метод поверне масив із 6 елементів:

• https:
• [пусте місце] – тому що в https:// було два послідовні слеші без будь-якої інформації між ними;
• www.analyticsmania.com;
• google-tag-manager-recipes;
• this-is-a-very-cool-% 26-important-page;
• ? Gtm_debug = x.

Рис. 11 – Повернутий масив рядків після розбиття

Тепер я хочу отримати доступ до 5-го елементу даного масиву, this-is-a-very-cool-%26-important-page. У JavaScript індексування починається з 0, тому індекс 5-го елемента дорівнює 4.

Якщо я хочу отримати доступ до нього, я маю вставити в код [4].

Оновим наш JS-код:

Рис. 12 – Код для вилучення 5 елементу

Він розділить URL-адресу та поверне 5-й елемент у масиві, а на виході отримаємо this-is-a-very-cool-%26-important-page.

Що щодо %26? Це закодований амперсанд (&). Якщо хочете, щоб це відображалось як & замість %26, потрібно буде застосувати метод decodeURIComponent().

Обновимо код JS ще раз:

Рис. 13 – Код вилучення 5-го елемента з перетворенням URL

Тепер він this-is-a-very-cool-&-important-page.

Рис. 14 – Результат роботи методу

Якщо ви хочете використовувати цей код у Менеджері тегів як змінну, створіть ПП з таким кодом (ми вже створили більшу частину цього):

Рис. 15 – Код для GTM

І тепер його можна застосовувати в будь-якому потрібному вам тезі.

4. Витягти ціну зі сторінки

Допустимо, ви відстежуєте конверсії та бачите ціну, що відображається на сторінці Підтвердження замовлення. Як використовувати це у своїх тегах? Одним із способів може бути вилучення за допомогою змінної користувача.

Хоча це не рекомендується (робота з рівнем даних надійніша), в деяких випадках може не бути іншого варіанту.

Метод отримання ціни залежить від того, як вона відображається на сторінці. Це 12,000.00 долларов США? А може, 12 доларів? А може, ще щось? Остаточний код залежить від того, як показується ціна (всі варіанти описані в цьому пості).

5. Повернути X або Y

Остання порада цієї статті пов’язана із застосуванням кількох змінних. Припустимо, після успішної оплати користувача перекидає на іншу сторінку, щоб підтвердити замовлення. URL-адреса виглядає так: https://www.mysite.com/thanks/?order_id=123abc.

Наприклад, ви бажаєте надіслати цей ідентифікатор до Google Реклами. Можна сказати: створіть змінну URL-адресу та використовуйте її в тезі. Це правильно.

Але що, якщо ваш сайт запрограмований інакше? На деяких сторінках підтвердження замовлення ідентифікатор знаходиться в URL-адресі, але на інших цей ідентифікатор знаходиться на рівні даних.
В результаті у вас залишиться дві змінні: змінна URL та змінна рівня даних. Обидві можуть містити однакову інформацію, але в основному на сторінці підтвердження буде доступна та чи інша.

Як вказати Диспетчеру тегів використовувати ту чи іншу змінну? Відповідь – ЗК JavaScript. Код досить простий:

Рис. 16 – Код вибору змінної

|| означає АБО. Таким чином ви інструктуєте ЗК повертати першу доступну змінну. Якщо її не визначено (читати: недоступна), метод спробує повернути другу змінну. Якщо вона також недоступна, змінна поверне значення undefined.

Якщо будете пробувати самі, замініть {{змінну 1}} та {{змінну 2}} на актуальні імена ваших змінних.

Рис. 17 – Код із нашими змінними

Ось так виглядатиме код у нашому випадку.