DOM (Document Object Model) и BOM (Browser Object Model)

Что такое DOM (Document Object Model)? А BOM (Browser Object Model)? Зачем про них знать веб-аналитику? Начнем, пожалуй, с ключевой темы, в которую необходимо посвятить читателя до работы с самим диспетчером тегов Google — это браузерное окружение и язык программирования JavaScript (JS). Именно JS станет неотъемлемой частью всей нашей дальнейшей работы.

Все отслеживания, которые вы будете выполнять с помощью Google Tag Manager, связаны с вашим сайтом и веб-страницами. Для открытия веб-сайтов используется специальная программа – браузер (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 (Document Object Model) – это объектная модель документа, которую браузер создает в памяти компьютера на основании HTML-кода, полученного им от сервера. Она представляет собой древовидную структуру страницы, состоящую из узлов. Каждый узел в ней – это объект, который может иметь определенные свойства и методы. Иным словами, HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при сканировании ее текста.

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

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

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

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

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

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

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

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

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

Код для классического JavaScript:

Аналогичная конструкция на jQuery:

Каждый HTML-документ состоит из дерева HTML-элементов и текста, и каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом.

• <html></html> - указывает программе просмотра страниц, что это HTML-документ;
• <head></head> - определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин;
• <body></body> - определяет видимую часть документа;
• <title></title> - помещает название документа в оглавление программы просмотра страниц;
• <h1></h1> … <h6></h6> - заголовки;
• <b></b> - жирный текст;
• <a></a> - ссылки.

И таких HTML-тегов очень много. Вы можете перейти на сайт htmlbook.ru и изучить справочник по HTML.

Почему это так важно при работе с Google Tag Manager? Причин несколько. Во-первых, в диспетчере теге Google на шкале событий по умолчанию отображается событие DOM Ready:

Во-вторых, существует такой же триггер Модель DOM готова (DOM Ready):

В-четвертых, в GTM есть несколько пользовательских переменных, в которых используется DOM – Элемент DOM и Видимость элемента:

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

Это особенно актуально сейчас, в 2024 году, когда различные браузеры отказываются от работы сторонних файлов cookie (third-party cookies), а также постепенно устанавливают все более серьезные ограничения по основным файлам cookie (first-party cookies). Пришло время, когда вы должны уметь извлекать значения из полей формы, которую вводят пользователи на вашем сайте, и передавать эту информацию в Google Analytics 4 и Google Рекламу с целью улучшения точности таргетинга, ремаркетинга, атрибуции и установления прочной связи с офлайн-конверсиями.

На сайте присутствует несколько одинаковых кнопок и вам необходимо настроить событие по клику? Не проблема, если вы знаете, как найти общее условие для всех элементов на странице. И в этом нам поможет JavaScript, Google Tag Manager, DOM и селекторы!

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

Окружение позволяет языку программирования получить доступ к своим объектам, функциям, переменным в дополнение к базовым инструментам JavaScript. В частности, браузер «разрешает» управлять веб-страницами. Схема браузерного окружения приведена ниже:

Объект window является корневым объектом JavaScript. Все объекты JavaScript, а также переменные и функции, определяемые пользователем, хранятся в объекте window.

Примечание: в браузере он называется window, в Node.js — global, в другой среде исполнения может называться иначе. Вы можете убедиться в этом сами, открыв в браузере на любой странице консоль разработчика, перейдя на вкладку Console (Консоль) и введя команду window:

Глобальный объект хранит переменные, которые должны быть доступны в любом месте программы. Например, в нем есть объект document.

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

Вот список некоторых команд в JavaScript для работы с объектом document:

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

Эти команды позволяют получать доступ к элементам на веб-странице и взаимодействовать с ними с помощью JavaScript. К ним мы еще неоднократно вернемся в других главах этого руководства.

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

А поскольку это свойство объекта является встроенным в JavaScript, вы можете перейти в Google Tag Manager и создать пользовательскую переменную типа Переменная JavaScript, задав имя глобальной переменной document.title:

Теперь при переходе на любую страницу в эту переменную будет сохраняться заголовок текущей веб-страницы:

Таким образом, благодаря простой настройке в Google Tag Manager, JavaScript и свойству document.title, вы можете очень легко настроить отслеживание 404 ошибок и передавать событие, когда пользователь попадает на несуществующие страницы, содержащие в заголовке «404» или «Запрашиваемая страница не найдена». Подробнее об отслеживании 404 ошибок для Google Analytics 4 читайте в главе, посвященной практическим приемам работы с Google Tag Manager.

Еще часто используется свойство document.location, которое содержит информацию о текущем URL документа. С помощью этого свойства можно получить или изменить адрес текущего документа.

Команды document.location:

• location.href - возвращает URL текущей страницы;
• document.location.protocol - возвращает протокол (http:// или https://) текущей страницы;
• document.location.hostname - возвращает хост (например, www.example.com) текущей страницы;
• document.location.pathname - возвращает путь к текущей странице;
• document.location.search - возвращает строку запроса текущей страницы (все параметры после знака вопроса в URL);
• document.location.hash - возвращает хеш (например, #section1) текущей страницы;

Приведенные выше примеры относились к работе с документом (веб-странице). Для доступа к инструментам самого браузера используется BOM. Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, методы и свойства для работы с браузером. С помощью BOM можно управлять окном браузера, историей просмотра, cookie и другими элементами браузера.

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

window.navigator возвращает ссылку на объект Navigator, у которого есть методы и свойства приложения, запустившего скрипт. Вот список некоторых команд в JavaScript для работы с объектом navigator:

• userAgent - возвращает строку с информацией о браузере пользователя;
• platform - возвращает строку с информацией о операционной системе пользователя;
• cookieEnabled - возвращает булево (true или false) значение, указывающее, разрешены ли куки в браузере пользователя;
• onLine - возвращает булево true или false) значение, указывающее, подключен ли пользователь к интернету;
• geolocation - объект, предоставляющий доступ к географическому местоположению пользователя;
• language - возвращает строку с информацией о предпочтительном языке пользователя;
• plugins - возвращает список установленных в браузере плагинов;
• serviceWorker - объект, предоставляющий доступ к сервис-воркеру браузера.

Как и в случае с document.title, свойства объекта Navigator является встроенными в JavaScript, поэтому вы можете перейти в Google Tag Manager и создать пользовательскую переменную типа Переменная JavaScript, задав имя глобальной переменной, например для извлечения User-Agent:

И затем увидеть результат извлечения в режиме отладки:

Таким образом, все отслеживания, которые вы будете выполнять с помощью диспетчера тегов Google, завязаны на объектной модели документа (DOM) и объектной модели браузера (BOM).