Как подменять изображения на сайте в Google Tag Manager (2018)?

Приветствую, друзья! На связи Евгений Тридчиков и в этом видео мы разберемся, как подменять изображения на сайте с помощью Google Tag Manager. Алгоритм действий точно такой же, как в прошлых видео про подмену заголовка и местоположения. Поэтому буду краток.

Лень читать? Смотрите видео в конце статьи!

Если что-то останется непонятным, посмотрите, пожалуйста, указанные видео. В них я разбирал действия максимально подробно. Поехали!

Пошаговый план

  1. Определяем параметр запроса
  2. Готовим таблицу подмены
  3. Настраиваем тег подмены изображения

Подмену изображений я реализовал на сайте elecson.pro. Здесь картинки на главном экране меняются в зависимости от параметра в ссылке. В качестве параметра я взял utm_content. Туда я положил значения для каждого типа ремонта. Уточнение: на сайте предлагаются услуги по ремонту бытовой техники.

Готовим таблицу подмены

В результате получилась примерно такая таблица подмены. В столбце “Ключ” находится название параметра, в столбце “Значение” соответственно значение для каждого типа ремонта, в столбце “Изображение” находится значение подменяемого элемента, а в столбец “Ссылка” я поместил ссылку для быстрой проверки подмены.

Настройка тега в GTM производится по уже знакомому вам алгоритму. Для начала создаем переменную типа “URL”, тип компонента “Запрос”  и помещаем туда название параметра. Эта переменная будет подсасывать значение, которое лежит в контейнере utm_content.

Табличная переменная для изображений

Затем создаем переменную типа “Таблица поиска” и переносим туда значения из таблицы подмен. Таким образом, переменная “Таблица поиска” будет принимать значение поля “Результат” в зависимости от значения переменной на входе.

Настройка подмены в GTM

Следующий шаг – настройка тега подмены изображения. На сайте подключена библиотека jQuery, поэтому я использую скрипт на ее основе. Как видите, данный скрипт ищет на сайте указанный селектор и подменяет его значение значением табличной переменной.

<script> jQuery(«#u3497_img»).replaceWith(‘{{Таблица поиска – Изображение}}’); </script>

Кавычки-елочки меняем на обычные двойные кавычки. Чтобы узнать селектор, щелкните по изображению на сайте правой клавишей мыши. Выберите “Исследовать элемент” и в панели разработчика еще один клик правой клавишей, “Копировать селектор”. Этот относительный путь к изображению и нужно вставить в данный скрипт.

Если на сайте нет библиотеки jQuery, используйте другой скрипт для поиска-подмены элемента на сайте.

Промежуточным шагом является подготовка картинок для подмены. Для этого я создал отдельную папку на хостинге и поместил туда изображения нужного мне размера. Зная путь к картинкам и их размеры, я поместил в таблицу подмены соответствующий html-код. Супер.

Триггер для трафика с параметром в ссылке

В качестве триггера используем “Просмотр страницы” с фильтром для табличной переменной: не равно “undefined”. Таким образом, тег срабатывает только для трафика с параметром utm_content, для которого определено значение.

Важный момент: если для подмены вы используете указанный скрипт, убедитесь, чтобы вызов библиотеки jQuery на сайте происходит раньше, чем вызов Google Tag Manager.

Смотрите пошаговое видео

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

comments powered by HyperComments
(4 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова