Редактирование элементов на странице с помощью Google Tag Manager

В этой статье я продемонстрирую примеры редактирования элементов на странице сайта с использованием Google Tag Manager.

Введение

Сразу хочу отметить, что все нижеописанное является демонстрацией возможностей диспетчера тегов Google и его нестандартного использования. Я не призываю вас в любой непонятной ситуации выполнять эти действия, поскольку любая работа с элементами на странице должна выполняться на стороне исходного кода сайта и компетентным человеком (как правило, это задача программиста), тем более, когда речь касается редактирования HTML-элементов, изменений CSS-стилей, внедрение JavaScript-кода и т.д.

Это связано с тем, что работа с Google Tag Manager часто связана с Document Object Model (DOM), поскольку GTM позволяет добавлять и управлять тегами на веб-страницах, а эти теги могут взаимодействовать с элементами на странице через DOM.

Основные моменты, связанные с работой диспетчера тегов Google и DOM:

• События и триггеры. В Google Tag Manager можно настроить триггеры, которые активируются при определенных действиях на странице (например, клики по элементам, загрузка страницы и т.д.). Для этого GTM использует элементы DOM, чтобы отслеживать действия пользователей;
• Переменные. GTM позволяет использовать переменные, которые могут извлекать данные из DOM. Например, можно получить текст элемента, значение поля формы или атрибут какого-то элемента, что полезно для передачи данных в инструменты аналитики;
• Активация тегов. Когда триггер активируется, он может запускать различные теги (например, Google Analytics 4, Facebook* Pixel и т.д.), которые могут отправлять данные об взаимодействии с DOM в соответствующие системы;
• JavaScript и пользовательские теги. Если стандартных функций GTM недостаточно, можно написать собственный JavaScript-код для более сложных взаимодействий с DOM;
• Отладка и предварительный просмотр. В GTM есть режим отладки, который позволяет видеть, какие триггеры срабатывают и какие теги активируются. Это очень полезно для проверки правильности взаимодействия с DOM.

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

Так или иначе, если есть возможность работы с HTML-элементами на странице без использования Google Tag Manager, то лучше это делать программно и с помощью разработчика. Если такой возможности нет, или у вас схожая с приведенными ниже примерами ситуация, то прежде, чем редактировать элементы на странице с помощью GTM, обязательно взвести все ЗА и ПРОТИВ. И только после этого переходите к реализации.

Примечание:

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

Как можно изменять содержимое страниц и элементов с помощью Google Tag Manager? Давайте разберем классические примеры.

Редактирование текста

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

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

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

Как быть в таком случае? Вам как раз поможет Google Tag Manager!

Сначала определите URL-адрес страницы, на которой размещена эта кнопка. Это условие вы будете использовать как дополнительное для триггера активации в GTM, чтобы изменения вступали в силу не на всем сайте и на всех страницах, а на конкретной с конкретной кнопкой. В моем примере - это https://lib.osipenkov.ru/vk-leadform-to-google-sheets/;

Затем найдите селектор кнопки, для которой вы хотите изменить текст. Для этого откройте консоль разработчика (клавиша F12 для Google Chrome) и перейдите на вкладку Elements (Элементы). Найдите в исходном коде странице свою кнопку и, выделив ее, нажмите правой кнопкой мыши. В контекстном меню выберите Copy - Copy selector:

Селектор выбранного элемента (кнопки) будет скопирован в буфер обмена. Вы можете перепроверить себя, установив расширение CSS and XPath checker и вставив полученную конструкцию селектора в соответствующее поле. Если элемент выделен верно, значит данный селектор можно использовать для изменения текста кнопки.

Проверить себя можно и другим способом. Перейдите на вкладку Console и введите следующую команду, нажав в конце Enter:

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

Подробнее о том, как находить селекторы у конкретных элементов, читайте в моих других материалах блога:

• CSS-селекторы в Google Tag Manager. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах и GTM
• CSS Selector Tester и его аналоги
• Google Tag Manager и jQuery

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

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

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

, где вместо #post-3661 > div.entry > div.article-source-link > a и текста Приобрести инструкцию вы указываете селектор собственной кнопки и нужный текст для подмены. Если вы все сделали правильно, то после ввода такой конструкции на вкладке Console и нажатии Enter вы увидите изменение самого элемента (кнопки):

Этот итоговый код можно использовать в самом диспетчере тегов Google. Откройте Google Tag Manager и создайте триггер типа Инициализация или Просмотр страницы. Задайте для него дополнительное условие активации, конкретизировав изменение по странице, на которой размещена кнопка (см. выше). В моем примере - это была https://lib.osipenkov.ru/vk-leadform-to-google-sheets/, поэтому само условие может выглядеть так - Page URL содержит vk-leadform-to-google-sheets:

Задайте название триггеру и сохраните его. Теперь создайте тег типа Пользовательский HTML. Вставьте в него между тегами <script></script> конструкцию, которую вы получили выше, со свойством innerText и измененным текстом кнопки:

В качестве триггера активации задайте триггер, созданный на предыдущем шаге. Сохраните тег.

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

Примечание: таким же образом можно осуществлять подмену контента на сайте. Например, в зависимости от значения utm_метки показывать разные номера телефонов/e-mail/блоки и т.д.

Редактирование стилей

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

Когда мы используем CSS-селекторы, мы находим элементы в DOM. Для управления внешним видом HTML-документа существует формальный язык CSS. CSS - это аббревиатура Cascading Style Sheets или Каскадные Таблицы Стилей. Обычно CSS называют просто стили. На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4. Некоторые источники формально упоминают и про CSS5.

С помощью CSS можно управлять различными аспектами оформления, такими как:

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

Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути. Например, у платформы lib.osipenkov.ru есть отдельный путь до файла style.css, в котором хранятся все стили сайта.

Может быть и несколько файлов .css, которые содержат в себе стили для разных элементов или версий сайтов (мобильная/десктоп, домен/поддомен и т.д.). Все зависит от конкретной реализации. При изменении стилей конкретного элемента основная задача - найти этот элемент в исходном коде. Для этого используйте консоль разработчика и вкладку Elements (Элементы). Ровно то, что мы делали выше.

Выделив конкретный элемент, справа от него в отдельной части окна должны отображаться стили выбранного элемента:

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

Я специально выбрал самый простой пример изменения стилей, чтобы вы смогли понять основную концепцию. Поскольку мы хотим изменить только текст кнопки (и ничего более), то в таблице стилей за это отвечает свойство background-color. Перемещаясь по элементу на вкладке Elements, вы в какой-то момент найдете нужный стиль. Как видите на скриншоте выше, для него задано значение #529de1 !important. Это и есть тот самый цвет кнопки.

Мы можем локально (в рамках ТОЛЬКО СВОЕГО БРАУЗЕРА) изменить это значение. Просто нажмите на свойство или квадратик с цветом:

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

В результате вы увидите изменение в своем браузере у этого элемента:

У других пользователей все останется по-прежнему. Если вы хотите все вернуть назад, просто обновите страницу. Тогда все изменения будут утеряны, и сам элемент вернется в первоначальное состояние.

Предположим, что вы определились со стилем новой кнопки. Все, что вам нужно - это скопировать селектор данной кнопки (у вас он уже есть, см. выше) и добавить к нему CSS-свойство background-color с новым значением цвета. Для этого в Google Tag Manager можно использовать триггер и тег типа Пользовательский HTML из нашего первого примера, а можно создать новые специально под стили.

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

, где вместо #post-3661 > div.entry > div.article-source-link > a вы указываете селектор собственной кнопки, а для свойства background-color задаете нужное значение цвета.

В Google Tag Manager это будет выглядеть так:

Внимание: стили в теге HTML задаются между тегами <style></style>, а не <script></script> ! Это важно.

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

Запустив режим отладки GTM и перейдя на страницу, вы должны увидеть смену стилей у текущего элемента:

Теперь ваш стиль для конкретного элемента будет приоритетнее, чем те стили, которые прописаны в общей таблице .css для сайта. После проверки можно публиковать контейнер GTM для всех пользователей.

Как вы понимаете, работа со стилями сайта не входит в обязанности интернет-маркетолога и веб-аналитика. Данные изменения должен выполнять специалист с соответствующими компетенциями - программист или верстальщик. И делает это он не с помощью Google Tag Manager, а с использованием CSS и внесением изменений в глобальную таблицу стилей сайта. Иногда в CMS-движках предусмотрено специальное поле для дополнительных стилей, куда как раз можно добавить вышеприведенный код. Тот же lib.osipenkov.ru создан на платформе WordPress, и у этого движка в настройках предусмотрена возможность добавления дополнительных стилей:

Редактирование CSS-стилей возможно с помощью диспетчера тегов Google, но не увлекайтесь этим!

Создание HTML-элементов

Предположим, что мы хотим создать еще одну кнопку под нашей текущей. Как это сделать? Google Tag Manager позволяет создавать элементы на странице с помощью JavaScript-кода, добавив к нему любые пользовательские атрибуты, которые только пожелаете.

Перед добавлением нового элемента на странице с помощью JS вам необходимо определиться:

• с тем, что это будет за элемент (кнопка, список, таблица, аудио/видео, ссылка и др.);
• с тем, где будет размещен данный элемент (в каком блоке, месте на странице);
• со стилями (отступы, цвет, размеры элемента и т.д.);
• с дополнительными атрибутами (при необходимости);

К сожалению, в рамках этого примера я не смогу показать все возможности и разнообразия создаваемых HTML-элементов с помощью JavaScript и Google Tag Manager, потому что оно действительно огромно. Вдобавок, для этого требуются навыки программирования и понимания таких тем, как HTML/CSS/JS. Если вы не обладаете этими знаниями и никогда такого не делали, то для выполнения этой задачи вы можете пойти двумя путями:

• не использовать GTM и поручить эту задачу программисту (легкий и правильный способ создания элемента на странице сайта);
• использовать GTM и чат-боты ИИ в качестве помощников для написания кода.

Мы пойдем сложной дорогой и воспользуемся диспетчером тегов Google и нейросетями. Первое, что нужно сделать - это найти место на странице для отображения нового элемента. Поскольку я буду создавать вторую кнопку сразу же под первой, то она будет размещена в том же блоке. Для этого в консоли разработчика найдите элемент, поднявшись выше кнопки по структуре DOM-дерева. У вас, вероятно, будет так же. Кнопка находится внутри другого какого-то элемента (блока <div>, абзаца <p> и т.д.).

Основная кнопка на платформе lib.osipenkov.ru размещена внутри блока <div> с классом article-source-link (class="article-source-link"):

Чтобы добавить новую кнопку внутри этого элемента, нажмите на него правой кнопкой мыши. В контекстном меню выберите Edit as HTML:

Выбранный элемент станет доступен для редактирования прямо на вкладке Elements:

Скопируйте его код полностью. Он вам понадобится для создания нового элемента внутри текущего элемента.

Теперь откройте чат-бот (например, Gemini или ChatGPT) и задайте ему следующий вопрос:

У меня есть такой HTML элемент:
<div class="article-source-link"> <a href="https://osipenkov.ru/product/vk-leadform-guide/" target="_blank" rel="noopener noreferrer">Приобрести инструкцию</a> </div>
Я хочу внутри него создать кнопку с помощью JavaScript. Как это сделать?

Чат-бот выдаст вам пример итогового кода:

Конкретизировав запрос за несколько раз, вы получите итоговый код с нужными данными. Его необходимо вставить в теге типа Пользовательский HTML между тегами <script></script>. Для моего примера код выглядит вот так:

И в Google Tag Manager:

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

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

Скрытие элемента на странице

Бывают ситуации, когда какой-то элемент на странице является лишним, и его необходимо удалить/скрыть. Поскольку мы не являемся программистами, то удалять HTML-элементы не будем. А вот скрыть на время от глаз пользователей до тех пор, пока его не уберет разработчик - нам под силам.

Изменить видимость элемента в HTML/CSS можно тремя способами:

1. с помощью display: none (элемент полностью исчезает с веб-страницы, не оставляя и следа);
2. задав для элемента visibility: hidden (данный способ убирает элемент из вида, при этом не затрагивая поток HTML-документа, оставляя пустое пространство в том месте, где данный элемент должен был находиться);
3. с помощью свойства opacity (значение opacity: 0 делает прозрачным весь элемент целиком, включая его содержимое, а не только фон элемента);

Для абсолютно позиционированных элементов visibility: hidden и display: none ведут себя одинаково.

В качестве примера давайте полностью скроем блок с кнопками, чтобы ни одна из них не отображалась на странице:

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

Из предыдущего примера мы уже знаем, что кнопки располагаются в блоке <div> с классом article-source-link (class="article-source-link"):

Выделив нужный для скрытия элемент, нажмите на него правой кнопкой мыши. Далее в контекстном меню выберите Copy - Copy selector:

Все последующие действия в Google Tag Manager аналогичны предыдущим. Создайте тег типа Пользовательский HTML и вставьте в него нижеприведенный код:

, где вместо #post-3661 > div.entry > div.article-source-link вы указываете селектор собственного блока/элемента, который необходимо скрыть со страницы. Свойство display:none как раз отвечает за это.

В Google Tag Manager это будет выглядеть так:

Внимание: стили в теге HTML задаются между тегами <style></style>, а не <script></script> ! Это важно.

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

Запустив режим отладки GTM и перейдя на страницу, вы теперь не будете видеть данный элемент и все его содержимое, если таковое было:

Хотя, на самом деле, он, конечно же, в исходном коде страницы остался. Вы можете в этом убедиться самостоятельно, вновь открыв консоль разработчика, вкладку Elements (Элементы) и дойти до того места, где раньше был размещен данный элемент.

Он "как бы" есть на странице и в DOM, но имеет свойство display:none и скрыт на экране пользователя. Таким образом, вы можете манипулировать этим элементом с помощью JavaScript (например, изменять его свойства, добавлять или удалять обработчики событий и т.д.), даже если он не виден пользователю. Однако, если вы хотите полностью удалить элемент из DOM, вам нужно использовать методы, такие как remove(), чтобы он больше не присутствовал в дереве документа.

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