Рис. 537. «Получите СРО «под ключ» за 1 день! Работаем по всей России!»
Нам необходимо изменять этот заголовок в зависимости от параметра URL. В качестве параметра возьмем метку utm_content (можно взять любую другую, хоть нестандартную, например, m_change), в которую будем помещать значения других заголовков. Чтобы проще и быстрее реализовать задуманное, лучше всего подготовить заранее отдельную таблицу с метками и их значениями. Вот как это может выглядеть в Exceclass="underline"
Рис. 538. Пример подмены заголовков в таблице Excel
Например, вы сделали пост в социальной сети или разметили рекламные кампании, разбили свой товар или услугу на категории (мебель -> один заголовок, кухни -> другой заголовок и т.д.). При переходе по одной из ссылок (столбец «Конечный URL») пользователь будет видеть подмененный заголовок (из столбца «Заголовок на сайте»).
Ссылка обязательна должна содержать параметр запроса, иначе подмена не произойдет. Давайте перейдем к настройке в GTM. Последовательность действий:
● Создаем пользовательскую переменную типа «URL»;
● Название – paramURL (любое произвольное);
● Тип компонента – Запрос;
● Ключ запроса – utm_content (тот, который вы определили для себя, может быть другим);
Сохраняем.
Рис. 539. Пользовательская переменная типа «URL»
Далее создаем еще одну пользовательскую переменную «Таблица поиска» из типа «Утилиты».
● Название – podmeniZag (может быть любым);
● Входная переменная – {{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 () возвращает коллекцию дочерних элементов элемента с указанным именем класса.