Переменная «Элемент DOM» в Яндекс Тег Менеджере

В конце июня в Яндекс Тег Менеджере появилась новая пользовательская переменная - Элемент DOM. В этой статье мы разберем то, как она работает и когда ее можно использовать в своих проектах.

В моем блоге за последние полгода опубликовано более 20 материалов, посвященных настройке и отслеживанию событий с помощью Яндекс Тег Менеджера. В каждом из этих руководств подробно разбираются шаги настройки и методы проверки корректности внедрения. Ранее для отладки использовались шаблон тега Мини дебагер триггеров и переменных, а также режим _ym_debug=2 от Яндекс Метрики. С 20 ноября 2025 года в Яндекс Тег Менеджере появилась полноценная панель отладки, и часть описанных ранее подходов устарела. Поэтому, пожалуйста, пользуйтесь новой панелью отладки ЯТМ для проверки ваших настроек и обращайте внимание на актуальность информации в текущих статьях.

Элемент DOM - это пользовательская переменная, позволяющая извлекать контент непосредственно из HTML-разметки вашего веб-сайта. С ее помощью вы можете получить текстовое содержимое или значение любого атрибута элемента DOM и передать его в другие рекламные или аналитические инструменты.

Казалось бы, всё не так сложно. Но что такое DOM?

Что такое DOM?

Подробнее о том, что такое DOM (Document Object Model) и BOM (Browser Object Model), читайте в этой статье моего блога.

DOM (Document Object Model) - это объектная модель документа, представляющая иерархическую древовидную структуру HTML-разметки вашего сайта, где каждый элемент (HTML-тег, текст, атрибут и т.д.) - это объект (узел), с которым можно взаимодействовать. Другими словами, DOM позволяет нам манипулировать документом веб-сайта, получать значения текущих элементов страницы, добавлять новые, редактировать или удалять существующие.

Давайте немножко погрузимся в теорию. Все отслеживания, которые вы будете выполнять с помощью Яндекс Тег Менеджера, связаны с вашим сайтом и веб-страницами. Для открытия веб-сайтов используется специальная программа – браузер (browser). Существует множество браузеров, некоторые из самых популярных из них: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, Яндекс Браузер, UC Browser, Brave.

Когда пользователь вводит в адресной строке URL-адрес сайта и нажимает Enter, браузер отправляет запрос серверу, который обрабатывает его, находит соответствующие файлы (HTML, CSS, JavaScript, изображения и т.д.) и отправляет их обратно браузеру для отображения. Браузер отрисовывает страницу, применяя стили и выполняя скрипты, и пользователь видит результат на экране.

Но перед тем, как показать вам в отдельной вкладке запрашиваемую страницу, браузер выполняет большое количество различных действий. Сначала браузер анализирует HTML-код и строит DOM-дерево, представляющее структуру страницы. На основе анализа HTML-кода браузер создает объекты для каждого HTML-элемента на странице и строит дерево объектов с учетом вложенности элементов. Затем браузер применяет стили CSS к элементам на странице, чтобы определить их внешний вид. Если на странице присутствует JavaScript-код, браузер выполняет его, что может привести к изменению DOM или стилей страницы. В результате вы видите страницу в окончательном виде.

Если все эти процессы представить в виде блок-схемы, то это будет выглядеть примерно так:

DOM можно просмотреть во встроенных инструментах разработчика браузера. Для этого нужно открыть консоль разработчика, затем перейти на вкладку Elements (Элементы). Здесь отображается весь HTML-код страницы в виде древовидной структуры:

В нем присутствуют узлы, которые можно развернуть или свернуть, щелкнув по темным треугольникам и раскрыв вложенные элементы:

У многих узлов есть дочерние элементы, которые могут иметь своих собственных дочерних элементов. У узлов может быть несколько дочерних элементов и т.д. Это динамическое древовидное представление документов веб-сайта. Здесь вы просматриваете HTML DOM.

Основой HTML-документа являются теги (не путать со страничными тегами и скриптами!). Каждый HTML-тег является объектом. Например, HTML-код:

В структуре DOM-дерева можно разложить на следующие составляющие:

После того как браузер построил DOM, он его использует в дальнейших процессах, конечной целью которых является построения отображения этой страницы на экране. При этом DOM не является статической структурой. Ее можно изменять с помощью JavaScript и тут же видеть эти изменения на экране. Для этого браузер нам предоставляет API. То есть благодаря DOM, мы можем с помощью JavaScript изменять содержимое страницы «на лету». Таким образом, JavaScript – это ключевая технология для создания динамических веб-сайтов и веб-приложений.

Все объекты и методы, которые предоставляет браузер описаны в спецификации HTML DOM API, поддерживаемой W3C. С помощью них мы можем читать и изменять документ в памяти браузера.

Например, с помощью JavaScript мы можем:

• добавлять, изменять и удалять любые HTML-элементы на странице, в том числе их атрибуты и стили;
• получать доступ к данным формы и управлять ими;
• реагировать на все существующие HTML-события на странице и создавать новые;
• рисовать графику на HTML-элементе <canvas> и многое другое.

Благодаря тому, что JavaScript позволяет изменять DOM, мы можем создавать динамические и интерактивные веб-приложения и сайты. С помощью JavaScript мы можем менять все что есть на странице.

Давайте чуть подробнее рассмотрим отдельный HTML-элемент на страницах моего блога - кнопку Подписаться. Открыв вкладку Elements (Элементы), в консоли разработчика, мы видим, что данный элемент имеет определенную древовидную структуру.

Каждый узел здесь имеет серую стрелку слева, на которую можно нажать. Это разворачивает ветви дерева, чтобы показать больше объектов под ним в иерархии дерева. В результате кнопка на моем сайте имеет следующую структуру:

Вы также можете дважды щелкнуть по любому узлу или элементу, чтобы отредактировать его, удалить или добавить что-то совершенно новое. Например, изменить цвет с зеленой кнопки на розовую с помощью стиля:

Обратите внимание, что при этом содержимое вашего веб-сайта будет динамически меняться, но только для вас, в вашем браузере. Как только вы обновите страницу, все изменения пропадут и страница вернется в первоначальный (=исходный) вариант.

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

Знать, что такое DOM нужно еще и потому, что в Яндекс Тег Менеджере и Google Tag Manager есть триггер типа Модель DOM готова, который вы будете периодически использовать в своих настройках.

Помимо этого, в Google Tag Manager есть несколько пользовательских переменных, в которых используется DOM – Элемент DOM и Видимость элемента:

А с недавнего времени переменная Элемент DOM появилась и в Яндекс Тег Менеджере:

Именно ей и посвящена данная публикация.

Ну и, наконец, работая с Яндекс Тег Менеджером, вы будете взаимодействовать с кодом страницы и ее различными элементами. Поэтому еще одной распространенной задачей интернет-маркетолога является извлечение значений из полей формы с целью передачи этой информации в аналитические и рекламные инструменты. Например, извлечение значения из поля поиска или формы обратной связи, чтобы помочь Яндекс Метрике идентифицировать пользователей на сайте, даже если они используют браузеры с ограничением межсайтовых cookies (third-party cookies) - например, Safari или Mozilla Firefox, используя технологию Advanced Matching.

Если вы хотите лучше понять, что такое DOM (Document Object Model), я рекомендую посмотреть мое исчерпывающее видео на эту тему (доступно только по премиум-подписке). На Rutube:

И YouTube:

Или прочитать эту статью.

DOM поддерживает множество методов, которые позволяют разработчикам (и вам, если вы достаточно опытны) добавлять, редактировать и удалять элементы. Вот список некоторых команд в JavaScript для работы с объектом document:

• document.getElementById() - возвращает элемент на основе его идентификатору (id);
• document.getElementsByClassName() - возвращает коллекцию элементов на основе их класса;
• document.getElementsByTagName() - возвращает коллекцию элементов на основе их тегов;
• document.querySelector() - возвращает первый элемент, который соответствует указанному селектору CSS;
• document.querySelectorAll() - возвращает все элементы, которые соответствуют указанному селектору CSS.

Эти команды позволяют получать доступ к элементам на веб-странице и взаимодействовать с ними с помощью JavaScript. Например, метод getElementById() вернет первый элемент веб-сайта, который соответствует заданному идентификатору.

На скриншоте выше первая строка - это команда document.getElementById('button-cart'), а вторая - возвращаемый элемент. В моем примере - кнопка Купить.

Другим примером может быть querySelector(), который возвращает первый элемент, соответствующий заданному селектору CSS.

На скриншоте выше первая строка - это команда document.querySelector('#product > div > button:nth-child(4)'), а вторая - возвращаемый элемент. В моем примере - кнопка для добавления товара в закладки.

Еще одним примером работы с элементами на странице может служить cвойство innerText, которое используется для получения или установки текстового содержимого элемента. Оно возвращает видимый текст, как он отображается в браузере, игнорируя HTML-теги и стили, которые скрывают текст.

Например, с помощью innerText можно извлечь со страницы идентификатор заказа или сумму покупки, наименования товаров, их количество и т.д. и т.п.:

И вот как раз в задачах такого типа нам может пригодиться пользовательская переменная Элемент DOM.

Переменная «Элемент DOM»

Чтобы создать новую переменную Элемент DOM, перейдите в Яндекс Тег Менеджере в раздел Переменные. Нажмите кнопку Добавить переменную:

В шаблоне переменной выберите Элемент DOM:

Первое, что вам нужно задать, это Метод выбора. Вам нужно сообщить Яндекс Тег Менеджеру, какой именно элемент веб-сайта вас интересует. Всего существует два метода выбора:

1. Идентификатор (выбор элемента по его идентификатору);
2. Селектор CSS (выбор элемента по его селектору CSS).

Давайте рассмотрим оба варианта. Сначала попробуем Идентификатор.

Метод выбора - Идентификатор

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

Наша задача - извлечь это значение и передать его вместе с событием отправки формы в Яндекс Метрику как параметр события. Как это сделать с помощью переменной Элемент DOM и метода выбора Идентификатор?

Для этого нам необходимо проинспектировать данный элемент и убедиться, что у него в структуре DOM-дерева есть идентификатор (id). Выделите его и нажав правой кнопкой мыши, просмотрите код:

На вкладке Elements (Элементы) у данного элемента обязательно должен присутствовать атрибут id.

Примечание: атрибут id задает стилевой идентификатор - уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Дважды щелкните мышкой по значению и скопируйте его. Чтобы убедиться, что данный элемент на странице всего один и он уникален, перейдите в консоли разработчика на вкладку Console, вставьте в строку нижеприведенную конструкцию, а затем нажмите Enter:

, где вместо lead_id добавьте идентификатор (значение id) своего элемента.

Вы должны увидеть один возвращаемый элемент:

Вернитесь в Яндекс Тег Менеджер и вставьте скопированное значение идентификатора в поле Идентификатор элемента (является обязательным!):

А что насчет другого поля - Название атрибута? Если оставить его пустым, переменная Элемент DOM вернет текст элемента веб-сайта (в этом примере - 1002391, то есть код заказа пользователя). Фактически, будет срабатывать свойство innerText:

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

На скриншоте выше у одного из товаров (где id=item-23) есть несколько атрибутов - href, data-quantity, class, data-product_id, data-product_sku, aria-label. И если вы захотите получить значение определенного атрибута, вам необходимо указать его в поле Название атрибута:

Тогда для данного конкретного товара переменная Элемент DOM вернет значение A12, поскольку именно оно задано для атрибута data-product_sku.

Чтобы проверить, правильно ли создана переменная, сохраните ее. Перейдите в раздел Триггер и создайте триггер типа Просмотр страницы. Не задавайте никаких дополнительных условий. Пусть он срабатывает на всех страницах.

Сохраните изменения.

Создайте тег, перейдя в раздел Теги:

В открывшемся окне в Шаблон тега из выпадающего списка выберите Мини дебагер триггеров и переменных. Если его в списке нет, вероятно, вы впервые используете данный шаблон тега. Тогда вам необходимо сначала выбрать Шаблоны из каталога:

Этот шаблон предназначен для временной отладки отработки триггеров и переменных в контейнере Яндекс Тег Менеджера. Он позволяет безопасно выводить значения в консоль браузера, не влияя на остальной код.

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

В качестве триггера добавьте триггер просмотра страницы, созданный на предыдущем шаге, а в поле Переменная такую конструкцию:

, где вместо DOM lead_id используйте имя своей собственной переменной Элемент DOM, сославшись на нее с помощью двойных фигурных скобок (начните вводить, а затем выберите ее из списка).

В результате вы должны получить тег отладки примерно такого вида:

Сохраните тег, а затем запустите режим предварительного просмотра.

Дождитесь компиляции ссылки. Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

Примечание: подробнее о режиме предварительного просмотра в Яндекс Тег Менеджере читайте в этом руководстве.

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Откройте консоль разработчика и перейдите на вкладку Console:

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

Как видите, все настроено корректно. Переменная Элемент DOM автоматически извлекает текстовое содержимое из элемента с заданным идентификатором (id). Теперь вы можете использовать ее для передачи вместе с тегом в различные аналитические и рекламные инструменты. Например, в ту же Яндекс Метрику вместе с событием отправки формы и параметром события.

Название товара? Стоимость покупки? Бренд? Характеристики продукта? Хлебные крошки? Имя автора публикации на информационном портале? Если данные присутствуют на странице, то вы можете с помощью Элемент DOM извлекать их содержимое, создав для каждого параметра свою собственную переменную.

Важно: элемент должен существовать на странице в момент срабатывания переменной. Если его еще нет, то Яндекс Тег Менеджер не отобразит это значение, либо оно вернется как undefined.

Но что делать, если у элемента нет идентификатора (id)? Тогда вам нужно использовать другой Метод выбора - Селектор CSS.

Метод выбора - Селектор CSS

Чтобы использовать данный метод выбора, вы должны разбираться в такой теме, как селекторы CSS. Если она вам незнакома, я рекомендую изучить следующие материалы в моем блоге:

• CSS-селекторы в Google Tag Manager. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах и GTM
• CSS Selector Tester и его аналоги
• Google Tag Manager и jQuery
• Редактирование элементов на странице с помощью Google Tag Manager
• Подмена текста динамически на странице с помощью Google Tag Manager
• Подмена контента на сайте с помощью Google Tag Manager
• Динамическая подмена контента на сайте с помощью Google Tag Manager

Хоть они и написаны с использованием примеров для диспетчера тегов Google, тема CSS-селекторов является фундаментальной, поэтому читая все вышеприведенное, вы можете ставить знак равенства Google Tag Manager = Яндекс Тег Менеджер.

И обязательно посмотрите подробную лекцию на эту тему. Rutube:

И YouTube:

Если кратко, селекторы CSS позволяют нацеливаться на определенные элементы веб-сайта и точно указать, к каким элементам на веб-странице применять заданные стили (например, цвет, размер, отступы и т.д.).

Простой пример CSS:

В этом фрагменте CSS указано, что все элементы, содержащие селектор класса .green-button (где в атрибуте class указано green-button), будут окрашены в зеленый цвет (background-color: green), а также иметь белый текст внутри (color: white).

Пример посложнее - это инспектирование какого-нибудь элемента прямо на сайте. Только теперь вам нужно смотреть не на структуру DOM-дерева и вкладку Elements, а на правую часть окна, где расположена вкладка Styles:

На скриншоте выше выделена синяя кнопка. В правой части окна отображаются ее стили - цвет кнопки, шрифт, размер, позиция, отступы и многое другое. Каждый элемент на странице имеет свой набор таких правил, у кого-то их много, у кого-то нет. Именно поэтому селекторы считаются основой для создания красивых и удобных интерфейсов. Это и есть классический пример CSS.

Но селекторы CSS настолько универсальны, что их можно использовать и в DOM. Вы можете выбрать определенный/конкретный элемент на странице и извлечь его значение благодаря специальным конструкциям. Наиболее часто используемые в классическом JavaScript:

• document.querySelector() - возвращает первый элемент, который соответствует указанному селектору CSS;
• document.querySelectorAll() - возвращает все элементы, которые соответствуют указанному селектору CSS.

Вернемся к нашему предыдущему примеру, где мы использовали идентификатор id для извлечения текстового содержимого (кода заказа) на странице. Чтобы найти селектор для данного элемента, откройте консоль разработчика и проинспектируйте его. Выделите ваш элемент и вызовите контекстное меню с помощью правой кнопки мыши. Выберите Copy - Copy selector:

Этим действием вы скопировали селектор для данного элемента. Фактически, вы скопировали уникальный путь до него.

Чтобы убедиться, что это то, что нужно, перейдите в консоли разработчика на вкладку Console, вставьте в строку нижеприведенную конструкцию, а затем нажмите Enter:

, где вместо #lead_id добавьте селектор CSS своего элемента.

Вы должны увидеть первый возвращаемый элемент:

В этом примере на странице присутствует всего один элемент с соответствующим селектором. Но у вас может быть ситуация, при которой на странице размещено несколько элементов с одинаковым условием. Например, на сайте интернет-магазина такое может встречаться для кнопок:

Когда вы скопируете селектор и перейдете на вкладку Console, то введите такую конструкцию и нажмите Enter:

, где вместо div > div.button-group > button.remarketing_cart_button используйте свой селектор.

В том случае, когда на странице несколько элементов имеют одинаковый селектор CSS, метод querySelectorAll вернет все элементы, которые соответствуют указанному селектору CSS.

Рядом с NodeList в скобках будет отображаться количество найденных на странице элементов с заданным CSS (в примере выше их 16). Вы можете раскрыть этот список и увидеть их все детальнее. А наведя мышкой на какой-то элемент конкретно, вы увидите, как он подсветится на самой странице:

Именно благодаря конструкциям document.querySelector() и document.querySelectorAll() вы можете найти селектор CSS для нужного элемента, который впоследствии вставите в пользовательскую переменную Элемент DOM с методом выбора Селектор CSS. Для этого просто используйте копирование селектора через инспектирование элемента на вкладке Elements и вкладку Console.

Иначе, если вы не знаете, как найти правильный CSS-селектор, вам пришлось бы сразу добавлять его в переменную в Яндекс Тег Менеджере, редактировать тег мини дебагера для вывода сообщения в консоль (как мы это делали в предыдущем примере), затем включать режим предварительного просмотра и проверять результат многократно, пока не найдете подходящее условие.

Когда вы наконец получите желаемый результат и найдете селектор элемента, добавьте его в пользовательскую переменную Элемент DOM в поле Селектор элемента:

Как и в методе выбора Идентификатор, здесь тоже присутствует поле Название атрибута, которое является необязательным для заполнения. Его функциональное назначение точно такое же. Если оставить его пустым, переменная Элемент DOM вернет текст элемента веб-сайта (в этом примере - 1006245, то есть код заказа пользователя). А если вы захотите получить значение определенного атрибута у данного элемента, вам необходимо указать его в поле Название атрибута.

Таким образом, для моего примера были созданы две пользовательские переменные, которые извлекают одно и то же со страницы, но настроены они двумя разными способами:

1. Метод выбора - Идентификатор - Идентификатор элемента lead_id
2. Метод выбора - Селектор CSS - Селектор элемента - #lead_id

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

Измененный тег отладки будет выглядеть так (триггер типа Просмотр страницы остался тем же):

Я просто добавил вторую переменную в консольное сообщение. Теперь они обе должны выводить одно и то же значение.

Запустив режим отладки Яндекс Тег Менеджера и перейдя на вкладку Console, вы должны получить одинаковый результат:

Как видите, две переменные Элемент DOM выводят одно и то же (правильное!) значение. Это означает, что вы можете использовать любую из них для передачи вместе с тегом в различные аналитические и рекламные инструменты. Например, в ту же Яндекс Метрику вместе с событием отправки формы и параметром события.

Итоги

Добавление пользовательской переменной Элемент DOM в Яндекс Тег Менеджер - это еще один шаг к более гибкой и универсальной настройке отслеживаний. Если вы ранее использовали такую переменную в Google Tag Manager, теперь у вас есть возможность перенести аналогичную логику в ЯТМ.

Данная переменная используется для извлечения данных из HTML-элементов на странице. Она позволяет "достать" нужную информацию из структуры документа (DOM - Document Object Model) и использовать ее в тегах (передавать в сторонние инструменты - Яндекс Метрику, VK Рекламу и др.), триггерах (например, можно добавить условие: если в этом элементе присутствует такой-то текст -> активируй тег) или других переменных.

С помощью переменной Элемент DOM можно получить множество различной информации. Например:

• название товара с карточки;
• стоимость из блока с ценой;
• категорию из breadcrumbs (хлебных крошек);
• ID или атрибут кнопки;
• имя автора статьи;
• идентификатор транзакции или id заявки;
• и многое другое.

Как вы помните, подмена контента на сайте также происходит с использованием схожего механизма. Поэтому не стоит недооценивать значение и роль новой пользовательской переменной в Яндекс Тег Менеджере.

Но у переменной Элемент DOM есть и свои недостатки. Правда, они касаются не только ее, а систем управления тегами в целом - и Яндекс Тег Менеджера, и Google Tag Manager. Главная проблема - это зависимость от структуры DOM, то есть от верстки и исходного кода страницы. Поскольку вся работа строится на обращении к селекторам, идентификаторам, классам и атрибутам, любые изменения в них вашим разработчиком могут привести к тому, что ранее настроенные правила перестанут работать.

Поэтому, прежде чем использовать CSS-селекторы и переменную Элемент DOM, важно оценить текущую ситуацию и возможные риски. Если сайт обновляется редко, вероятность поломки настроек невелика. Но если разработчики активно вносят изменения, проводят A/B-тесты и регулярно улучшают интерфейс (что-то меняют), стоит рассмотреть альтернативные способы настройки. Например, выполнять отслеживания с использованием уровня данных (dataLayer).