IT-инфраструктура для бизнеса и творчества
Разработка
Natalia Kurinna

Девять CSS-селекторов на заметку начинающему веб аналитику

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

Использование CSS-селекторов в Google Tag Manager — без сомнения, одна из его самых полезных опций. Это дает непревзойденную гибкость, особенно в сочетании с триггерами кликов и форм.

CSS-селекторы позволяют проверять HTML-элемент на соответствие заданному вами селектору. Таким образом, когда вы используете триггер клика или формы, вы можете проверить соответствуют ли встроенные переменные клика или формы определенному селектору, и убедиться, что действие произошло именно с тем элементом, который вам нужен.

Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.

Итак, вы хотите отправлять событие по условию, что клик произошел по определенному HTML-элементу. Чтобы реализовать это, вам потребуется триггер клика или формы. В рамках данного триггера нужно выбрать опцию «Некоторые клики» и добавить свое условие.

Например, приведенный ниже триггер сопоставит элемент, который был нажат, с CSS-селектором и сработает только в том случае, если выбранный элемент является прямым потомком элемента с идентификатором myDiv.

Помимо того, что CSS-селекторы используются для создания триггеров, сами по себе они тоже могут вам очень пригодиться. Разумеется, они нужны в таблицах стилей, но их также можно использовать с такими DOM-методами как querySelector() и querySelectorAll(), а также с matches() (для поддержки кросс-браузерности могут потребоваться некоторые дополнительные настройки).

Ниже перечислены девять CSS-селекторов, с помощью которых вы сможете настроить отслеживание большинства распространенных видов событий для сайта.

1. Общие селекторы

Следующие селекторы используются для точного определения элементов на основе их атрибутов или их позиции в DOM. Их можно комбинировать, размещая один за другим. Например, div[title=”someTitle”][data-gtm-event=”someEvent”] будет соответствовать любому элементу div, который имеет атрибуты title и data-gtm-event.

  • .someClass — соответствует элементу с классом “someClass”, например <div class=”someClass”>.
  • #someId — соответствует элементу с id “someId”, например <span id=”someId”>.
  • element — соответствует любому HTML-элементу с названием “element”. Например, “div” соответствует любому div элементу на странице, а “div#myId” будет соответствовать <div id=”myId”>.
  • element element — соответствует любому HTML-элементу, который является потомком предыдущего.Чтобы соответствие сработало, между элементами не обязательно должно соблюдаться отношение родитель-потомок — первый элемент просто должен предшествовать второму в том же дереве. Например, “span.myClass div#myId” соответствует любому div#myId, который является потомком span.myClass. Вы можете добавить столько ссылок в цепочку, сколько захотите. Наприме, “div#main ol li”, будет соответствовать любому li, который является потомком ol, который является потомком div#main.
  • element > element — соответствует любому HTML-элементу, который является прямым потомком предыдущего элемента. Например, “div#myId > a#contactUs” соответствует <a id=”contactUs”>, который является прямым потомком <div id=”myId”>.
  • selector, selector — два селектора, разделенные запятой работают в триггерах по логике или-или. Таким образом, вы можете указать несколько селекторов, и если один из них совпадает, триггер сработает.

Эти универсальные селекторы являются основой практически всего, что вы делаете с CSS-селекторами.

2. a[href^=”tel:”]

Этот селектор соответствует любой ссылке (<a>), у которой атрибут href начинается с “tel:”, например: <a href=”tel:01010101">. С помощью этого селектора вы можете трекать клики по номеру телефона.

Вот так вы можете адаптировать его для трекинга кликов по имейлам: a[href^=”mailto:”]

3. a[href*=”example.com”]

Этот селектор соответствует любой ссылке, у которой атрибут href содержит “example.com”. Таким образом, можно использовать его, чтобы отсеять (или включить) клики по внутренним ссылкам на сайте.

4. a[href$=”.pdf”]

Этот селектор соответствует любой ссылке, у которой атрибут href заканчивается на «.pdf». Вы можете просто заменить «.pdf» на любой тип файла, который хотите отслеживать.

5. div.someElement a

Общие селекторы уже рассмотрены выше, но есть очень важный момент, который хотелось бы отметить.

Когда вы работаете с триггером «Клик/Все элементы», рекомендую добавить проверку соответствия для каждого элемента, который вы хотите отслеживать:

Click Element соответствует CSS-селектору

a[href*=”example.com”], a[href*=”example.com”] *

Другими словами, после вашего селектора добавьте еще один, который соответствует любому его потомку. Иногда это необходимо, поскольку триггер Все элементы фиксирует непосредственно только тот элемент, по которому кликнули. Но в виду вложенности структуры DOM, вы можете столкнуться с неожиданной штукой. Например, если у вас есть такая ссылка:

<a href=”mailto:some@email.com”> <span>some@email.com</span> </a>

Клик по ссылке фактически придется на <span/>, и обычный триггер клика по ссылке в данном случае не будет работать. Используя селектор a[href=”mailto:some@email.com”], a[href=”mailto:some@email.com”] *, вы захватываете как клики на ссылку, так и на любых ее потомков (включая <span/>).

6. form#myForm option: checked

Часто в формах присутствуют чекбоксы, радиокнопки, списки выбора. Вы можете использовать псевдо-селектор :checked, чтобы трекать такие элементы. Например, form#myForm option:checked ищет любой элемент <option>, выбранный в форме. Таким образом вы можете использовать этот селектор для идентификации выбранной опции в раскрывающихся списках и других элементах, где присутствует этот псевдо-класс.

7. a:not()

Псевдо-селектор :not срабатывает если условие, что элемент не содержит заданное значение, возвращает true. Например, селектор вроде a:not([href*=”example.com”]) будет трекать клики по любым ссылкам, которые не содержат “example.com” в href.

8. ol > li:first-child

Селектор: first-child соответствует первому дочернему элементу по отношении к заданному. Например, ol > li:first-child будет соответствовать первому элементу из списка

Другие похожие селекторы — :last-child (соответствует последнему дочернему элементу) и :nth-child(N) (соответствует Н-ному дочернему элементу, например :nth-child(3) будет соответствовать третьему дочернему элементу относительно родительского элемента).

9. a[data-gtm-event]

Квадратные скобки обозначают атрибуты. Если вы пропустите знак равенства (=), то можете просто проверить, имеет ли элемент данный атрибут. Например, селектор a[data-gtm-event] будет соответствовать любой ссылке с атрибутом data-gtm-event, независимо от значения этого атрибута.

10. body > div.site-container > div > div > main… ARGH

Десятый пункт — совет, а не селектор. Старайтесь избегать длинных и сложных цепочек селекторов. Чем длиннее цепочка, чем больше вы используете отсылок на прямые отношения родителей и потомков(>) — тем больше точек отказа вы добавляете в ваш селектор.

Все, что нужно, чтобы ваш селектор перестал работать — изменение всего лишь одного элемента в длинном пути DOM, который указывает на ваш элемент. Особенно если об этом не вкурсе ваши старательные фронтенд разработчики.

Старайтесь всегда находить наиболее общий селектор, но который все еще достаточно точно соответствует тому, который вы пытаетесь захватить.

Надеюсь кому-нибудь это пригодилось)

Если у вас есть полезные кейсы и селекторы, которые вас выручали, и которыми вы хотели бы поделиться — буду рада расширить ими этот список.

{ "author_name": "Natalia Kurinna", "author_type": "self", "tags": ["someid","myid","myform","main","html","gtmtips","css","contactus"], "comments": 1, "likes": 2, "favorites": 12, "is_advertisement": false, "subsite_label": "dev", "id": 137909, "is_wide": true, "is_ugc": true, "date": "Sun, 28 Jun 2020 23:05:31 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ // { // name: 'camera', // url: `${cdnUrl}CameraCat`, // text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', // link: '1', // }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', }, // { // name: 'cloud', // url: `${cdnUrl}CloudCat`, // text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', // link: '3', // } ] let buttonCycle = document.querySelector('.button--cycle') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?5' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?5' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите почитать?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
1 комментарий
Популярные
По порядку

Хорошая подборка. ред.

0
Читать все 1 комментарий
Готовы выбрать победителя премии «Экспортер года eBay — 2021»?
Нью-Йорк первым из крупных городов США принял указы об условиях труда курьеров: разрешил отказываться от заказа и другое Статьи редакции

Сервисы должны будут сообщать, куда везти заказ, до его принятия и платить не реже раза в неделю.

Кейс: как мы арендовали гостиницу на юге и ничего не заработали

На днях я поговорила с предпринимателями, которые в 2018 году арендовали гостевой дом в Геленджике, и выяснила, почему нужно чётко фиксировать все принципиальные вопросы в договоре заранее и что важно просчитать на старте, чтобы бизнес был прибыльным.

Набережная Геленджика  Фото является объектом авторского права
Управление репутацией на Otzovik.Как убить негативный рейтинг/удалить негативные отзывы и выдвинуть хорошие отзывы вверх
Нужны ли в России сити-фермы

И появятся ли грядки на крышах пятиэтажек.

re-thinkingthefuture.com
«Любая клавиатура может быть эргономичной — просто купите вторую» Статьи редакции

Программист Disney Джефф Пэрриш несколько лет страдал от боли в спине при наборе текста— смена клавиатуры и упражнения не помогали. Решение оказалось изящнее.

Как мы проводили командную ретроспективу в Minecraft

Рассказываем историю, на что стоит обратить внимание при проведении командного мероприятия в игре Minecraft, какие грабли могут быть, как организовать онлайн- и офлайн-участие.

В интернете появилась база клиентов «Совкомбанка», которые подавали заявки на кредит — банк подтвердил утечку Статьи редакции

В свободном доступе оказались более 150 тысяч анкет: с паспортными данными и адресом проживания россиян.

Эксперты Httpool выступят на конференции по глобальному маркетингу Globalize! 2021

Событие соберет самых продвинутых специалистов в сфере трафика и аналитики из Google, Httpool, AppsFlyer, Aitarget, Angle Connect, TikTok, OWOX, SHAREit, Tribuna, SportQuake, LCFC, FBS.

Сергей Галицкий сообщил о болезни, которая «мешает работе» — из-за неё он не может посещать матчи команды Статьи редакции

Галицкий не раскрыл детали, но рассказал, что меняет структуру футбольного клуба — чтобы он не зависел от одного человека.

Сергей Галицкий «КомментШоу»
Как традиционному малому бизнесу превратиться в стартап: план действий

Сейчас в России предприниматели переходят из традиционного малого бизнеса в стартапы очень редко — меньше чем в 0,02% случаев. Это не больше 1 000 стартапов из около 6 млн предприятий малого бизнеса. Поговорим о том, что мешает предпринимателям и как действовать, если есть желание создать стартап.

null