Глеб Боярский - Цифровой сад

Сайт это ваш DOM. CSSТИЛьная веб-аналитика. Клик это конверсия, но не всегда

время чтения ~16 мин.

Когда мы открываем браузер и переходим на сайт, за несколько секунд до отображения визуала происходит магия. Для нас она не заметная, мы видим финал процесса, красивый сайт, кнопочки и формы. Но предшествует отображению важных этап — построение DOM-дерева. Что же это за домик на дереве? А все просто, сайт состоит из HTML конструкций, скриптов, и в момент обращения к домену по конкретному адресу страницы начинается сборка всех этих блоков кода в одно большое ветвистое дерево. По сути это вложенный список в виде аутлайнера.

Просчитывая HTML, CSS, JavaScript, DOM-дерево движок браузера отображает нам готовый визуальный результат в виде веб-страницы.

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

Зачем это вообще знать интернет-маркетологу или веб-аналитику, спросите вы🤔? – без знания технического маркетинга и устройства работы множества элементов на сайте, которые мы собираемся отслеживать, построить сложные цели и воронки для маркетинга не получится. Так же, кроме понимания отработки модели DOM, нужно хотя бы немного понимать HTML теги, что они делают.

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

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

Итак, наша база и важность для веб-аналитики Window, DOM, BOM, Java Script:

  • Window обеспечивает общий контекст выполнения скриптов и взаимодействие с браузером.
  • DOM позволяет отслеживать события на странице (клики, изменения), анализировать структуру и содержимое.
  • BOM предоставляет информацию о состоянии браузера и возможность управлять навигацией и историей.
  • JavaScript — основной инструмент для программного доступа к данным и отправки аналитических событий.

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

  • Откройте веб-страницу в браузере.
  • Нажмите F12 или кликните правой кнопкой мыши и выберите “Инспектировать” (Inspect).
  • *Перейдите на вкладку “Консоль” (Console)
  • Вставьте код и нажмите Enter, чтобы выполнить его.
    • Если коносль выдает ошибку и не дает вставить код введите команду “allow pasting”
// Проверяем, поддерживается ли геолокация в браузере
if (navigator.geolocation) {
  // Запрашиваем текущие координаты
  navigator.geolocation.getCurrentPosition(
    function(position) {
      // Получаем широту и долготу из объекта position
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log("Широта:", latitude);
      console.log("Долгота:", longitude);
    },
    function(error) {
      // Обработка ошибки, если пользователь отказал или не удалось получить координаты
      console.error("Ошибка получения геолокации:", error.message);
    }
  );
} else {
  console.log("Геолокация не поддерживается этим браузером");
}

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

Самое приятное в моей профессии, что сейчас достаточно внимательно посмотреть на сайт, определить задачу и пойти в чат с ИИ грамотно задав промт по отслеживанию цели. Например геолокацию📍, версию браузера, да что угодно! То есть знать все команды и то как выглядят базовые скрипты JS не нужно, есть все таки польза от Богоизбранного. На лекциях у Я.Осипенкова приводились примеры команд Window в консоли. Выше описано, что это за зверь такой. Идем в нейронную сеть и задаём промт:

Что можно отследить в консоли с помощью команды Window

Еще одна интересная команда это document.title – выдача заголовка страницы. 📃 По сути это тоже самое, что есть в отчётах счётчиков аналитики, обычно называется “Заголовок страницы”. Зачем же его отслеживать, когда он и так есть 🤷. Да это избыточно, но есть нюанс 😁. С помощью этой переменной можно вычислить посещаемость страницы 404, которая обычно появляется динамически без смены URL.

Получается что зная техническую базу и то как устроена могучая компания Window, DOM, BOM, Java Script — докопаться до сути решения будет совсем не сложно, конечно при наличии интереса и мотивации😉 — это вопрос гуманитарный. Нравится или нет, но с консолью разработчика придется посидеть, набить руку. 🤝 С ее помощью проверять отработку событий, искать ошибки и выбирать CSS селекторы для целей.

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

Нюанс по считыванию кода сайта

Код страницы (DOM) загружается сверху вниз. При отладке в Google Tag Manager (GTM) слева можно видеть последовательность загрузки — сначала элементы DOM, потом событие Window Loaded и другие этапы. Иногда бывает так, что переменная получает значение раньше, чем наступает этап срабатывания триггера. В этом случае может возникнуть небольшая задержка, из-за чего переменная примет значение Undefined, и данные не попадут в аналитику.

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

CSS-селекторы

Прежде чем приступать к работе я рекомендую как и автор курса веб-аналитики Я.Осипенков установить данные расширения в Google Chrome. Без них будет сложно работать 😓:

Теперь про селекторы. Любая веб-страница состоит из множества HTML-элементов с разными атрибутами. Самыми популярными из них являются атрибуты ID и Class. Эти атрибуты помогают однозначно с элементом или группирует их на странице. К тому же элементы получают стили через таблицу CSS, которая использует селекторы для применения стилей.

В консоли браузера можно открыть вкладку «Стили» и увидеть, какие CSS-правила применяются к выбранному элементу.

В Google Tag Manager (GTM) для отслеживания кликов часто используются переменные на основе атрибутов элемента: Click ID (по ID) и Click Classes (по классам). Важно понимать, что CSS селектор — это немного другой тип переменной, В GTM это Click Element с правилом «соответствует CSS селектору». CSS селектор всегда существует у элемента, в отличие от отдельных атрибутов, поэтому он более надёжен для настройки целей в GTM.

Кратко по важным моментам для технарей и промтов ИИ, чтобы вспомнить:

  • 🆔 атрибут на странице всегда в одном экземпляре
  • Атрибутов Class может быть много🤔, одинаковые по стилю элементы объединяют в группу.
  • Если у элемента нет ID и Class то точно есть селектор, на него и настраиваем события
    • Самый надежный вариант это конечно ID но их часто нет в структуре кода страницы на элементах.
    • Чтобы проверить дубликаты в селекторах нужно ввести в консоли команду document.querySelector указав в скобках скопированный.
    • Можно из 🆔сделать селектор поставив знак решетку перед ним
    • Из Class тоже можно сделать селектор заменив пробелы на точки и вначале поставив точку
      • Как видим отслеживать события можно разными конструкциями, они взаимозаменяемы ⚠️.
  • Можно использовать разные атрибуты в элементах для отслеживания, а через расширение xPathChecker проверять. Главное не забывать про выделение атрибуты в квадратные скобки “[ ]” если хотим найти множество элементов с одинаковым атрибутом
  • CSS селектор при копировании может выглядеть по разному в разных браузерах, но работать будет корректно.
  • Если нужно отслеживать кнопки не по порядку, а например через одну и их много, как пример кнопки в корзину в интернет магазинах: в этом случае нужно через запятую указать все селекторы.
    • Проверяем список в Checker. Потом вставляем в Тег менеджер весь список. Окошко в Тег Менеджере маленькое, но он проглотит любой объем текста.
      • Кстати вбивая в расширение HTML теги можно проверить, что есть на странице: H1, a, div и т.д.
  • Существует множество регулярных выражений в использовании селекторов. Например, нам нужно отследить клики только по картинкам формата PNG или только по скачке PDF файлов. Для этого в селектор прописывается спецсимволы. Условия могут быть: начинается с, заканчивается на, и содержит.
    • Вернемся к интернет магазину, где много товаров и нам нужно отследить все элементы у которых есть артикул начинающийся с определенных цифр, или одинаковый текст в начале названия карточки.
      • Тут применим универсальный селектор со знаком “звездочки”
        • Клик по верхнему элементу по CSS селектору, фиксирует всю область. Но бывает что в DOM сайта верхний селектор не применяется к вложенным элементам блока. Для этого через пробел после селектора ставится знак “звездочка”
          • Если быть более точным, один и тот же селектор вставляется два раза через запятую, и после второго уже ставим через пробел символ “звеpдочки”
            • Данная фишка важна для отслеживания целого блока(зоны) нужного элемента.

Специальные символы которые используются при настройках различных атрибутов и селекторов часть правил программирования 👨‍💻, и это как раз нужно зазубрить. Для настройки целей и триггеров в Google Tag Manager (GTM) при использовании селекторов CSS применяются следующие символы для идентификации элемента по ID, классу и атрибутам:

  • Для ID элемента используется символ решетки #. Например, селектор #button1 выбирает элемент с атрибутом id="button1".
  • Для класса используется точка .. Например, селектор .menu-item выбирает все элементы с классом menu-item.
  • Для атрибутов используются квадратные скобки [], внутри которых указывается имя атрибута и, при необходимости, его значение:
    • [attr] — выбирает элементы с атрибутом attr независимо от значения.
    • [attr="value"] — выбирает элементы, у которых атрибут attr равен value.
    • [attr^="value"] — атрибут начинается с value.
    • [attr$="value"] — атрибут заканчивается на value.
    • [attr*="value"] — атрибут содержит подстроку value.

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

  • Клики по элементам (кнопки, ссылки)
  • Отправка форм (регистрация, заявки)
  • Ошибки при заполнении форм
  • Продвижение по многошаговым формам или процессам
  • Скроллинг страницы (глубина прокрутки)
  • Просмотры видео (запуск, пауза, завершение)
  • Просмотры страниц и переходы между ними
  • Клики по внешним ссылкам
  • Авторизация и вход в личный кабинет
  • Взаимодействие с модальными окнами и всплывающими подсказками
  • Пользовательские действия интерфейса (перетаскивание, наведение)
  • Загрузка и скачивание файлов
  • Для e-commerce
    • Добавление товара в корзину
    • Оформление покупки и завершение транзакции
    • Использование фильтров и сортировки товаров/контента (для e-commerce)
    • Поиск по сайту (запросы в поисковой строке)
    • Просмотры категорий товаров и карточек

Большинство этих действий не получится отследить без селектора CSS, ID или Class. Один раз разобравшись с консолью, и деревом сайта возможности по отслеживанию вырастают, что не скажешь про стандартный интерфейс Яндекс Метрики, где с помощью мышки получается настроить клик по кнопке или отправку формы.

Да эти цели будут работать, но гарантию качества данных никто не дает – сайты разные, отслеживание происходит очень часто неверно в автоматических целях и даже в тех, которые забирают селектор CSS с кнопки с помощью Метрики. К тому же кроме кнопок отследить события кликов по другим элементам не получится, интерфейс счетчика этого не позволяет.

В финале прикладываю краткий список алгоритма отслеживания:

Алгоритм отслеживания кликов от Я, Осипенкова

  • если у элемента есть id, то в качестве условия активации триггера использовать Click ID содержит/равно
  • если у элемента есть class, то в качестве условия активации триггера использовать Click Classes содержит/равно
  • если нет 1 и 2, то в качестве условия активации триггера использовать Click Element соответствует селектору CSS
  • если напротив Click Element ничего не показывает или показывает что-то в скобках […], то использовать решение из этой статьи: https://osipenkov.ru/track-click-datalayer/

Полезные ссылки по теме

Вид графа

Обратные ссылки