Сейчас в сети: 486
Сейчас в сети: 486
Учитесь работать в Google Analytics вместе с нами!
star_border

Использование селекторов CSS в триггерах GTM

Бывают случаи, когда нужно отследить клик по "родительcкому" элементу какого-нибудь тега на странице, например, когда ссылки сделаны не с помощью стандартного тега <a>, а при помощи javascript, и клик по любому тегу внутри блока приводит к переходу на другую страницу.

 

Например есть такой код:

<div class="boxes">
<div class="item_z3_1">...</div> 
<div class="item_z3_2">...</div>
<div class="clr">...</div> 
<div class="item_z4">...</div> 
<div class="item_z4">...</div> 
<div class="item_z4">...</div> 
<div class="item_z4">...</div> 
<div class="item_z3_3 btn_z">...</div> 
</div>

Нам нужно отследить клик по любому блоку внутри блока <div class="boxes">.


Если попытаться стандартно настроить GTM на клик по элементу с классом  "boxes", то триггер работать не будет, так как сам клик будет приходиться на один из "дочерних" блоков блока boxes. А настраивать на каждый "дочерний" элемент - лишняя работа.


Настроить отслеживание в таком случае можно при помощи селекторов CSS:

Article_GTM_April18.png 

Cелектор .boxes * означает, что нужно отслеживать клик по всем дочерним элементам элемента с классом "boxes"

Селекторы CSS также пригодятся, когда у нужного вам элемента нет отличительных признаков как ID или class - к нему можно указать путь от его родителей, которые таковые имеют или вообще от начала документа.


Ниже - некоторые основные селекторы, которые можно использовать:

* - все элементы. Обычно используется для выделения дочерних элементов родительского элемента, как в нашем примере.

 

# - знак решетки ставиться, если нужно выделить элемент с определенным ID.
Пример:  Для элемента <p id="top-phone">...</p> достаточно указать #top-phone

 

. (точка) - обозначает класс элемента страницы. Если ID  - это уникальный идентификатор, то класс может повторяться.
Пример: <div class="product"> ... </div> - к этому элементу можно обратиться при помощи его класса "product" -  .product

 

X Y - селектор, указывающий на дочерний элемент Y родителя X
Пример: <li class="link"><a href="....">... </a></li> - чтобы указать на ссылку внутри тега li с классом link нужно написать: li.link a или .link a если класс "link" с другими тегами не используется на странице

 

X - просто указание тега. Например для всех ссылок на странице указываем a

 

 X>Y - только непосредственные потомки. Не "внуки" и "правнуки", а только "дети"

Пример:

<div>
  <p>Прямой наследник</p>
  <span>
    <span>
      <p>не прямой - правнуки</p>
    </span>
  </span>
  <p>Прямой наследник</p>
  <span>
    <p>не прямой - внуки</p>
  </span>
  <p>Прямой наследник</p>
</div>

div>p будет указывать только на теги <p>"прямых наследников"

 

X+Y - смежный селектор (соседский или сестринский)

Пример: div+a - означает выбрать теги <a>, которые идут сразу после закрывающегося тега <div>

 

[ ] - селектор атрибутов. Нужен, если нам нужны элементы с определенными атрибутами.

Например: a[href="http://esliklientov.net"] - выберет все ссылки на странице, ведущие на URL http://esliklientov.net

 

По запросу в поиске "селекторы CSS" вы сможете найти и другие селекторы и примеры к ним.

 

Теперь Вы можете выбрать любой элемент для отслеживания в GTM на любой Вашей странице, даже если элемент (тег)  не содержит  уникальных "опозновательный знаков".

Андрей Москалец

Москалец Андрей. Работаю волшебником - превращаю слова в деньги! Сертифицированный специалист Google AdWords и Google Analytics. Агентство контекстной рекламы EsliKlientov.Net

Комментарии
Andrey D
июня 2016

Добрый день, Андрей.
Не получается поставить отслеживание ссылки "закрыть popup" (крестик)
Попап показывается, при открытие сайта: www.cosmo.com.ua - уникальному пользователю.


ScreenShot.png

так как класса: "popup-plashki-close" (класс ссылки закрыть) в исходном коде нет, он появляется, когда отображается popup. Не могу поставить правило активации, точнее правило присутствует, но не работает.

Как правильно работать с отслеживания popup(ов) ? , спасибо

 

Попробуйте тогда использовать родительские элементы, которые существуют и которые дальше находятся:
#popup-plashki > div.redactor > a
или
#popup-plashki > div.redactor > a img

для самой картинки

Kirill R
июля 2016

Отличное руководство. Спасибо! 

Ілля С
июля 2016

Добрый день! Есть проблема. Поскольку доступа к исходному кода сайта у меня временно нет, но есть доступ к аккаунту GTM, решил настроить отслеживание целей по нажатию на кнопку отправки формы.

 

На лэндинге используется несколько форм. Никаких элементов, классов у кнопок нет.Безымянный.png

 

Единственное к чему я привязался - это текст. С двумя формами вопрос решил. Но есть ещё одна форма. Её вызов производится нажатием на кнопку "Заказать". И этот же текст размещен на кнопке отправки формы. Пытался привязаться к css селектору, но триггер не срабатывает. Подскажите, пожалуйста к чему привязаться на этой кнопке?Безымянный.png

Добрый день, Ілля

У вас как раз и отображен селектор только запишите его как a.form_field_submit , если класс ссылки встречается в других местах страницы, то можно привязаться через указание уникального родительского  элемента.

Ілля С
июля 2016 - последнее изменение июля 2016

Спасибо, за ответ!

Хочу уточнить. Показанный в скриншоте селектор я ставил условием активации триггера, но он не срабатывал.

 

Мне нужно вместо class написать form? Правильно понимаю?

Указал условие активации "Click Element сщщтветсвует CSS селектору a.form_field_submit".

Не активировался триггер.

не могли бы прислать ссылку на страницу и уточнить отслеживаемую форму

Ілля С
июля 2016

Конечно! Сайт: goodcase.in.ua. Конкретно та форма, о которой идёт речь. Вызывается нажатием на кнопку "Заказать" Вот эта часть экрана:

Безымянный.png

У вас помимо ссылки еще внутри div и span
Укажите в качестве селектора a.form_field_submit *

Ілля С
июля 2016 - последнее изменение июля 2016

Спасибо. Сработало!

UPD. Не. Сробатало не из-за этого. Достучался до веб мастера и он поменял текст.(((

Ваш вариант тоже пробовал. И так и сяк крутил.

 

я селектор проверял на вашем сайте, он рабочий , пришлите скрин настройки. Ну или если уже вопрос решен, то не нужно

DmitriyK
февраля 2017 - последнее изменение февраля 2017

Добрый день
не могу найти решение задачи: запуск тега (отправка в аналитикс виртуальной страницы) по загрузке страницы с общим кодом (те сливаем группу страниц в одну)

	<div class="catalog-items">
	<div class="wrap-box-catalog-section-title">
		<div class="box-catalog-section-title">
			<h1>				Светодиодный (LED)			</h1>
		</div>	
					<div class="catalog-section-items-amount">				135 товаров			</div>
			</div>	

все эти классы уникальны для это й группы страниц.
Я попытался создать пользовательскую переменную Элемент Dom - селектор CSS - (что писать в селектор элементов так и не понял).
Также создал триггер Просмотр страницы-Условие (созданную выше переменную)-соответствует селектору css- в значение пробовал добавлять все классы (с точкой спереди), но ничего не срабатывает
Вот страница категории, с которой провожу эксперимент https://mik.tv/kinokamery/
Буду благодарен за помощь

Андрей Москалец Ведущий участник
февраля 2017

@DmitriyK Добрый день

Да, вы все правильно начали делать. 
Можете использовать свою переменную DOM с селектором .catalog h1 и если там есть значение,, то это значит каталог.

 

DmitriyK
февраля 2017

Спасибо Андрей за ответ. Все равно пока не получилось. Вот тут предложили более понятное для меня решение вопроса (через скрипты) https://www.ru.advertisercommunity.com/t5/GTM-Dispetcher-tegov-Google/Otslezhivat-prosmotr-stranitsy...

MaxT
Февраль

Пожалуйста, подскажите, где я сделал ошибку. Для отслеживания нажатия на крестик для закрытия модального окна использовал селектор .close-button, но тег с ним не активируеться при нажатии. 

 

<div class="close-button" onclick="return Popup.close(this);" data-popup="#popup">
                    <span class="icon-block">
                        <svg class="svg-sprite close">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://obyava.ua/images/svg-sprite.svg?v=147#svg-id-x"></use>
                        </svg>
                    </span>
                </div>
Evgeny G
Июль

 Здравствуйте, Андрей.

Помогите плз начинающему, не могу никак разобраться, как обратиться к селектору вот этого элемента http://prntscr.com/fvqdzk  возможно, я что то не так с настройками триггера делаю, но кажется все что можно уже перебрал - не работает.

@Evgeny G
Попробуйте .item a.red_bg

Evgeny G
Июль - последнее изменение Июль

Спасибо, Андрей! Ваш вариант помог - заработало!

 


Yana L
Сентябрь

Здравствуйте! Могли бы помочь?

не могу настроить на передачу ID товара для динам ремаркетинга. Дело в том, что айди, который присвоен товарам не отображен визуально на сайте.

 (скрин по ссылке)  http://joxi.ru/GrqG6QEiN8Rw32

Или настроить хотябы передчачу артикула (но он у меня не на всех позициях стоит). я прописываю селектор как . product-sku_field js-product-sku_field

но он у меня переменной не отображается http://joxi.ru/VrwzaKLUK5jdgA

Что я делаю не корректно?

 

 

Yana L Создайте отдельную тему на форуме, помогу. А то эти сообщения идут как комментарии под статьей, а не ответ на ваш вопрос

Яна Д
‎16-02-2018 01:28 PM — отредактировано ‎16-02-2018 01:30 PM

Добрый день

Нужна помощь. Есть форма с кнокой продолжить. У кнопки вот такой код. Пробовала привязаться через селектор #ccpet-payment-pre-form > div:nth-child(3) > div.form-item.form-item-submit > input[type="submit"] но ни переменная ни тригер не срабатывает. Есть возможность как-то привязаться к такой кнопке?ajhvf rjl.JPG

Андрей Москалец Ведущий участник
‎16-02-2018 01:55 PM
#ccpet-payment-pre-form .form-item-submit input Этого должно быть достаточно. Если триггер не срабатывает - то или этого объекта нет при загрузке страницы или программисты запретили распространение событий после клика на нем. В любом случае пришлите ссылку на страницу, посмотрю
Яна Д
‎19-02-2018 09:06 AM

@Андрей Москалец могу я Вам в скайпе ссылку скинуть. а не тут?

Андрей Москалец Ведущий участник
‎19-02-2018 12:27 PM
да, skype: a_moskalets