Использование CSS-селекторов в Google Tag Manager — без сомнения, одна из его самых полезных опций. Это дает непревзойденную гибкость, особенно в сочетании с триггерами кликов и форм.
CSS-селекторы позволяют проверять HTML-элемент на соответствие заданному вами селектору. Таким образом, когда вы используете триггер клика или формы, вы можете проверить соответствуют ли встроенные переменные клика или формы определенному селектору, и убедиться, что действие произошло именно с тем элементом, который вам нужен.
Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.
Итак, вы хотите отправлять событие по условию, что клик произошел по определенному HTML-элементу. Чтобы реализовать это, вам потребуется триггер клика selector или формы. В рамках данного триггера нужно выбрать опцию «Некоторые клики» и добавить свое условие.
Например, приведенный ниже триггер сопоставит элемент, который был нажат, с 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”] *
Другими словами, после вашего селектора добавьте еще один, который соответствует любому его потомку. Иногда это необходимо, поскольку триггер Все элементы фиксирует непосредственно только тот элемент, по которому кликнули.