CSS-селектори в Google Tag Manager
Будь-який фахівець, що працює з трафіком, знає, як важливо відстежувати цільові дії на сайті, тим самим вимірюючи ефективність даного трафіку. Найчастіше такими діями є транзакції або заповнення форм, але також буває необхідність задавати як цілі й відстежувати наприклад, кліки з якихось елементів сайту.
Але іноді у даних елементів немає будь-яких чітких ознак, за якими можна задати тригер відпрацювання події в Google Tag Manager, й ось тоді-то і приходять на допомогу знання CSS-селекторів. Крім того, вони можуть допомогти у відстеженні форм. У даній статті ми розглянемо найбільш корисні для роботи фахівця по контекстній рекламі, CSS-селектори.
CSS-селектори
Селектори були задумані для того, щоб визначати, до якого елементу на сторінці застосовувати потрібні стилі, проте вони також дають можливість задати тригер, який буде активувати певний тег у Google Tag Manager.
Щоб поставити такий тригер, наприклад, для відстеження кліків за елементом, потрібно створити новий тригер в Google Tag Manager, в ньому вибрати тип тригера (в даному випадку «Клік – Всі елементи»), задати умову активації «Деякі кліки», вибрати зі списку «Click Element» (також, при необхідності, можна використовувати «Form Element») і опцію «відповідає селектору CSS», після чого поставити у поле CSS-селектор.
Згодом даний тригер можна додавати як активатор тегів у Google Tag Manager.
Про те, які селектори можна застосовувати, ми і поговоримо далі.
1. tag – селектор за тегом HTML. У прикладі нижче селектор ul вкаже на відповідний тег ul.
2. .class – Cелектор за класом. У прикладі нижче при використанні селектора .selected-class будуть обрані другий і третій елементи.
3. #id – селектор за ідентифікатором елементу. Варто відзначити, що ідентифікатори повинні бути унікальні на сторінці і не можуть повторюватися для інших елементів. У нашому прикладі використання селектора #third вибере тільки третій елемент списку.
4. element [attr] – селектор за атрибутом елементу, який вибере всі елементи, які мають його. Дана група селекторів допомагає вибрати елементи з заданими властивостями або значеннями. У прикладі нижче селектор a [target] вкаже на посилання з текстом Two і Four.
Також селектор за атрибутом може приймати конкретні значення, серед найбільш популярних:
– element [attr = value] – селектор, значення атрибута якого дорівнює заданому value. У нашому прикладі таким може бути a [href = “http://supersite.ua”], який вкаже на посилання з текстом One.
– element [attr ^ = value] – селектор, значення атрибута якого починається з позначеного value. У нашому прикладі таким може бути a [href ^ = “https”] – вибере посилання c текстом Four.
– element [attr $ = value] – селектор, значення атрибута якого закінчується на позначене value. У наведеному вище прикладі таким може бути a [href $ = “ua”] – вибере посилання з текстом One і Four.
Комбінатори
Крім базових селекторів, які ми розглянули вище, також можна використовувати комбінації селекторів, які можуть дати більше гнучкості і можливостей у виборі необхідного елемента на сторінці. Розглянемо приклади їх використання:
1. element1, element2 – вибере обидва позначених елементи, таким чином, можна вибрати відразу кілька елементів на сторінці. При використанні селектора img, a будуть обрані перший і останній теги з прикладу нижче:
2. element1 element2 – селектор, що містить елементи, записані через проміжок, вибере всі element2, які знаходяться всередині element1 незалежно від рівня вкладеності. Так, в прикладі нижче при використанні селектора div a будуть обрані теги <a> з текстом Two і Three.
3. element1> element2 – відмінність від попереднього полягає в тому, що element2 повинен бути безпосереднім нащадком element1 (перебувати на першому рівні вкладеності всередині element1). На прикладі з минулого пункту: селектор div> a вкаже тільки на посилання з текстом Three, оскільки посилання з текстом Two не є прямим нащадком тега <div>.
4. element1 + element2 – вибере element2 у разі, коли він знаходиться відразу після element1 на одному рівні вкладеності, тобто обидва елементи мають один батьківський елемент. Наприклад, при використанні селектора # first-item + li буде обраний елемент списку з текстом Two.
5. element1 ~ element2 – селектор для вибору всіх елементів, які відповідають селектору element2 і при цьому перебувають на одному рівні вкладеності з елементом, який має селектор element1. У прикладі з минулого пункту використання селектора # first-item ~ li вкаже на елементи списку з текстом Two і Three.
Псевдокласи
В CSS є таке поняття, як псевдокласи, які дозволяють вибирати і маніпулювати елементами на сторінці, навіть якщо вони не мають окремих характерних ознак. Розглянемо на прикладах, які з псевдокласів можуть бути корисні в роботі з Google Tag Manager.
За основу візьмемо знайомий вже список:
1. element: first-child – дозволяє вибрати елемент, який знаходиться першим у батьківському елементі. В наведеному вище прикладі селектор li: first-child вкаже на елемент з текстом One.
2. element: last-child – допомагає вибрати елемент, який знаходиться останнім у батьківському елементі. У нашому прикладі селектор li: last-child вкаже на елемент з текстом Four.
3. element: nth-child () – дає можливість досить гнучко вибирати елементи, які знаходяться в одному батьківському елементі. Наприклад, в нашому випадку селектор li: nth-child (2n + 1) вкаже на всі непарні елементи li, таким чином будуть обрані елементи списку з текстом One і Three. Парні елементи описуються конструкцією li: nth-child (2n) .Також можна застосувати li: nth-child (2), в такому випадку буде обраний тільки другий елемент списку з текстом Two.
4. element: not () – може бути досить корисним у деяких випадках. У дужках приймає простий селектор. Результатом застосування буде вибір елементів, які не містять в собі селектор, позначений в дужках. У прикладі нижче при використанні селектора li: not (.noSelect) будуть обрані всі елементи списку, крім третього, який має клас noSelect.
Таким чином, ми розглянули основні селектори, які можуть бути корисні при відстеженні цільових дій на сайті за допомогою Google Tag Manager, що може істотно полегшити налаштування тегів відстеження.
