Подмена текста динамически на странице с помощью Google Tag Manager

17 марта, 2025

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

Содержание

Введение

Интересные материалы по подмене контента:

Наверняка вы знаете, что в своем магазине я продаю ответы на различные сертификации:

Цифровые товары в моем магазине

И в описании к этим цифровым товарам есть дата обновления файла. Например, март 2025 года:

Описание товара

Поскольку текст написан вручную, мне приходится каждый месяц заходить во множество товаров и менять месяц на следующий. В год приходится это делать ~ 120 раз (12x10 позиций). В принципе, в этом нет ничего сложного. Но можно ли это как-то автоматизировать?

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

Отображение текущего года может быть реализовано с помощью функции

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

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

геолокация. Если пользователь заходит на сайт из Москвы, он видит предложения, актуальные для москвичей, например, акции местных магазинов или события в городе (местоположение пользователя можно определять по динамическому параметру UTM, если вы рекламируетесь в Яндекс Директе или Google Рекламе);
устройства. Показывать на сайте уникальный промокод, в зависимости от типа устройства. Если посетитель заходит с телефона, то промокод MOB12, если с ПК - DESK12 и т.д.;
время суток. В ночное время на сайте могут отображаться специальные предложения или скидки для ночных пользователей, а их подмену как раз осуществлять по заранее заготовленным сценариям;
количество сессий. Пользователям, которые часто возвращаются на сайт, можно предложить программы лояльности или специальные предложения (если у вас установлен счетчик Google Analytics 4, то номер сеанса можно извлечь из файла cookie).

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

А зачем вообще совершать подмену? На то есть ряд причин:

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

Этот кейс и статья - просто подмена текста с учетом текущей даты, ничего более... Но даже в ней вы сможете найти интересные для себя подходы и реализации. Готовы? Давайте начнем!

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

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

Пока неизвестно что из этого сложнее, но попробуем.

Общее условие подмены текста

Самое простое - это пойти по пути наименьшего сопротивления, открыть один из цифровых товаров, выделить подменяемый текст и с помощью расширения Copy CSS Selector скопировать селектор элемента:

Копирование селектора

В открывшемся окне расширения нас интересует путь к элементу CSS PATH:

CSS PATH

Скопировать селектор можно и без расширения для браузера, а только используя консоль разработчика. Для этого откройте ее через клавишу F12 (для Google Chrome) или вызвав контекстное меню с помощью правой кнопки мыши - Просмотреть код. А затем, перейдя на вкладку Elements, проинспектируйте нужный элемент. Открыв еще раз контекстное меню с помощью правой кнопки мыши, выберите Copy - Copy selector:

Copy - Copy selector

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

Если вы не знаете что такое CSS-селекторы и как их находить и копировать, обязательно прочитайте эти материалы:

Таким образом, у одного товара будет такой путь:

div#product-6617 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

1	div#product-6617 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

У другого, если скопировать селектор:

div#product-7417 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

1	div#product-7417 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

У третьего товара - другой CSS PATH:

div#product-6608 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

1	div#product-6608 > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

И так далее. Как видите, у всех селекторов есть общая конструкция, отличается только часть с #product-. С помощью регулярных выражений для селекторов CSS можно написать общее условие, учитывающее все мои товары:

div[id^="product-"] > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

1	div[id^="product-"] > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)

Примечание: если вы не обладаете знаниями по написанию общих конструкций для CSS, воспользуйтесь любым из доступных чат-ботов (ChatGPT, Gemini, YandexGPT, Grok, GigaChat, Copilot, DeepSeek и т.д.). Нейросеть справится с этой задачей за несколько секунд.

Проверить корректность итогового условия можно с помощью другого расширения CSS and XPath checker:

Проверка общего условия

Нужный мне текст подсвечивается у всех товаров. Значит общее условие селектора правильное.

Функция JavaScript для подмены месяца

В марте - март, в апреле - апрель, в мае - май и т.д. Как только наступает первое число нового месяца -> вместо старого текста должно подставляться новое значение.

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

Я не буду оригинален, когда скажу, что и с этой задачей лучше всего справится чат-бот ИИ. А запрос для него будет звучать так: Напиши JS-функцию в формате ECMASCRIPT ниже 2015, которая бы возвращала результатом текущий месяц (кириллицей) и год в формате месяц год

Через мгновенье я получил итоговый результат:

function getCurrentMonthAndYear() {
    var months = [
        'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
        'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'
    ];
    
    var date = new Date();
    var month = months[date.getMonth()];
    var year = date.getFullYear();
    
    return month + ' ' + year;
}

function getCurrentMonthAndYear() {

var months = [

'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',

'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'

];

var date = new Date();

var month = months[date.getMonth()];

var year = date.getFullYear();

return month + ' ' + year;

}

А в Google Tag Manager это выглядит так:

Собственный код JavaScript

Сохраните переменную.

Предварительно вы можете проверить результат с помощью режима отладки Google Tag Manager.

Проверка переменной с помощью режима предварительного просмотра

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

Тег подмены текста

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

<script>
  document.querySelector('div[id^="product-"] > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)').innerText="{{CJS - Текущий месяц и год}}"
</script>

document.querySelector('div[id^="product-"] > div > div:nth-of-type(2) > div > div > p > strong:nth-of-type(2)').innerText="{{CJS - Текущий месяц и год}}"

</script>

Этот код ищет на странице элемент с нужным текстом и заменяет его на значение, которое динамически подставляется из переменной, содержащей функцию JavaScript.

В качестве триггера активации можно задать конкретное условие (на каких страницах у вас осуществляется подмена):

Триггер активации - страницы товаров

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

Пользовательский HTML-тег

Сохраните тег и проверьте окончательную реализацию с помощью режима отладки Google Tag Manager.

Проверка подмены текста на странице

Если вы сделали все правильно, то для выбранного текста будет осуществляться подмена в тот момент, когда наступит первое число следующего месяца. Или выполняться тот сценарий, который вы определили для своего проекта.

Метки: css-селекторы, Google Tag Manager, подмена контента

Вход

Регистрация

Подмена текста динамически на странице с помощью Google Tag Manager

Введение

Общее условие подмены текста

Функция JavaScript для подмены месяца

Тег подмены текста

Получайте бесплатные уроки и фишки

Еще статьи