● Название – 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 вы можете настраивать правила, при котором на сайте будут подменяться не только заголовки, но и подзаголовки, номера телефонов в зависимости от источника переходов, изображения и многое другое.

Однако все же лучший способ реализации динамического контента на сайте – это серверная сторона (через тот же .php), а не браузерная, поскольку различные манипуляции с DOM могут привести к замедлению загрузки страницы у пользователя, да так, что он увидит эту подмену на сайте.

Допустимо использование такого приема в небольшом проекте (лендинге, несколько страничном сайте) и на малом объеме трафика (до 50–100 посетителей в день). Но если ежедневное количество пользователей гораздо больше, на сайте много заголовков и подмен, то рекомендуется реализовать все это через backend.

В заключение

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

Обе части (теоретическая и практическая) подробно изложены и разобраны с примерами и скриншотами. Все, что необходимо делать – это просто читать, делать, читать снова, переосмысливать, и снова делать. Только так можно разобраться в чем-то новом и неизведанном. Ну и должно пройти какое-то время, чтобы началась адаптация и привыкание. Продукты Google в этом плане не исключение.

К тому же, если заложить основы работы с GTM получилось даже у меня за полгода (хотя бы на уровне «новичок»), то почему не сможете вы? Я в вас верю!

Практическая часть составлена из примеров, которые встречались команде GaSend и мне во время работы с различными проектами. Разумеется, в главе 3 разбирается лишь 5% от возможностей диспетчера тегов Google. Однако не стоит забывать, что данное электронное руководство является достоянием всемирной паутины и каждого интернет-маркетолога и веб-аналитика в мире.

Вы также можете принять участие в расширении примеров этой книги. Просто присылайте материалы мне на почту [email protected] и свое согласие на публикую в следующей версии «Google Tag Manager для googлят: Руководство по управлению тегами» И это будет сделано!

Увидимся в следующих изданиях и на моих вебинарах!

Понравилась книга? Подписывайтесь на мои социальные сети:

● Vk.com – vk.com/ya.osipenkov

● Facebook.com – facebook.com/osipenkov.ru