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

определено), то контент подменяться не будет, и тег не сработает.

? Название – 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()