Google Tag Manager для googлят: Руководство по управлению тегами

● Входная переменная – {{paramURL}} (та, которую создали на шаге выше);

● Таблица поиска – в каждую из строк в поле «Входные данные» вводим атрибут ключа запроса utm_content (см. таблицу выше), а в поле «Результат» вводим значение параметра utm_content, то есть наши подмененные заголовки;

● Установить значение по умолчанию (галочка) – добавляем исходный заголовок.

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

Рис. 540. Переменная «Таблица поиска» с нашими значениями

После этого создаем триггер типа «Просмотр страницы», который будет активироваться только тогда, когда значение переменной utm_content определено. В противном случае если в ссылке нет параметра запроса, и оно принимает значение «undefined» (не определено), то контент подменяться не будет, и тег не сработает.

● Название – undefined (может быть любым);

● Тип триггера – Просмотр страницы;

● Условие активации триггера – Некоторые просмотры страниц;

Активация триггера при наступлении события и выполнения всех этих условий: paramURL не равно undefined.

Рис. 541. paramURL не равно undefined

Сохраняем триггер.

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

● Создаем пользовательский HTML-тег;

● Название – Tag – podmenaZag (может быть любым);

● HTML

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

Что же добавлять в текстовое поле? Какой фрагмент кода? Перед реализацией этого шага необходимо определить атрибуты заголовка, на основании которого мы можем производить изменения. Именно от этого будет зависеть реализация пользовательского HTML в Google Tag Manager.

Поясним на конкретном примере. Переходим на наш сайт и открываем консоль разработчика, чтобы посмотреть фрагмент кода нашего заголовка.

Рис. 543. Фрагмент кода заголовка в консоли разработчика

Если бы у данного заголовка h1 был атрибут id со значением, например, zagolovok (может быть другим), то фрагмент кода, который нужно вставить тег, выглядел так:

Рис. 544. Фрагмент JS-кода в случае, если бы у нас был атрибут id

В данном случае конструкция document.getElementById(“zagolovok”).innerHTML=”{{podmeniZag}}”; изменяет содержимое HTML-элемента h1 с id = zagolovok на новое из переменной podmeniZag (нашей таблицы поиска).

Но у нас нет атрибута id, а есть class. Тогда необходимо использовать другую конструкцию для подмены. Вот пример реализации:

Рис. 545. Фрагмент кода реализации через class

Сначала мы объявляем переменную x, которой присваиваем значение всех элементов, которые имеют заданные имена классов. Сам метод getElementsByClassName () возвращает коллекцию дочерних элементов элемента с указанным именем класса.

В данном случае класс b-promo__content__title.title-border – это атрибут заголовка h1 в нашем примере (см. выше на скриншот). К узлам можно обращаться по номерам индексов. Индекс начинается с 0, поэтому в нашем примере x[0], то есть у 1 дочернего элемента изменяем HTML, подставляя пользовательскую переменную podmeniZag таблицы поиска.

Есть еще проще вариант. Использовать библиотеку jQuery. Тогда конструкция будет иметь вид:

Рис. 546. Используем jQuery и функцию .html()

Функция .html (newHTML) в jQuery заменяет содержимое всех выбранных элементов на newHTML. В нашем примере она заменяет содержимое значение заголовка на переменную podmeniZag, которая содержит значения в таблице поиска.

Есть и такой вариант. Использовать метод querySelector(). Он возвращает первый элемент, который соответствует указанному CSS-селектору в документе.

Рис. 547. Метод querySelector()

В теге мы выбираем условие активации триггера undefined и сохраняем тег.

Рис. 548. Условие активации тега – undefined

Проверяем корректность работы в режиме предварительного просмотра.

Рис. 549. Тег не сработал, переменной utm_content нет

Если мы переходим без метки в адресной строке, то тег не активируется и заголовок не подменяется. Все правильно. Давайте добавим к нашему url метку utm_content=zag3.

Рис. 550. Заголовок 3: Получите СРО «под ключ» за 666 дней! Работаем по всей России!

Тег сработал

Тег с меткой сработал, значение заголовка поменялось. Убедимся еще один раз. Теперь введем utm_content=zag4.

Рис. 551. Заголовок 4: Никогда не получите СРО! Мы не работаем в принципе! Тег сработал

Все работает корректно. Публикуем контейнер GTM и радуемся подменам.

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