CSS Selector Tester

Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

Рис. 59. Расширение для браузера CSS Selector Tester

После установки в правом верхнем углу у вас должен отобразиться новый значок. Перейдите на необходимую страницу где хотите найти селектор и нажмите на иконку:

Рис. 60. Иконка CSS Selector Tester

У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

Рис. 61. Поиск селектора на странице

CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

Рис. 62. Элементы div на странице

Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

SelectorGadget

Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».

Он позволяет легко определять селекторы CSS (при наведении на элемент в отдельном поле показывает его значение) и для наглядности выделяет выбранный элемент зеленым, а схожие – желтым.

Рис. 63. Пример работы расширения SelectorGadget

Скачать расширение SelectorGadget можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.

Рис. 64. Иконка SelectorGadget