Всем доброго времени суток! Данная статья написана для моих коллег по трафику, коллеги по веб-аналитике и так все это знают. Поэтому будет все подробно, до самых мелочей. А сейчас немного истории!
Отмечу, что данную работу, я впервые сделала на основе статьи Якова Осипенкова, сделала и восхитилась! Как это круто!
Первая мысль:
Я творю волшебство на сайте, не иначе!
Со временем, изучив другие материалы блога Якова, а так же после прохождения различных курсов по веб-аналитике и сквозной аналитике (у Якова и не только), чуток доработала ее под свои потребности, а именно под трафик Google.Ads.
Для начала, мы с вами должны определиться, что и когда мы хотим менять на сайте. И что сохранять, чтобы при переходе с одной страницы на другую, и возврате на главную, текст так же подменялся.
Рассмотрим пример. У нас есть сайт по зарубежной недвижимости. Ведем трафик на Google Ads. Выделено три целевые аудитории (далее – ЦА) – LUX, INVEST, PRESALE. На главной странице сайта есть pop-up с сообщением подсказкой для целевой аудитории.
Для каждой ЦА собрано свое семантическое ядро и написан текст сообщения в pop-up.
Мы хотим для группы объявлении с семантическим ядром под инвестиции подставить текст в pop-up – INVEST. Для этого мы устанавливаем в объявления данной группы utm-метку такого плана – ваш сайт / ?utm_source=google&utm_content=invest
, где utm_source=google – источник трафика, а utm_content=invest – наименование группы объявления или рекламной кампании созданной под определенную семантику. По аналогии делается и для LUX и PRESALE.
Заходим в Google Tag Manager и создаем переменную. Для этого в рабочей области нажимаем на Переменные:
Пролистываем вниз страницы, нажимаем Создать:
Далее нажимаем иконку с карандашом:
Выбираем тип переменной URL:
Называем ее utm_content (можем назвать как угодно), выбираем:
- Тип компонента – Запрос
- Ключ запроса – utm_content
Если вы привязываетесь к utm_source, то и пишите utm_source:
Теперь создаем переменную типа Таблица поиска:
Заполняем данными из таблицы, созданной ранее. Называем таблицу поиска podmenatextpopup (может быть любое название). В качестве входной переменной выберете переменную URL, которую только что создали, а именно, utm_content. Во входных данных вы указываете значение ключа. У нас – это LUX, INVEST, PRESALE. В результатах пишете нужный подменный текст.
Важна галочка Установить значение по умолчанию. Здесь вы указываете значение, которое будет срабатывать, в любых других случаях, не указанных в таблице.
Теперь создаем тип переменной Собственный файл cookie.
Называем ее cookie_podmenatextpopup, название cookie пишем cookie_podmenatextpopup:
Приступим к созданию тегов. Для этого в рабочей области выберем Теги и нажимаем Создать:
Открывается данное окно. Нажимаем на карандашик:
Выбираем тип тега Пользовательский HTML:
Называем тег podmenatextpopup_into_cookie (может быть любое название). При срабатывании данного тега, пользовательская переменная podmenatextpopup запишется в cookie_podmenatextpopup на 24 часа = 86400 секунд. Копируем код ниже. Сохраняем код.
Код для тега HTML:
<script>
document.cookie = "cookie_podmenatextpopup={{podmenatextpopup}}; max-age=86400; path=/";
</script>
Для того чтобы данный тег сработал и переменная podmenatextpopup сохранилась в cookie, необходимо создать триггер. Для этого на рабочей области выбираем Триггеры и Создать:
Открывается данное окно. Нажимаем на карандашик:
Выбираем триггер Просмотр страницы:
Называем триггер utm_content_undefined (название может быть любым). Условие активации триггера – Некоторые просмотры страниц. Выбираем переменную utm_content.
Условие не равно undefined. И сохраняем триггер. Данный триггер будет активироваться только тогда, когда значение переменной utm_content определено. В противном случае, если в ссылке нет параметра запроса, и оно принимает значение undefined (не определено), то тег не сработает.
Теперь для того, чтобы тег podmenatextpopup_into_cookie сработал, к нему нужно добавить наш триггер utm_content_undefined. Для этого выбираем наш тег, нажимаем на выбор триггера:
Выбираем наш триггер utm_content_undefined:
Получаем такой результат: если у нас utm_content определено и соответствует одному из выражений таблицы поиска (lux|invest|presale), то текст подмены сохраняется в куки
на 24 часа. И при переходах по страницам сайта и возвращению на главную страницу сохраняется!
Теперь создадим тег, который будет менять текст в конкретном месте на сайте. Для этого нам необходимо зайти на сайт, выделить текст который мы хотим изменить, нажать правой кнопкой мыши по экрану и выбрать Исследовать элемент или Просмотреть код:
В открывшемся окне мы выделяем часть кода сайта, которая соответствует выделенному тексту на сайте. Цвет кода на сайте серый и цвет подсвеченного текста тоже выделен, вы это увидите. Главное, чтобы подсвечивался нужный текст на сайте.
Теперь кликаем правой кнопкой мыши по коду сайта, выбираем Копировать – Копировать selector. У нас получается такой код селектора: #input_2465215262382. Сохраняем его.
Возвращаемся в Google Tag Manager и создаем тег типа Пользовательский HTML. Называем его Подмена текста popup. Копируем код ниже и вставляем его к себе, изменив данные на свои собственные.
Код для HTML:
<script>
document.querySelector("#input_2465215262382").innerText="{{cookie_podmenatextpopup}}";
</script>
Чтобы тег подмены pop-up сработал, нужно создать триггер типа Просмотр страницы – Модель DOM готова. Называем триггер как Триггер cookie_podmenatextpopup. Условие активации триггера Некоторые события “Модель DOM готова”. Выбираем переменную cookie_podmenatextpopup, условие не равно undefined. Сохраняем триггер.
Данный триггер будет активироваться только тогда, когда значение переменной cookie_podmenatextpopup определено. В противном случае, если в ссылке нет параметра запроса, и оно принимает значение undefined (не определено), то контент подменяться не будет, и тег не сработает.
В итоге мы получаем такой результат. Тег Подмена текста popup с триггером активации Триггер cookie_podmenatextpopup. Сохраняем его.
Теперь нам необходимо проверить корректность срабатывания тегов и триггеров. Для этого мы нажимаем на кнопку Предварительный просмотр:
Вводим наш сайт с utm-меткой, например с ?utm_content=lux. Нажимаем Подключиться:
Теги срабатывают. Текст в popup изменяется. С чем я вас и поздравляю! Вариант подмены контента на сайте можно реализовать не только через сохранение cookie, но и через sessionStorage. Но это уже другая история.
После проверке не забудьте опубликовать контейнер GTM.
Подмену контента на сайте я использую в проектах, где требуется подменить телефон или электронную почту для определенных видов трафика (где нет бюджетов или желания у клиента настроить сквозную аналитику). Так же для промокодов, выделенных на конкретный вид трафика в интернет-магазинах, в недвижимости и ремонте квартир.
Очень выручает! Используйте в работе и увеличивайте конверсии в заявку / в покупку на своих проектах! Для удобства восприятия данный материал я оформила в PDF формате. Скачать файл можно по ссылке.
Если же вам необходимо произвести аналогичную настройку, но вы не хотите вникать в материал – пишите мне в Telegram – @AFPAVLOVA. С удовольствием настрою!
