Starting a new project?
отримати консультацію
Залиште свої контактні дані, наш менеджер передзвонить вам.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
| 1. document.querySelectorAll() |
| 2. JSON.parse() |
| 3 .split() and decodeURIComponent() |
| 4. Витягти ціну зі сторінки |
| 5. Повернути X або Y |
| Висновок |
Стаття - переклад публикації analyticsmania.com
Навіть якщо ти проскілований користувач GTM, завжди є щось, чого не знаєш, а шукати відповіді при великому завантаженні довго та нервує.
Такі поняття як JavaScript, об'єктна модель документа (DOM) тощо – складні теми, їх не поясниш в одній статті. Все ж таки, хочу дати кілька готових до застосування порад, які заощадять час у роботі з GTM. Сподіваюся, вони й вам допоможуть. Поїхали.
Припустимо, потрібно відстежувати кліки по конкретним елементам на сторінці (пунктах меню). Ці посилання не мають ідентифікаторів, тому є два варіанти:
Тоді створюємо селектор, який працює з усіма необхідними елементами. Виникає 2 питання:
Рішення: введіть document.querySelectorAll(). Цей метод покаже список всіх елементів, які відповідають вашому селектору CSS. Якщо він повертає занадто багато елементів, то потрібно зробити свій селектор більш конкретним.
Випробувати це можна в JS консолі розробника вашого браузера. Введемо туди таку команду:
Рис. 1 – Команда для показу елементів, що відповідають селектору
Замініть текст your_css_selector на ім’я вашого селектора. У моєму випадку це .site-nav__link.
Тиснемо Enter та бачимо список всіх елементів на сторінці, які використовують цей клас. У наведеному нижче прикладі 5 елементів. Це можна сказати за номером поряд з NodeList, і якщо я клацну трикутник поряд з ним, побачу список всіх елементів HTML, які використовують цей CSS-клас site-nav__link).
Рис. 2 – NodeList
Якби метод повернув більше елементів, мені довелося б зробити свій селектор точнішим.
Іноді лише на рівні даних можуть бути перетворення даних. Але вони зберігаються як рядок, а не як об’єкт (ми знаємо, що це рядок, тому що він стоїть у лапках).
Що робити, якщо хочете отримати доступ тільки до певного ключа з цього рядка, наприклад 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
Тобто наприкінці приписуєте ім’я того ключа, до якого хочете отримати доступ.
Припустимо, я хочу отримати частину 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, але в цьому посібнику я поясню цей.
Одним зі способів вилучення частини тексту (рядка) є використання методу split(). Вказуємо йому знак для поділу, а потім він повертає масив з усіма рядками.
У консолі розробника браузера введіть команду:
Рис. 10 – Метод split()
window.location.href повертає повний урл, який ви бачите в адресному рядку браузера.
.split (‘/’) означає, що ця URL буде розбита на кілька рядків (текстів) щоразу, коли буде виявлена коса риса (/). У цьому випадку метод поверне масив із 6 елементів:
Рис. 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
І тепер його можна застосовувати в будь-якому потрібному вам тезі.
Допустимо, ви відстежуєте конверсії та бачите ціну, що відображається на сторінці Підтвердження замовлення. Як використовувати це у своїх тегах? Одним із способів може бути вилучення за допомогою змінної користувача.
Хоча це не рекомендується (робота з рівнем даних надійніша), в деяких випадках може не бути іншого варіанту.
Метод отримання ціни залежить від того, як вона відображається на сторінці. Це 12,000.00 долларов США? А може, 12 доларів? А може, ще щось? Остаточний код залежить від того, як показується ціна (всі варіанти описані в цьому пості).
Остання порада цієї статті пов’язана із застосуванням кількох змінних. Припустимо, після успішної оплати користувача перекидає на іншу сторінку, щоб підтвердити замовлення. URL-адреса виглядає так: https://www.mysite.com/thanks/?order_id=123abc.
Наприклад, ви бажаєте надіслати цей ідентифікатор до Google Реклами. Можна сказати: створіть змінну URL-адресу та використовуйте її в тезі. Це правильно.
Але що, якщо ваш сайт запрограмований інакше? На деяких сторінках підтвердження замовлення ідентифікатор знаходиться в URL-адресі, але на інших цей ідентифікатор знаходиться на рівні даних.
В результаті у вас залишиться дві змінні: змінна URL та змінна рівня даних. Обидві можуть містити однакову інформацію, але в основному на сторінці підтвердження буде доступна та чи інша.
Як вказати Диспетчеру тегів використовувати ту чи іншу змінну? Відповідь – ЗК JavaScript. Код досить простий:
Рис. 16 – Код вибору змінної
|| означає АБО. Таким чином ви інструктуєте ЗК повертати першу доступну змінну. Якщо її не визначено (читати: недоступна), метод спробує повернути другу змінну. Якщо вона також недоступна, змінна поверне значення undefined.
Якщо будете пробувати самі, замініть {{змінну 1}} та {{змінну 2}} на актуальні імена ваших змінних.
Рис. 17 – Код із нашими змінними
Ось так виглядатиме код у нашому випадку.
Сподіваюся, хоча б деякі з цих швидких порад навчили вас чогось нового. З них найпопулярніший метод у моєму стеку – document.querySelectorAll(). Ним я постійно перевіряю, чи не повертають мої умови небажані елементи.
А чим ви користуєтеся? Поділіться у коментарях!
Нагадую, в моєму Телеграм-каналі найновіша інформація щодо контекстної реклами, SEO, ASO, аналітики та digital marketing.
Ви вже підписані на нашу розсилку!
Підтвердіть свій email для завершення підписки.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.