Триггер что это в html и css
.trigger( eventType [, extraParameters ] )
Выполнить события заданного типа и запустить обработчики, прикреплённые к элементам.
eventType
Строка с названием типа JavaScript события.
extraParameters
Тип: Массив или Объект
Дополнительный параметр, передаваемый в обработчик.
event
extraParameters
Тип: Массив или Объект
Дополнительный параметр, передаваемый в обработчик.
Если вам необходимо только вызвать обработчики событий, без выполнения самого события, воспользуйтесь методом triggerHandler().
Отметим разницу между дополнительными данными, передаваемыми при установке обработчика событий (параметр eventData) и данными передаваемыми при вызове события методом trigger() (параметр extraParameters). Во-первых, есть смысловое отличие: eventData задается один раз для каждого обработчика, поэтому, при каждом вызове, он будет получать одно и то же значение. Параметр extraParameters задается для каждого отдельного вызова заново, и поэтому значения могут быть разными. Во-вторых, эти два вида данных доступны внутри обработчика различным способом:
Примеры
Пример: Клик по кнопке #2, но так же вызвать обработку клика по кнопке #1.
Пример: Отправить первую форму, без запуска функции submit():
Пример: Отправить первую форму, без запуска функции submit():
Пример: Передать данные в событие:
Пример: Передать данные через объект события.
Пример: Альтернативный способ передачи данных через объект события:
Определение и применение
jQuery метод .trigger() позволяет выполнить все функции обработчики событий, присоединенные у выбранного элемента для данного типа события.
Обратите внимание на то, что при вызове события методом .trigger(), активация события не полностью имитируется, например, при срабатывании такого события как » click » переход по ссылке произведен не будет, как это было бы произведено по естественным причинам.
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
Пример использования
Результат нашего примера:
Следующий пример демонстрирует как с помощью метода .trigger() передать произвольные данные через объект события:
Для того, чтобы выполнить все функции обработчики событий, присоединенные у выбранного элемента для типа событий » login » и » logoff » мы используем jQuery метод trigger(). В первом случае мы указываем в качестве первого параметра метода trigger() строковое значение, которое соответствует типу событий » login » и передаем массив данных. Обратите внимание, что данные содержащиеся под нулевым индексом в массиве будут соответствовать первому дополнительному параметру в обработчике этого события.
Во втором случае мы указываем в качестве параметра метода trigger() объект данных, содержащий пары ключ-значение, который мы передадим в объект события jQuery ( Event ). Обратите внимание, что свойство type этого объекта должно соответствовать событию, которое мы хотим инициировать, иначе обработчик события вызван не будет.
Результат нашего примера:
CSS-селекторы в GTM. Часть I
Если в Google Analytics одной из самых непростых тем для изучения по-праву считают регулярные выражения (из-за сложного восприятия и запоминания синтаксиса команд, метасимволов), то в этой, пожалуй, ей равнозначны именно css-селекторы, поскольку знания в данной области лежат далеко за пределами анализа статистики и построения отчетов.
Но как только вы научитесь правильно использовать селекторы CSS в Google Tag Manager, то забудете о сторонней помощи программистов по многим задачам. Здесь больше именно веб-разработки, но без спецсимволов из регулярных выражений все равно не обошлось.
В процессе настройки аналитики часто приходится отслеживать клики по определенным элементам на странице сайта. Все просто, если у отслеживаемых элементов (кнопки, ссылки, формы и т.д.) есть атрибуты id или class. Например, как здесь (инспектирование кода веб-страницы в консоли разработчика):
Атрибуты id и class у элемента на сайте
В Google Tag Manager для активации тега на данный элемент остается только настроить триггер со встроенными переменными Click Classes и Click ID.
Пример условия активации триггера по Click ID
Но часто бывает, что у необходимого элемента нет таких атрибутов. Тогда на помощь приходят css-селекторы.
CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных, таких как «Видимость элемента», «Элемент DOM» и «Собственный код JavaScript».
CSS-селекторы в триггерах и переменных GTM
Если атрибут нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Но если один и тот же класс используется в нескольких элементах на странице, тогда рекомендуется использовать селекторы CSS.
Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.
Но прежде чем разбираться в селекторах, рекомендую для начала ознакомиться с глобальной структурой документа в формате HTML – какие бывают элементы, заголовки, атрибуты, метаданные и т.д.
Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как
Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.
DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:
Представление DOM этого документа HTML выглядит следующим образом:
Представление DOM для документа HTML
Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.
Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.
DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:
На примере выше по отношению к узлам
В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.
Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:
Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.
Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.
Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути.
Селекторы могут быть:
Давайте рассмотрим каждый вид подробнее.
Простые селекторы
К ним относятся: селекторы классов (class selectors) и селекторы по ID.
Пример селектора классов
ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.
Пример селектора по ID
Пример #maiLeaderboard. Это означает, что css-селектор #id соответствует всем элементам с идентификатором maiLeaderboard (id=”mainLeaderboard”).
Клик по элементам, соответствующим CSS-селектору c идентификатором #maiLeaderboard
Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.
Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока
Пример использования универсального селектора *
Настроить в GTM триггер на клик по элементу с классом «block», используя встроенную переменную Click Classes = “block”, не получится, так как сам клик будет приходиться на один из узлов-потомков блока block. А настраивать на каждый внутренний элемент (firstscreen dark-1, secondscreen dark-1 и т.д.) не целесообразно.
По этой причине будем использовать универсальный селектор * для класса .block:
Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом «block».
В CSS есть такое понятие, как «комбинаторы». Они позволяют объединить множество селекторов, что дает возможность выбирать элементы внутри других элементов, или смежные элементы
Элемент
Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».
Клик по элементам, соответствующим CSS-селектору по div
Триггер в GTM будет активироваться при выполнении события по всем элементам “div” на странице.
Элемент, Элемент
Если необходимо выбрать все элементы “div” и “p”, то используйте конструкцию «элемент, элемент».
Клик по элементам, соответствующим CSS-селектору по div, p
Триггер в GTM будет активироваться при выполнении события по всем элементам “div” и “p” на странице.
Элемент Элемент
Если необходимо выбрать элемент, вложенный в другой элемент, то используйте конструкцию «элемент элемент».
Клик по элементам, соответствующим CSS-селектору div p
Триггер в GTM будет активироваться при выполнении события по всем элементам “p” на странице внутри элементов ”div”.
Элемент>Элемент
Разберем это на конкретном примере:
Пример конструкции «элемент>элемент»
Добавляем в Google Tag Manager условие активации триггера:
Клик по элементам, соответствующим CSS-селектору div>p
Триггер в GTM будет активироваться при выполнении события по дочерним элементам “p” на странице внутри элемента ”div”, то есть тех, которые на скриншоте выше выделены зеленым цветом и соответствуют строке «Мороз и солнце; день чудесный!».
Элемент+Элемент
Конструкция «элемент+элемент» на примере div+a
Клик по элементам, соответствующим CSS-селектору div+a
ol. Конструкция «элемент
элемент» позволяет выбрать все элементы “ol”, которым предшествует элемент “p”.
Селекторы по атрибутам
Существует особый вид селекторов, позволяющий искать элементы по их атрибутам и значениям. Для их записи используются квадратные скобки [].
Селекторы наличия и значения атрибута
Эти селекторы выделяют элементы на основе точного значения атрибута:
Пример [target=_blank] – выбирает все элементы с атрибутом “target”, который имеет значение “_blank”.
=”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается «значение» в виде отдельного слова.
Пример использования [атрибут
) в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению.
Селекторы подстроки в значении атрибута
Селекторы по атрибутам этого типа еще называют «Селекторы типа регулярных выражений (RegExp-like selectors)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных выражениях и примерах их использования написано в моей другой книге «Google Analytics для googлят: Практическое руководство по веб-аналитике (2018)».
Селекторы типа регулярных выражений:
Значение может быть единственным словом в атрибуте, например, lang=»ru» или с добавлением других слов через дефис, например, lang=»ru-region».
На примере ниже для “lang|=ru” задается стиль (color:green). Результатом будет измененный цвет текста у атрибута “ru” Привет! и “ru-region” Здравствуйте. (выделено зеленым), поскольку [атрибут|=”значение”] подразумевает «точное» значение или же «начинающееся с».
Пример использования [атрибут|=”значение”]
Пример использования [атрибут$=”значение”]
, а не div, и поэтому не будет выделен красным цветом.
Проиллюстрируем это на следующем примере:
Пример использования [атрибут*=”значение”]
, поэтому он не будет выделен синим цветом.
Псевдоклассы
Псевдоклассы — это дополнения к обычным селекторам, которые делают их еще точнее и мощнее. Они определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. Это реализуется с помощью псевдокласса :hover.
Псевдокласс добавляется к селектору c помощью символа двоеточия : (селектор:псевдокласс).
В Google Tag Manager псевдоклассы также можно применять для активации переключателей элементов интерфейса, например, checkbox и флажки (radio), или для отслеживания кликов по определенным элементам из выпадающего списка.
Псевдокласс – это селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом. Их существует большое количество, но на практике в GTM используются некоторые. Вот одни из самых популярных:
Таблица псевдоклассов с примерам
Псевдоэлементы
Таблица псевдоэлементов с примерами
Рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания данной темы:
CSS-селекторы: w3schools.com/cssref/css_selectors.asp
Демонстрация селекторов: w3schools.com/cssref/trysel.asp
По первой ссылке представлены все CSS-селекторы и псевдоклассы с примерами и описанием их работы (на английском языке). По второй вы можете наглядно увидеть, как работают различные селекторы.
Демонстрация селекторов на сайте w3schools.com
Выбрав в левой части экрана один из селекторов, справа вы увидите подсвеченный результат.
Также для закрепления пройденного материала рекомендую прочитать статью «Основы CSS-селекторов на примере котиков» и несколько разделов из справки разработчиков developer.mozilla.org.
Для того, чтобы правильно обращаться к элементам на странице и применять их в Google Tag Manager для отслеживания определенных событий, нужно просто глубже разобраться в теме CSS-селекторов, понять их взаимосвязь друг с другом и использовать инструменты, которые упрощают их обнаружение.
Разберем три варианта определения CSS-селекторов.
Консоль разработчика
Традиционный способ, с помощью консоли разработчика любого браузера. Я пользуюсь Google Chrome, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».
Правой кнопкой мыши – Просмотреть код
Правой кнопкой мыши – Copy – Copy selector
В буфер обмена у вас скопировался селектор. Можно вставить его в любой текстовый документ и посмотрть как он будет выглядеть. В моем примере он выглядит так: #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox
Получилась очень длинная цепочка взаимосвязей элементов друг с другом. Несмотря на это его можно использовать в Google Tag Manager для настройки отслеживания события. Однако тот же селектор можно записать и в таком виде: a.button.hp-button-1.slide-button.w-button.green.fancybox, просто убрав общую часть в начале.
CSS Selector Tester
Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.
Расширение для браузера CSS Selector Tester
После установки в правом верхнем углу у вас должен отобразиться новый значок. Перейдите на необходимую страницу где хотите найти селектор и нажмите на иконку:
Иконка CSS Selector Tester
У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.
Поиск селектора на странице
CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:
Элементы div на странице
Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.
SelectorGadget
Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».
Он позволяет легко определять селекторы CSS (при наведении на элемент в отдельном поле показывает его значение) и для наглядности выделяет выбранный элемент зеленым, а схожие – желтым.
Пример работы расширения SelectorGadget
Скачать расширение SelectorGadget можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.
Группы триггеров в диспетчере тегов Google
Роман Любимцев
Head of Analytics&Marketplace, MediaGuru
В блоге Simo Ahava – эксперта по Google Tag Manager и Google Analytics – появился свежий материал о Группах триггеров в диспетчере тегов Google. Мы перевели эту статью, чтобы помочь вам разобраться с настройками и основными нюансами, которые нужно учитывать при работе с Группой триггеров.
До сих пор нельзя было создавать триггеры, которые основывались на значениях предыдущего события. Группа триггеров предполагает хранение информации о триггерах, которые сработали на странице внутри GTM. После того, как настроенные в группе триггеры сигнализируют о завершении, она запускает любой тег, с которым связана.
Оглавление
Как настроить Группу триггеров
В пользовательском интерфейсе Google Tag Manager выберите «Триггеры», затем «НОВЫЙ» и нажмите «Выбрать тип триггера, чтобы начать настройку».
Создание нового триггера
В открывшемся окне выберите «Группа триггеров».
Группы триггеров имеют довольно простую логику.
Вы можете добавить триггер в группу больше одного раза. Чтобы группа триггеров сработала, триггер должен срабатывать столько раз, сколько он был добавлен в группу.
Порядок триггеров в группе не имеет значения: группа триггеров в любом случае сработает сразу после срабатывания всех включенных триггеров.
Добавив триггеры, вы можете указать дополнительные условия срабатывания. Для этого выберите пункт «Некоторые условия» из предложенного меню « Условия активации триггера ». Указанное вами условие будет добавлено в дополнение к условиям срабатывания группы триггеров.
На следующем этапе можно добавить группу триггеров к своим тегам. Она работает так же, как обычный триггер. Схожесть заключается в том, что тег сработает, как только условия будут выполнены, и сработают все триггеры в группе.
Пример 1: глубина прокрутки и затраченное время
Группа триггеров не сработает до тех пор, пока не сработают триггер «Глубина прокрутки» и триггер «Таймер». Вы можете отложить запуск тега до момента, пока пользователь не выполнит прокрутку страницы в достаточной степени и не потратит определенное время, находясь на странице.
В данном примере у меня есть триггер «Глубина прокрутки», который срабатывает при прокрутке на 50%, и триггер «Таймер», который срабатывает при 30 секундах ожидания на странице.
Группа триггеров объединяет триггеры «Таймер» и «Глубина прокрутки».
Пример 2: дождитесь срабатывания триггера «Все страницы»
В этой группе триггеров есть триггер, с которым мы хотим запустить тег, и триггер «Все страницы». Идея заключается в том, что сам триггер событий ничего не будет делать, пока не сработает триггер «Все страницы».
Помните, что у вас нет возможности установить порядок в группе триггеров. Она сработает вместе с перечисленными триггерами, независимо от их порядка. Основное предположение заключается в том, что триггер «Пользовательское событие – nonIdle» никогда не сработает раньше триггера «Все страницы».
Возможно, разумнее и спользовать функцию последовательности тегов в случаях, когда вам нужно установить последовательность запуска элементов. Но если у вас много тегов с наличием очень похожей зависимости, проще использовать группу триггеров.
Пример 3: полученное согласие
Группы триггеров используют и для того, чтобы убедиться в следующем: другие триггеры не срабатывают, пока пользователь не даст свое согласие или не включит вашу аналитику и отслеживание рекламы.
Я хочу убедиться, что пользователь дал согласие на отслеживание на моем веб-сайте. Группа триггеров для тега, который я использую при входе пользователя, будет выглядеть вот так:
Пример 4: взаимодействие с формой
Моменты, которые необходимо учитывать
Ниже приведены некоторые нюансы, которые нужно учитывать при работе с группами триггеров.
1. Группы триггеров не могут использоваться в качестве общих исключений
Это немного огорчает, ведь можно было бы придумать сценарии использования, при которых вы предпочли предотвратить срабатывание тега в случае, если определенные триггеры уже сработали.
2. Группы триггеров сработают только один раз
Данный тип триггера срабатывает только один раз на страницу после срабатывания всех вложенных триггеров. Даже если перечисленные триггеры сработают второй раз, группа триггеров больше не сработает.
Это не так критично, но существуют некоторые последствия. Например, у вас есть триггер «Глубина прокрутки», который срабатывает на глубинах 25, 50, 75 и 100%, а затем вы комбинируете его с 30-секундным триггером «Таймер» в группе триггеров. Она срабатывает только один раз, когда оба триггера — «Глубина прокрутки» и «Таймер» — сработали хотя бы однократно. Таким образом, невозможно дождаться повторного срабатывания группы триггеров до того момента, пока пороговое значение глубины прокрутки не станет, например, каким-то определенным значением.
Группа триггеров не подлежит сбросу после однократного срабатывания.
3. Группы триггеров не заменяют сгруппированные триггеры
Если к тегу добавлена группа триггеров, вы, возможно, захотите убедиться, что не случайно добавили триггеры к тегу в этой группе. Фактически, триггеры, которые вы добавляете в группу, вообще не нужно добавлять ни к одному тегу — они могут существовать исключительно ради самой группы триггеров.
4. Информация о Группе триггеров в объекте dataLayer довольно скудна
Вывод
Группы триггеров — достойное дополнение к арсеналу Google Tag Manager.
Мы еще далеки от того, чтобы установить сложную логику между триггерами (ЕСЛИ… ТО, ИНАЧЕ и т.д.), но это шаг в правильном направлении.
Особенно радует идея сохранения на странице более ранних значений ключей dataLayer. Возможно, в будущем эта идея будет расширена для того, чтобы мы могли запрашивать историю уровня данных на любой странице. И, возможно, мы даже решим сохранить эту информацию на разных страницах таким образом, что группа триггеров сможет срабатывать на основе многостраничных условий.