Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Создание мультилендингов — с адаптированным текстом под разные рекламные кампании — мечта маркетолога. Вы можете заметно повысить конверсию, подменяя слоган или заголовок на лендинге в соответствии с текстом рекламного объявления. Инструменты для такой настройки есть — например, Yagla. Мы расскажем, как заменить платный сервис Yagla общедоступными бесплатными инструментами Google Tag Manager.

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

Давайте договоримся сразу: сам по себе Yagla — хороший сервис, но платный. Возможность сэкономить — это всегда приятно, особенно для агентства с большим числом проектов. С помощью Google Tag Manager можно бесплатно сделать то, что Yagla предлагает за деньги — и даже больше.

Что такое GTM и чем он отличается от Yagla

Вообще, все началось с того, что мы запустили MOAB как контекстное рекламное агентство и придумывали тарифы на контекстную рекламу -например, такие, чтобы человек разом получал и Директ, и Ads, и работу с конверсией, и много других полезных вещей.

В рамках таких тарифов было бы круто делать текстовые подмены для лендингов с привязкой к запросу — объективно, это увеличивает конверсию в большинстве случаев. Однако, в случае с Yagla это привело бы к росту цен на наши услуги за счет стоимости самого сервиса. Идеальным выходом стал Google Tag Manager.

Google Tag Manager — это диспетчер тегов. С помощью этого инструмента можно создавать и обновлять теги для сайта или мобильного приложения. Он позволяет самостоятельно управлять тегами и настраивать нужные опции, не отвлекая программиста просьбами типа «А придумай какой-нибудь код, чтобы я мог посмотреть, сколько людей кликнуло на ту красную кнопочку».

Интерфейс GTM простой и интуитивно понятный, ведь его разрабатывали для маркетологов, а не для айтишников. Есть руководство по установке и настройке. И тонна полезных опций, включая добавление тегов ретаргетинга, отслеживание глубины прокрутки страницы и добавление кнопок соцсетей на картинки. Чуть позже мы рассмотрим несколько.

А еще GTM без проблем работает с тегами разных служб, обеспечивает простое тестирование и отладку, позволяет настраивать теги даже в загруженных пользователями приложениях и дает возможность проводить любое количество тестов, возвращаясь к самым эффективным версиям.

Ну и поскольку мы сравниваем его с Yagla —

«GTM позволяет настраивать текстовую подмену на сайте, притом отключать или менять неактуальные варианты можно за несколько секунд.»

Остается вопрос: если GTM такой крутой, почему на Yagla вообще есть спрос? Справедливости ради нужно сказать, что у Google Tag Manager есть парочка недостатков:

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

На этом минусы заканчиваются и начинаются плюсы.

  • Во-первых, всё, что предлагает Yagla, можно сделать через Google Tag Manager. Притом без ограничений в рамках тарифной сетки — любое число подмен на любом количестве сайтов. Всё бесплатно, даже если вы работаете в агентстве и курируете с полсотни сайтов и мобильных приложений.
  • Во-вторых, в GTM подмену можно настроить индивидуально под свой сайт, а интерфейс Yagla накладывает определенные ограничения. Возьмем тот же сбор статистики. В Yagla можно настраивать множество целей, но результаты вы увидите только в сумме. А в GTM можно разграничивать цели, а также отправлять отчеты через Яндекс.Метрику или Google Analytics.
  • В-третьих, GTM позволяет делать много других полезных вещей.

Как сделать бесплатное «Yagla» из GTM

С помощью Google Tag Manager можно менять любые элементы на сайте.

Для начала нам потребуется две переменных. Заходим в GTM, затем «Переменные» — «Создать». Первая переменная, которая нам нужна — URL, тип компонента — «Запрос». Ключ запроса и название переменной могут быть любыми. Главное, чтобы они были понятны вам. Например, вы можете указать ключ podmena и название «Запрос для подмены».

Теперь создаем вторую переменную типа «Таблица поиска» — она будет содержать данные для подмены. В пункте «Входная переменная» выберите название переменной, откуда нужно брать запросы для подмены — в нашем случае это «Запрос для подмены» (очевидно, правда?).

Затем добавляем несколько строк. Их может быть сколько угодно — зависит от количества вариантов, которые вы планируете использовать. В шаблоне указано, что должна содержать переменная, а в результате — текст, который будет отображаться на сайте. Например, в шаблоне мы можем указать значения 30 и None, а в результате — «Скидка 30%» и «Подарок при покупке» соответственно. Затем указываем имя переменной (например, podmena) и сохраняем.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Две переменных готовы. Теперь нам нужно создать тег типа «Пользовательский HTML». В нем пишем код (курсивом выделены части кода, которые нужно заменить):

<script>document.getElementById(“IDэлемента”).innerHTML=”{{podmena}}”</script>

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Расшифрую: на сайте мы ищем элемент по указанному ID (его можно узнать с помощью опции «посмотреть код» в браузере) и в подставляем в него значение, которое хранится в переменной podmena.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Для этого тега нужно задать триггер активации типа «Просмотр страницы» и выбрать в настройках «Некоторые просмотры страниц», а затем «Page URL — Содержит — podmena».

Вот и все, теперь можно спокойно лить трафик на сайт, отправляя пользователей на страницы с нужным текстом. Так руками за 10 минут бесплатно можно сделать то, что в Yagla предлагают за деньги.

Теперь, если URL будет содержать переменную podmena с нужным запросом, текст в указанном объекте на странице будет меняться. Вот так:

Важный момент: если вы используете параметр подмены в рекламных объявлениях вместе с UTM-метками, помните о структуре составления параметров в URL. Сначала пишем «?», притом он всегда один. Каждый параметр и значение разделяем «&». Вот пример ссылки с UTM-меткой и параметром подмены:
domen.ru/?utm_source=google&utm_term=cpc&podmena=30

А что, если вам нужно менять не только текст, но и картинки?

Все то же самое. Только потребуется еще одна переменная типа «Таблица поиска», где в результатах вы будете указывать не текст, а путь к картинке. Например, images/mebel/stol1. Допустим, мы назовем эту переменную PodmenaImages.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

И в теге типа «Пользовательский HTML» у вас будет написан такой код (то, что выделено курсивом, снова заменяем на нужные данные):

<script type="text/javascript">

document.getElementById(“ID элемента”).innerHTML=”{{podmena}}”

document.getElementById(“ID основной картинки”).src=”{{PodmenaImages}}”

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

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

А что там насчет статистики? Той самой, которая лучше, чем у Yagla, но настраивается отдельно? Элементарно: в любом счетчике нужно создать фильтр на переходы по URL, содержащим podmena. А если нужна более точная статистика, то по URL, содержащим podmena=[значение].

Что еще можно сделать с помощью GTM

Для клиентов агентства MOAB мы используем весь функционал GTM для упрощения и ускорения внутренних работ и сбора статистики, причем по-прежнему — бесплатно. Давайте по шагам разберем, что еще хорошего можно сделать, используя GTM.

Отслеживание внутренних переходов по конкретной ссылке

Это как UTM-метки, только для внутренних переходов на сайте.

В списке встроенных переменных выбираем Click URL. Затем создаем новый триггер типа «Клик» — «Только ссылки» и укажите для активации URL нужной страницы.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Теперь остается только добавить тег типа Universal Analytics (тип отслеживания — «Событие»), добавить в него нужный триггер, который мы только что создали, заполнить поля и сохранить. После этого вы сможете отслеживать клики в Google Analytics, раздел «События».

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Отслеживание переходов по внешним ссылкам

Здесь есть два варианта: отслеживание переходов по всем внешним ссылкам сразу или только по одной конкретной. Рассмотрим оба.

В обоих случаях нужно создать пользовательскую переменную типа URL и триггер «Клик». Ну и после окончания настроек создать тег отслеживания типа Universal Analytics и заполнить поля. А вот сами настройки будут разные.

Если нужно отследить переходы по всем внешним ссылкам на сайте, в пользовательской переменной выберите тип компонента «Имя хоста», а в источнике укажите {{Click URL}}.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Затем в триггере выберите «Некоторые ссылки» и укажите: имя хоста не содержит «доменное имя вашего сайта».

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Если нужно отследить переход только по одной конкретной внешней ссылке, в настройках переменной укажите тип компонента «Полный URL», в поле «Источник» {{Click URL}}.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

А в триггере выберите «Некоторые ссылки» и задайте настройки: «Конкретная ссылка — Содержит — “ссылка, которую вы хотите отследить”».

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Добавление тегов ретаргетинга

Ретаргетинг (вдруг не все в курсе) — это когда рекламу показывают только тем пользователям, которые хоть как-то взаимодействовали с сайтом. Например, просматривали товары, добавляли их в корзину или даже просто заходили, скроллили и выходили. Продать что-то человеку, который уже был на сайте и видел предложение продавца, проще, чем совсем «холодному» клиенту. Результат — реклама и дешевле, и эффективнее.

Теги ретаргетинга добавляются через GTM буквально за минуту. Создаем новый тег типа «Пользовательский HTML». Настраиваем ретаргетинг в кабинете сервиса (ВКонтакте, Facebook и пр.), получаем код, добавляем его через GTM, устанавливаем триггер активации, чтобы код срабатывал на нужных страницах, сохраняем — profit!

Кстати, именно так через Google Tag Manager можно добавлять и любые другие теги.

Отслеживание глубины прокрутки страницы

Эта опция особенно актуальна для лендингов. Если хотите знать, насколько далеко скроллят страницу пользователи и не пора ли убрать пару-тройку блоков, она вам пригодится.

Выберите тип триггера «Глубина прокрутки». Далее идут настройки:

  • Можно отслеживать глубину не только вертикальной, но и горизонтальной прокрутки. Поставьте галочку на интересующий вас вариант (или на оба).
  • Выберите измерение — проценты или пиксели. Пороговые значения нужно указывать через запятую. Например, если вы выбрали проценты, можно написать «10,15,25,30,40,50,65,75,85,100». Или вариант для более грубых измерений: «10,25,50,75,100».
  • Укажите, для каких страниц нужно отслеживать глубину прокрутки. Если речь об одностраничнике — вопросов не возникнет. Если же о сайте и вы хотите, допустим, отслеживать глубину прокрутки только для статей в блоге, укажите дополнительные условия для активации триггера. Например, Page Path — Содержит — /blog.
Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция
  • Во вкладке «Переменные» включите опции. Scroll Depth Threshold передает пороговое значение, которого достиг посетитель. Scroll Depth Units указывает вариант измерения — пиксели или проценты. Scroll Direction содержит информацию о типе прокрутки (вертикальная или горизонтальная).
Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

С настройками закончили. Осталось организовать передачу данных в Google Analytics. Выбираем тип отслеживания «Событие», категорию Scrolling, действие {{Scroll Depth Threshold}}%, если вы выбрали проценты, или {{Scroll Depth Threshold}}px, если предпочли пиксели. Добавлять проценты или пиксели необязательно — просто вам же будет легче потом читать отчеты. Ярлык — {{Page URL}}, но если вы хотите отслеживать и горизонтальную, и вертикальную прокрутку, добавьте к ярлыку {{Scroll Direction}}.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Обратите внимание на значение «Не взаимодействие». Если вы хотите, чтобы доскролл влиял на показатель отказов, в это значение нужно вставить переменную типа «Таблица поиска». При ее заполнении учитывайте: если в результате true, событие НЕ влияет на показатель отказов, а если false — влияет. Например, если вы укажете 15 true, 50 false, доскролл до середины будет влиять на показатель отказов, а до 15% — не будет.

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция
Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Чтобы отслеживать события скроллинга в Google Analytics, нужно составить такой шаблон отчета:

Google Tag Manager вместо Yagla: быстро, просто, бесплатно. Пошаговая инструкция

Отслеживание кликов по кнопкам

Допустим, у вас на сайте есть несколько кнопок с одинаковой функцией, но разными призывами к действию. Например, «заказать», «купить», «добавить в корзину», «положить в корзину» и пр. Вы хотите протестировать их и выяснить, какие кнопки работают лучше. И у GTM есть решение этой задачи.

Активируем встроенную переменную Click Text. Создаем триггер «Клик — Все элементы» и выбираем вариант «Некоторые клики» в настройках. Затем указываем Click Text — Содержит — «Добавить в корзину» (или другой текст на кнопке, который вас интересует). Затем создаем тег типа Universal Analytics для отслеживания события и готово.

Уточнение показателя отказов

Google Analytics весьма своеобразно считает отказы. Он записывает в отказ любое посещение, при котором пользователь просмотрел только одну страницу и не совершил никаких действий (не заполнил форму, не нажал на кнопку обратного звонка и пр.) На одностраничниках этот показатель может доходить до 100%. Например, если пользователь зашел на сайт, прочитал текст, позвонил по указанному номеру телефона и закрыл страницу — он все равно будет записан как «отказник». Чтобы уточнить этот показатель и получить более точные сведения, можно через GTM настроить отслеживание длительности посещения без привязки к действиям. Пробыл на странице 20 секунд — уже не «отказ».

Как это сделать? Выберите тип тега Universal Analytics, тип отслеживания «Событие», затем задайте для тега триггер типа «Таймер» и задайте нужный интервал в миллисекундах.

Добавление кнопок соцсетей на картинки

Тут все очень просто: выбираете любой сервис по своему вкусу, копируете код кнопок и добавляете с помощью тега типа «Пользовательский HTML». Примерно так:

<script type="text/javascript" src=”код кнопок соцсетей”></script>

И не забываете указать триггер активации, особенно если кнопки должны появляться только на некоторых страницах.

Внедрение кода микроразметки

И тут все тоже предельно просто. Генерируете код с помощью инструмента Schema или аналога, создаете тег типа «Пользовательский HTML», вписываете туда полученный код, а затем настраиваете активацию триггера. И все, на вашем сайте есть микроразметка!

Вместо послесловия

Разумеется, данная статья - вовсе не призыв отказаться от одних инструментов (платных) и использовать другие (бесплатные). Если у вас все уже настроено и работает эффективно - к чему что-либо менять?

Но для тех, кто еще не использует текстовые подмены, попробовать их было бы гораздо проще с помощью данного руководства; в особенности - агентствам контекстной рекламы и фрилансерам, которым, как и нам в MOAB, приходится работать с большим количеством клиентов.

Уверен, что эту статью прочитают в Yagla - поэтому призываю коллег в комментарии - какие еще плюсы Yagla мы не учли?

114114
102 комментария

Отличная статья. А вебинар был на курсе еще лучше ;)

2
Ответить

Благодарю, Павел )

1
Ответить

А что это был за курс и где посмотреть тот вебинар? :)

Ответить

Павел, спасибо!

Ответить

Александр спасибо за информацию.
Есть пара вопросов, буду признателен если ответите.

1. Если мы допустим гоним трафик с РК, и в переменной pdomena используем "ключевой запрос".
Как задать что будет показано по умолчанию? Поясню.
При заходе к примеру по ключу podmena=купить слона в москве который к примеру у нас не прописан то мы получает подмена на "undefined".

2. Как реализовать не "если podmena = слово" а если "podmena содержит = слово".
Поясню. Если подмена содержит "как купить слона в москве" я хочу прописать как если podmena содержит "москва" то показать "дешевые слоны в москве". Думаю суть ясна :)

1
Ответить

Хорошие вопросы, Александр.
Первый пункт:
Решение достаточно простое - предобразовать undenfined в самой переменной https://i.imgur.com/DWlwXFJ.png
Второй пункт:
Интересная идея. Как реализовать простыми методами мысль в голову сейчас не приходит, но есть идея следующего формата:
Сделать JS переменную, которая будет стоять между переменной URL и таблицей поиска.
- JS переменная будет принимать значение из переменной URL, далее следует следующий алгоритм: Если переданное значение будет содержать "москва", то возвращаем "москва". В другом случае вернуть полученное значение без изменений
- Затем, JS переменная передает результат в таблицу поиска.
Profit
В JS можно делать ряд проверок на разные слова, не только "москва" )
Надеюсь идея понятна.
Могу на днях наброскать код, как это должно выглядеть )

2
Ответить

Комментарий недоступен

23
Ответить