Книга: Google Tag Manager для googлят: Руководство по управлению тегами
Назад: Пользовательские переменные
Дальше: Утилиты
Элементы страницы
Рис. 276. Пользовательские переменные «Элементы страницы»
Следующая категория в Google Tag Manager состоит из 3 пользовательских переменных:
● Видимость элемента – позволяет вам определить какой конкретный элемент был виден в браузере пользователя. Используется с триггером «Доступность элемента».
Значение зависит от видимости указанного элемента DOM. В качестве примера зададим селектор элемента кнопки на сайте:
Рис. 277. Селектор элемента кнопки на сайте
Тип результата «истина/ложь» (true/false) и минимальный процент видимости:
Рис. 278. Настройки в переменной «Видимость элемента»
В отладчике Google Tag Manager будет доступен следующий результат:
Рис. 279. Пример пользовательской переменной «Видимость элемента»
В случае видимости элемента в браузере при минимальном проценте видимости – true, в случае если элемент не был в поле зрения пользователя и не удовлетворяет проценту видимости – false.
● Переменная автоматического события (Auto-Event Variable)
Переменная автоматического события используется для доступа к целевому элементу действия пользовательского события (клики, ошибки, отправки формы и т.д.). Когда вы создаете новую переменную Auto-Event, вам нужно указать только тот компонент целевого элемента, к которому вы хотите получить доступ.
Рис. 280. Переменная автоматического события
Часть типов переменной совпадает со встроенными переменными (см. выше):
● Элемент = Click Element и Form Element;
● Классы элемента = Click Class и Form Class;
● Идентификатор элемента = Click ID и Form ID;
● Цель элемента = Click Target и Form Target;
● Текст элемента = Click Text и Form Text;
● URL элемента = Click URL и Form URL;
● Новый фрагмент URL истории = New History Fragment;
● Старый фрагмент URL истории = Old History Fragment;
● Новый статус истории = New History State;
● Старый статус истории = Old History State;
● Источник изменения истории = History Source.
Переменная автоматического события возвращает значение, соответствующее типу выбранного элемента. Если соответствующее автоматическое событие не было зарегистрировано, переменная возвращает значение по умолчанию (если установлено) или undefined.
● Элемент DOM
Вы можете использовать переменную для получения текстового содержимого любого элемента DOM или для извлечения значения любого атрибута элемента DOM.
Например, мы хотим получить значение текстового содержимого элемента кнопки «Заказать рекламу».
Рис. 281. Пример извлечения текстового содержимого элемента кнопки
Полный CSS-селектор у кнопки через Copy selector в браузере – #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.scrollingto.blue
Рис. 282. Copy selector
Создадим пользовательскую переменную в Google Tag Manager:
Рис. 283. Пример пользовательской переменной «Элемент DOM»
Примечание: в данном примере CSS-селектор очень длинный и его можно сократить. Однако цель примера не в этом, так что оставим полный селектор, скопированный из консоли разработчика.
Если задано имя атрибута, переменной будет присвоено значение атрибута элемента DOM, в противном случае в качестве значения будет использоваться текст элемента DOM. В отладчике GTM:
Рис. 284. Отображение значения кнопки в переменной «Элемент DOM»
Если элемент DOM с указанным идентификатором или CSS-селектором не найден, переменная возвращает нулевое значение (null).
Назад: Пользовательские переменные
Дальше: Утилиты
