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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Как сделать бесплатное «Yagla» из GTM
2. Что еще можно сделать с помощью GTM
3. Отслеживание внутренних переходов по конкретной ссылке
4. Отслеживание переходов по внешним ссылкам
5. Добавление тегов ретаргетинга
6. Отслеживание глубины прокрутки страницы
7. Отслеживание кликов по кнопкам
8. Уточнение показателя отказов
9. Добавление кнопок соцсетей на картинки
10. Внедрение кода микроразметки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги ретаргетинга добавляются через 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.

• Во вкладке «Переменные» включите опции. Scroll Depth Threshold передает пороговое значение, которого достиг посетитель. Scroll Depth Units указывает вариант измерения — пиксели или проценты. Scroll Direction содержит информацию о типе прокрутки (вертикальная или горизонтальная).

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

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

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

Допустим, у вас на сайте есть несколько кнопок с одинаковой функцией, но разными призывами к действию. Например, «заказать», «купить», «добавить в корзину», «положить в корзину» и пр. Вы хотите протестировать их и выяснить, какие кнопки работают лучше. И у 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 мы не учли?

#инструкции #маркетинг