Динамическая подмена контента на сайте с помощью Google Tag Manager

28 ноября, 2024

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

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

Содержание

Начало

Для тех, кто ранее не читал мое руководство по подмене контента на сайте с помощью GTM, я рекомендую заглянуть на эту страницу. В ней подробно описан процесс подмены заголовков на странице в зависимости от значения, установленного и передаваемого в URL-адресе пользователя в метке utm_content.

Подмена заголовка на сайте

Например, если посетитель перешел на сайт и у него в ссылке присутствует параметр utm_content=zag1, то Google Tag Manager сопоставляет эти входные данные с результатом из пользовательской переменной типа Таблица поиска:

Переменная "Таблица поиска"

И после этого подменяет контент благодаря свойству innerText или innerHTML классического JavaScript, а также через метод html() в jQuery, который используется для установки содержимого элемента (любое содержимое, которое было в этом элементе, полностью заменяется новым содержимым).

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

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

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

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

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

Разберем каждый этап подробнее.

Определение города пользователя

Классический JavaScript не имеет доступа к геолокации пользователя без явного разрешения. Для определения города пользователя необходимо использовать сторонний API, который предоставляет такую информацию (например, Google Maps Geocoding API или Nominatim от OpenStreetMap). Вы можете воспользоваться за помощью к чат-боту ИИ для написания такого скрипта, а можете взять готовое решение от ipgeolocation.io. В блоге у меня есть отдельная статья на эту тему.

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

разработать свое собственное, поручив задачу программисту;
использовать бесплатное количество запросов, которое предоставляет сервис в качестве demo/free-тарифа;
не использовать определение города пользователя в своем проекте;
использовать динамические параметры URL, которые предоставляют Google Реклама и Яндекс Директ.

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

Например, в Google Ads есть параметры ValueTrack, благодаря которым вы можете определить, использовали ли люди, нажавшие на ваши рекламные объявления, мобильные устройства, где они находились, когда нажимали на ваши объявления, и многое другое. В качестве конечного URL, шаблона отслеживания или специального параметра можно указать параметр {loc_physical_ms} (указывается только для кампаний, объявления из которых показываются в целевых местоположениях), который определяет идентификатор (id) местоположения пользователя в момент клика.

Параметр ValueTrack в Google Рекламе {loc_physical_ms}

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

За отсутствием активных проектов в Google Ads я продемонстрирую такой же пример, но для Яндекс Директа, поскольку в нем тоже есть динамические параметры URL. Например:

{region_name} - регион, в котором было показано объявление (название региона);
{region_id} - идентификатор региона, в котором было показано объявление.

Динамические параметры URL в Яндекс Директе - {region_name} и {region_id}

Увидеть как подставляются данные в эти динамические параметры URL по регионам очень просто - достаточно перейти с рекламного объявления в Яндексе (можно чужого) и посмотреть что отображается в ссылке. Например, я перешел по рекламному объявлению Яндекс Директа на сайт holodilnik.ru. В параметрах UTM интернет-маркетологи этой компании дополнительно передают много данных, включая динамические параметры {region_id} и {region_name} в метке utm_content:

Динамические параметры в метке utm_content

Яндекс Директ допускает как название региона (удобочитаемое, например, Москва), так и идентификатор (например, 213). Список идентификаторов часто используемых российских регионов представлен в официальной документации Yandex Cloud.

Список регионов с идентификаторами

По таблице 213 - это как раз Москва, 1 - Москва и Московская область, 2 - Санкт-Петербург, 10 - Орел и т.д. Эти значения и будут подставляться динамически в параметр URL {region_id}, если в рекламных объявлениях вы будете использовать такую метку. Сам Яндекс в своей документации приводит пример, где вы можете использовать не только utm_метки, но и любые другие параметры для подстановки {region_id} и {region_name}.

Например - region={region_id}&region_name={region_name}:

https://www.site.ru/?region={region_id}&region_name={region_name}&type={source_type}&source={source}&block={position_type}&pos={position}&key={keyword}&campaign={campaign_id}&name={campaign_name}&name_lat={campaign_name_lat}&retargeting={retargeting_id}&ad={ad_id}&phrase={phrase_id}&gbid={gbid}&device={device_type}

https://www.site.ru/?region={region_id}&region_name={region_name}&type={source_type}&source={source}&block={position_type}&pos={position}&key={keyword}&campaign={campaign_id}&name={campaign_name}&name_lat={campaign_name_lat}&retargeting={retargeting_id}&ad={ad_id}&phrase={phrase_id}&gbid={gbid}&device={device_type}

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

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

Примечание: усложнение сделано для того, чтобы вы поняли принцип работы извлечения данных из параметра с помощью диспетчера тегов Google и далее могли самостоятельно преобразовывать эти данные. Вполне вероятно, что вы не будете использовать динамические параметры URL Яндекс Директа и Google Рекламы, а воспользуйтесь реализацией вашего программиста, который в отдельном параметре будет подставлять значение региона пользователя или его идентификатора.

Настройка в Google Tag Manager

Итак, для динамической подмены контента на сайте с помощью Google Tag Manager нам необходимо:

создать переменную URL;
создать переменную для сопоставления значения идентификатора региона с самим городом;
установить файл cookie и сохранить в нем название города;
добавить специальный класс в свой HTML-код в месте, где будет происходить подмена контента;
cоздать тег для динамического обновления текста.

Давайте рассмотрим каждый шаг подробнее.

Переменная “URL”

Создайте пользовательскую переменную типа URL. Задайте Тип компонента - Запрос, а в качестве ключа укажите тот, который будете использовать в URL-адресе. Я рекомендую использовать отдельный параметр, например, region:

Переменная "URL"

Эта переменная будет захватывать параметр региона (например, ?region=213) из URL-адреса, который мы далее сопоставим с названием региона.

Извлечение значения идентификатора региона из параметра URL

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

Переменная “Собственный код JavaScript”

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

function() { 
 var regionMapping = {
    1: "Москва и Московская область",
    2: "Санкт-Петербург",
    4: "Белгород",
    5: "Иваново",
    7: "Кострома",
    8: "Курск",
    9: "Липецк",
    10: "Орел",
    11: "Рязань",
    12: "Смоленск",
    13: "Тамбов",
    14: "Тверь",
    15: "Тула",
    16: "Ярославль",
    20: "Архангельск",
    21: "Вологда",
    22: "Калининград",
    23: "Мурманск",
    24: "Великий Новгород",
    25: "Псков",
    28: "Махачкала",
    30: "Нальчик",
    33: "Владикавказ",
    35: "Краснодар",
    36: "Ставрополь",
    37: "Астрахань",
    38: "Волгоград",
    39: "Ростов-на-Дону",
    41: "Йошкар-Ола",
    42: "Саранск",
    43: "Казань",
    45: "Чебоксары",
    47: "Нижний Новгород",
    48: "Оренбург",
    49: "Пенза",
    50: "Пермь",
    51: "Самара",
    53: "Курган",
    54: "Екатеринбург",
    56: "Челябинск",
    62: "Красноярск",
    63: "Иркутск",
    64: "Кемерово",
    65: "Новосибирск",
    66: "Омск",
    67: "Томск",
    75: "Владивосток",
    76: "Хабаровск",
    77: "Благовещенск",
    172: "Уфа",
    191: "Брянск",
    192: "Владимир",
    193: "Воронеж",
    195: "Ульяновск",
    197: "Барнаул",
    213: "Москва",
    239: "Сочи",
    973: "Сургут",
    1092: "Назрань",
    1104: "Черкесск",
    1106: "Грозный"
    
   // Добавление других регионов
   // 123: "Собственный регион/значение"
   
  };
  var region_id = {{URL - region}};
  return regionMapping[region_id] || 'Неизвестно';
}

function() {

var regionMapping = {

1: "Москва и Московская область",

2: "Санкт-Петербург",

4: "Белгород",

5: "Иваново",

7: "Кострома",

8: "Курск",

9: "Липецк",

10: "Орел",

11: "Рязань",

12: "Смоленск",

13: "Тамбов",

14: "Тверь",

15: "Тула",

16: "Ярославль",

20: "Архангельск",

21: "Вологда",

22: "Калининград",

23: "Мурманск",

24: "Великий Новгород",

25: "Псков",

28: "Махачкала",

30: "Нальчик",

33: "Владикавказ",

35: "Краснодар",

36: "Ставрополь",

37: "Астрахань",

38: "Волгоград",

39: "Ростов-на-Дону",

41: "Йошкар-Ола",

42: "Саранск",

43: "Казань",

45: "Чебоксары",

47: "Нижний Новгород",

48: "Оренбург",

49: "Пенза",

50: "Пермь",

51: "Самара",

53: "Курган",

54: "Екатеринбург",

56: "Челябинск",

62: "Красноярск",

63: "Иркутск",

64: "Кемерово",

65: "Новосибирск",

66: "Омск",

67: "Томск",

75: "Владивосток",

76: "Хабаровск",

77: "Благовещенск",

172: "Уфа",

191: "Брянск",

192: "Владимир",

193: "Воронеж",

195: "Ульяновск",

197: "Барнаул",

213: "Москва",

239: "Сочи",

973: "Сургут",

1092: "Назрань",

1104: "Черкесск",

1106: "Грозный"

// Добавление других регионов

// 123: "Собственный регион/значение"

};

var region_id = {{URL - region}};

return regionMapping[region_id] || 'Неизвестно';

}

Этот код JavaScript преобразует идентификатор региона в название города. Если совпадений не найдено, он вернет Неизвестно.

Переменная "Собственный код JavaScript"

, где:

var region_id = {{URL - region}} - идет отсылка к переменной типа URL, которую мы создали на предыдущем шаге. Если вы назвали переменную по-другому, тогда измените название и здесь.

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

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

Сохранение города в cookie

Чтобы гарантировать название города при навигации пользователя по вашему сайту, необходимо сохранить его в файле cookie. Таким образом, мы сможем динамически обновлять текст на каждой странице, даже если URL больше не имеет идентификатора региона (то есть даже тогда, когда пользователь перейдет уже не по рекламе, а напрямую или через другой источник трафика).

Теперь создайте тег типа Пользовательский HTML и вставьте в него нижеприведенный код:

<script>
(function() {
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
var regionNameFromURL = {{CJS - Название региона}};
if (regionNameFromURL && regionNameFromURL !== 'Неизвестный') {
setCookie('regionName', regionNameFromURL, 7); // Установка файла cookie на 7 дней
console.log("Файл cookie создан: Название региона = " + regionNameFromURL);
}
})();
</script>

(function() {

function setCookie(name, value, days) {

var expires = "";

if (days) {

var date = new Date();

date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

expires = "; expires=" + date.toUTCString();

}

document.cookie = name + "=" + (value || "") + expires + "; path=/";

}

var regionNameFromURL = {{CJS - Название региона}};

if (regionNameFromURL && regionNameFromURL !== 'Неизвестный') {

setCookie('regionName', regionNameFromURL, 7); // Установка файла cookie на 7 дней

console.log("Файл cookie создан: Название региона = " + regionNameFromURL);

}

})();

</script>

В качестве триггера активации задайте All Pages (Все страницы). В Google Tag Manager это будет выглядеть так:

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

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

Пример записи значения названия региона в файл cookie

Переменная “Собственный файл cookie”

Создайте пользовательскую переменную Собственный файл cookie с названием regionName, или тем, которое вы задали, когда сохраняли название города в файл cookie.

Переменная "Собственный файл cookie"

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

Динамическое обновление контента на странице

Теперь давайте динамически обновим текст на странице на основе названия города, сохраненного в cookie. Чтобы это сработало, вам нужно добавить класс region-name к элементу на вашем сайте, где должно отображаться название города.

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

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

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

Таким образом, проинспектировав нужный элемент с помощью консоли разработчика и вкладки Elements (Элементы), мы видим место внутри блока, где будет добавлен новый динамический контент по названию города:

Место в структуре исходного кода страницы, куда мы добавим текст с названием города

В это место вам необходимо добавить HTML-код с классом region-name (+ можно добавить какие-нибудь стили):

Место в исходном коде с классом region-name, куда будет динамически подставляться название города

Этот класс будет, своего рода, меткой/сигналом для Google Tag Manager, что именно сюда динамически нужно будет вставить название региона пользователя. Данную задачу необходимо поручить программисту, либо же если вы обладаете навыки HTML/CSS и имеете доступ к исходному коду страницы, выполнить предварительную разметку классом region-name самостоятельно.

Вот так это может выглядеть:

Пример динамической подмены

После этого вернитесь в свой диспетчер тегов Google и создайте еще один тег типа Пользовательский HTML, добавив туда нижеприведенный код:

<script>
// Получаем все элементы с классом .region-name
var regions = document.querySelectorAll('.region-name');

// Перебираем каждый элемент и заменяем его текст значением из переменной "Собственный файл cookie"
for (var i = 0; i < regions.length; i++) {
    regions[i].innerText = {{Cookie - regionName}};
}
</script>

// Получаем все элементы с классом .region-name

var regions = document.querySelectorAll('.region-name');

// Перебираем каждый элемент и заменяем его текст значением из переменной "Собственный файл cookie"

for (var i = 0; i < regions.length; i++) {

regions[i].innerText = {{Cookie - regionName}};

}

</script>

Чуть с

В качестве триггера активации задайте All Pages (Все страницы). В Google Tag Manager это будет выглядеть так:

Итоговый код динамической подмены контента

Этот код ищет все элементы на странице с классом region-name (если их несколько) и устанавливает содержимое текста каждого элемента, извлеченное из переменной Собственный файл cookie, которую мы создали на предыдущем шаге. Таким образом, динамического параметра URL в ссылке может уже не быть, а значение города все равно будет сохранено в файле cookie у пользователя в браузере. Это позволит в любой момент обратиться к нему и подменить контент на странице сайта.

Предварительный просмотр и отладка в GTM

Все, что осталось сделать - проверить корректность динамической подмены контента на сайте. Для этого запустите режим предварительного просмотра GTM, перейдя на страницу сайта, где будет осуществляться подмена, с установленным параметром URL. Затем перейдите в консоль разработчика на вкладку Приложение (Application) и откройте раздел с файлами cookie (Cookies). Убедитесь, что данные по городу были установлены в вашем браузере. Проверьте страницу и убедитесь, что текст внутри элемента с классом region-name обновляется в соответствии с названием города.

Примечание: если вам неудобно использовать консоль браузера, вы можете использовать расширение, например Cookie Editor.

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

Преобразовать undefined в другое значение

Текущая настройка должна работать без каких-либо проблем. Однако вы можете столкнуться с некоторыми распространенными ошибками:

текст не подменяется на последующих страницах. Обычно это происходит, когда файл cookie установлен неправильно. Проверьте, чтобы значение записывалось корректно в самом браузере;
динамическая подмена контента не происходит. Страница может загрузиться до запуска JavaScript или заданный селектор .region-name не находит нужные элементы. Убедитесь, что вы задали верный класс элементам, для которых вы хотите подменить контент, а также что тег подмены срабатывает на всех страницах вашего сайта. Если вас не устраивает долгая загрузка/подмена контента с помощью диспетчера тегов Google, вероятно, ваш вариант - выполнять JS-код до загрузки самого контейнера GTM, то есть осуществлять подмены вне диспетчера тегов Google. За решение обратитесь к своему разработчику;
параметр URL не зафиксирован. Если параметр URL не зафиксирован, динамический контент не будет загружаться. Проверьте, что переменная параметра URL установлена правильно и извлекается с помощью Google Tag Manager.

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

Метки: css, Google Tag Manager, подмена контента