Застосування селекторів CSS у Google Tag Manager

Селектори в GTM

Що таке селектори CSS і як їх застосовувати в Google Tag Manager

У випадку, коли необхідно налаштувати відстеження кліка по якому-небудь елементу на веб-сторінці, а у цього елемента немає ідентифікуючих його атрибутів, таких як, наприклад, ID, class або URL, задачу відстеження можна вирішити за допомогою селекторів CSS. Також, використовуючи селектори CSS, можна отримати додаткову інформацію, пов’язану з елементом, над яким відбулося певне подія або відстежити клік по батьківському елементу, що має вкладену структуру. Селектор CSS — це опис елемента або групи елементів веб-сторінки. Застосовувати селектори CSS у GTM можна для визначення умов у триггерах, а також у користувацьких змінних типу “Елемент DOM” та “Власний код JavaScript”. Для того, щоб використовувати селектори CSS у триггерах, у налаштуваннях необхідно вибрати Click Element або Form Element.

Види селекторів CSS

Розглянемо основні види селекторів CSS: p, div, span — селектори, що описують теги. Селектор, який починається з символу “#”, описує елемент, що містить відповідний атрибут id. Наприклад:

<div id="form1">…</div>

де селектор #form1 вказує на цей div. Селектор, який починається з символу “.”, описує елемент, що містить відповідний class. Наприклад:

<div class="form-container">…</div>

де селектор .form-container вказує на цей div. За допомогою селектора div можна вибрати всі елементи div на сторінці. А за допомогою селектора “*” — взагалі всі елементи (<p>, <a>, <div>, <span> і т.д.). Селектори можна комбінувати, записуючи послідовно, без пробіла. Наприклад, конструкцію <div class="form-container"> можна описати за допомогою комбінованого селектора div.form-container, що дозволяє вибрати всі div на сторінці з класом form-container. Комбіновані селектори дозволяють точніше ідентифікувати потрібні вам елементи. Якщо по відношенню до кількох елементів з різними селекторами необхідно застосувати одне й те саме дію, їх селектори можна записати послідовно через кому.

Приклади

Розглянемо приклади.

Приклад 1

selektory-v-google-tag-manager1

Для того, щоб відстежити клік по кнопці “замовити”, потрібно прив’язатися до якогось атрибута цієї кнопки. Але атрибутів, по яких цю кнопку можна однозначно ідентифікувати, немає. Тому нам слід використовувати селектор CSS:

#gform_1 [type="submit"]

який через унікальний ідентифікатор форми #gform_1 дозволяє однозначно визначити потрібну кнопку. Тоді триггер буде виглядати таким чином:

selektory-v-google-tag-manager2

Приклад 2

Розглянемо приклад використання селекторів CSS у змінних.

selektory-v-google-tag-manager3

Для того, щоб у разі звернення користувача до вкладки “Від чого залежить вартість ремонту?”, передати це значення в Analytics, можна скористатися змінною типу “Елемент DOM”. У параметрі “Метод вибору” потрібно вказати “Селектор CSS”.

selektory-v-google-tag-manager4

Селектор у цьому випадку буде виглядати наступним чином:

#question4 .title

Тут видно, що через елемент з id “question4” йде звернення до дочірнього з класом “title”. Далі цю змінну можна передавати, наприклад, як атрибут події при виконанні кліка по необхідній вкладці.

selektory-v-google-tag-manager5

Приклад 3

При налаштуванні динамічного ремаркетингу з використанням GTM, у ситуації, коли неможливо втручатися в код сайту, іноді можна скористатися селекторами CSS. Для того, щоб налаштувати динамічний ремаркетинг, нам необхідно організувати передачу даних про ID товару з картки товару. Водночас цей ID має збігатися з ідентифікатором відповідного товару у фіді.

selektory-v-google-tag-manager6

Наприклад, для карток товарів, що містять значення артикулу в теге <span> з класом “_product-code__sku”, цей артикул можна отримати, створивши змінну “Елемент DOM” і вказавши відповідний селектор CSS у конфігурації змінної.

selektory-v-google-tag-manager7
#product-code ._product-code__sku

Далі цю змінну можна передавати як значення dynx_itemid при налаштуванні тега динамічного ремаркетингу.

selektory-v-google-tag-manager8

Відносиги між елементами

Усі елементи веб-сторінки являють собою ієрархію. Одні теги можуть містити багато інших тегів. Така структура передбачає різні рівні вкладеності елементів (прямий нащадок, непрямий нащадок, праві сусіди). За допомогою селекторів CSS можна описувати відносини між елементами. Розглянемо види відносин.

selektory-v-google-tag-manager9

Відношення “Предок-потомки”

На скріншоті видно, що перший div є предком для всіх тегів <p> в ньому. Щоб описати це відношення, потрібно використовувати селектор div p, який вибирає всі теги <p>, що знаходяться всередині батьківського <div>. Символ пробілу грає роль переходу на наступний рівень вкладеності.

Відношення “Предок – прямий потомок”

Якщо теги <p> знаходяться безпосередньо всередині <div>, то це прямі нащадки, і таку зв’язок можна описати через селектор div > p.

Праві сусіди

Сусідніми елементами називаються ті, що знаходяться на одному рівні вкладеності. За допомогою селекторів можна знайти всі сусідні елементи після визначеного. Наприклад, селектор #first_div ~ div вказує на всі елементи div, що є правими сусідами для #first_div.

Селектори на атрибут

Цей вид селекторів дозволяє звертатися до елементів з певним атрибутом. Наприклад, щоб вибрати елемент з атрибутом name=”mail”, використовуємо селектор:

[name="mail"]

Щоб вибрати елементи, які містять атрибут name, можна використовувати селектор:

input[name]

Щоб вибрати елемент, значення атрибута якого починається з певної підстроки, використовуємо селектор:

[attr^="val"]

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

[attr$="val"]

Псевдокласи

Псевдоклас — тип селекторів, що ідентифікують елементи за певними ознаками. Наприклад, для того, щоб вказати на вибраний пункт з випадаючого списку, використовується псевдоклас :selected.

До псевдокласів можна віднести наступні ознаки:

  • :empty — без нащадків;
  • :checked, :selected, :disabled, :enabled — різні стани елементів input;
  • :hover — елемент, під курсором миші;
  • :visited — вже відвідані посилання.

Використання функцій jQuery для пошуку елементів

При налаштуванні деяких подій у GTM може виникнути ситуація, коли необхідно отримати додаткову інформацію, пов’язану з елементом, над яким відбулося це подія. Наприклад, при натисканні на кнопку “купити” потрібно отримати назву товару, до якого ця кнопка належить. Часто буває так, що додаткові дані знаходяться в структурі інших елементів, які логічно пов’язані з розглядуваним елементом, але доступ до них неможливо отримати через селектори CSS. При роботі, наприклад, з інтернет-магазинами може виникнути задача передавати подію кліка по кнопці “купити” з прив’язкою до того товару, якому відповідає ця кнопка. Наприклад, при кліку на кнопку “купити” (1), яка заключена в теги <a> з класом j-buy-button-add (3), потрібно отримати назву відповідного товару. Як ми бачимо, безпосередньо в теге кнопки немає опису товару. Але потрібне нам описання є в посиланні контейнера div з класом catalogCard-title (2). Тег з потрібним назвою і кнопка “купити” знаходяться на різних рівнях ієрархії, тому тільки селекторами CSS тут не обійтися.

10

В такому випадку можна скористатися функціями бібліотеки jQuery. jQuery — це бібліотека JavaScript, яка допомагає отримати доступ до будь-якого елемента на сторінці, звертатися до їх вмісту і атрибутів, маніпулювати ними. jQuery фокусується на взаємодії JavaScript та HTML, тому звертатися до елементів через jQuery можна за допомогою селекторів CSS. Для того, щоб використовувати цю бібліотеку, потрібно переконатися, що вона підключена на сайті. Розглянемо основні функції пошуку елементів.

  • .closest(selector) — повертає перший елемент, що відповідає вказаному селектору, і є батьківським для розглядуваного елемента;
  • .parents(selector) — повертає всіх предків (що відповідають необов’язковому параметру selector) щодо заданого елемента;
  • .find(selector) — повертає дочірні елементи, що відповідають вказаному селектору всередині вибраного елемента;
  • .siblings([selector]) — повертає всі елементи (що відповідають необов’язковому параметру selector), що є сусідами для вибраних елементів.

Розглянемо функції фільтрації набору елементів:

  • .first() — повертає перший елемент у наборі;
  • .last() — повертає останній елемент у наборі;
  • .not(selector) — виключає з набору ті елементи, що відповідають вказаному селектору.

Щоб звернутися до певного елемента через селектори CSS, слід створити об’єкт jQuery, що приймає цей селектор. Наприклад, конструкція виду $('.my-class') буде відповідати за пошук усіх елементів з класом my-class. Виклик функцій jQuery відносно вибраного елемента здійснюється таким чином: $('.my-class').siblings('div') — ця конструкція поверне всі сусідні контейнери div відносно елемента з класом my-class.

Повертаємося до нашого прикладу. Створюємо змінну типу “Власний код JavaScript”.

selektory-v-google-tag-manager11

Точкою відліку для пошуку назви товару є об’єкт, що відповідає кнопці “купити”. Об’єкт $('.j-buy-button-add') поверне безліч усіх кнопок на сторінці замість однієї, по якій відбувся клік. Щоб знайти об’єкт, що відповідає такій кнопці, потрібно звернутися до конструкції виду:

$(window.event.target)

Далі за допомогою функції .closest() знаходимо найближчого спільного батька для посилання з назвою товару та розглядуваної кнопки “купити”. Це контейнер з класом catalogCard-info. Потім всередині останнього знаходимо саму посилання з назвою, використовуючи функцію .find(), що приймає селектор .catalogCard-title > a. За допомогою функції .html() ми можемо отримати вміст зазначеного елемента. Кінцевий варіант можна представити виразом:

$(window.event.target).closest('.catalogCard-info').find('.catalogCard-title > a').html();

Далі цю змінну можна передавати, наприклад, як атрибут події при виконанні кліка по кнопці “купити”. Це допоможе розділяти товари, до яких відносяться ці кліки.

selektory-v-google-tag-manager12

Перевірка коректності складених CSS-селекторів

Перед тим як використовувати селектори в GTM, ви можете перевірити правильність складених конструкцій у консолі браузера. Щоб перейти до консолі, потрібно виконати такі дії:

  1. Відкрити панель інструментів для веб-розробників (через додаткові інструменти браузера або натиснувши клавішу F12).
  2. Перейти на вкладку Console. У ній можна вводити команди на JavaScript.

Перевірити коректність складених CSS-селекторів можна двома способами:

1. Через об’єкт бібліотеки jQuery

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

$('a[href^="http"]').not('[href*="odesseo.com.ua"]')

Приклад:

Припустимо, на сторінці odesseo.com.ua нам потрібно знайти всі посилання, які ведуть на зовнішні ресурси. Для цього використовуємо вищенаведене вираження.

Виклик об’єкта jQuery із застосуванням функції .not() повертає п’ять результатів. Це ті посилання, які починаються з протоколу HTTP/HTTPS, але не містять підрядок “odesseo.com.ua”.

selektory-v-google-tag-manager16

2. За допомогою функції JavaScript querySelectorAll()

selektory-v-google-tag-manager15

Ця функція також приймає CSS-селектори як аргумент. У консолі потрібно ввести вираз такого виду:

document.querySelectorAll('a[href^="http"]:not([href*="odesseo.com.ua"])')

Приклад:

Для завдання з пошуку зовнішніх посилань на сторінці можна використовувати цей код.

selektory-v-google-tag-manager17

Ці два способи дозволяють перевірити коректність ваших селекторів CSS у консолі браузера перед використанням їх у Google Tag Manager.

Дякую за увагу! 🙂