Сейчас в сети: 520
Сейчас в сети: 520
Учитесь работать в AdWords вместе с нами!
star_border

Учимся работать в GTM

Google Tag Manager - широкоиспользуемый инструмент большинства маркетологов, а в связи с обновлением аккаунтов GTM до новой версии у пользователей возникает множество вопросов по работе с новым интерфейсом. Это меня натолкнуло на мысль написать небольшой обзор, в котором я кратко расскажу об основных изменениях в новой версии по сравнению со старой, а также приведу примеры решения наиболее распространенных задач в новой версии.

 

Для начала рассмотрим, что же изменилось с переходом на вторую версию.

 

 

  • Макросы заменены на переменные. Правила заменены на триггеры. Теги остались тегами.

 

  • Больше нет необходимости добавления тегов прослушивания событий для отслеживания клика, отправки формы и т. д. Если нужно отследить клик, создаем тег отслеживания события и в качестве правила активации просто выбираем из предложенных вариантов триггер типа “Клик”.


    1.jpg

  • Отдельным блоком стали выделяться встроенные переменные. По умолчанию они отключены, поэтому перед использованием их необходимо активировать, установив соответствующие чекбоксы.


    2.jpg

 

  • Пользовательские переменные можно создавать как и раньше. Теперь они размещаются отдельно от встроенных.


    3.jpg

 

  • Изменились названия переменных. Например, эквивалентом макроса URL теперь является переменная Page URL, макросу Element ID соответствуют Click ID/FORM ID и т. д.

 

  • Еще больше встроенных тегов.

 

4.jpg

 

  • Настраивать теги стало еще проще, так как процесс настройки реализован пошагово.

 

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

 

5.jpg

 

  • Новое API для управления аккаунтами, контейнерами, переменными, триггерами и тегами.

 

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

 

Установка кода Google Analytics в GTM V2

 

1. Создаем новый тег. Мы можем это сделать либо со страницы “Обзор”,

 

6.jpg

 

либо перейдя на вкладку “Теги”.

 

7.jpg

 

При выборе продукта останавливаемся на “Google Analytics”.

 

8.jpg

 

2. Указываем тип тега (“Universal Analytics”, “Классический Google Analytics”) и идентификатор отслеживания ресурса в Google Analytics.

 

9.jpg

 

Не забываем активировать чекбокс “Включить функции для контекстной сети”, чтобы иметь возможность использовать ремаркетинг в Google Analytics, а также просматривать данные в демографических отчетах и отчетах по интересам.

 

3. Указываем правило активации тега. Код аналитики должен активироваться на всех страницах сайта, поэтому выбираем соответствующее правило.

 

10.jpg

 

Созданный тег появится в списке тегов:

 

11.jpg

 

4. Публикуем новую версию контейнера.

 

12.jpg

 

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

 

13.jpg

 

Для этого нужно войти в режим предпросмотра и обновить страницу сайта. Появится окошко отладчика.

 

14.jpg

 

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

 

5. Проверяем данные в Google Analytics, отчет “Режим реального времени”.

 

GTM V2

 

Тестирование в режиме предпросмотра, публикация тегов и проверка данных в представлении – это обязательные шаги, которые должны идти вслед за любыми изменениями в контейнере, поэтому дальше я эти пункты дублировать не буду.

 

Установка Яндекс Метрики, ремаркетинга FB, VK и других пользовательских тегов в GTM V2

 

1. Добавляем новый тег типа “Пользовательский тег HTML”.

 

15.jpg

 

2. Вставляем в поле код Яндекс Метрики (кода ремаркетинга FB или VK).


Фрагменты JavaScript необходимо заключить в HTML-теги скрипта <script>…</script>

 

16.jpg

 

3. Задаем условия активации тега.

 

17.jpg

 

Отправка событий по таймеру в GTM V2

 

Для примера настроим событие, которое будет отправляться, если пользователь провел на странице не менее 60 секунд.

 

1. Добавляем триггер типа “Таймер”.

 

18.jpg

 

2. Задаем настройки таймера. 


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

 

GTM V2 таймер

 

Для того, чтобы таймер срабатывал на всех страницах добавляем соответствующее регулярное выражение. На четвертом шаге выбираем все таймеры.

 

19.jpg

 

3. Добавляем новый тег типа “Google Analytics”.

 

20.jpg

 

Выбираем тип отслеживания – событие. Указываем обязательные параметры “Категория” и “Действие”.

 

Обращаю внимание на опцию “Не взаимодействие” (ВАЖНО!).

 

GTM V2

 

Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение “false” для этого параметра. В противном случае – устанавливайте значение “true”.

В качестве условия активации выбираем созданный на предыдущем шаге триггер “Таймер”.

 

21.jpg

 

Отслеживание кликов в GTM V2

 

1. Создаем новый триггер “Клик”.

 

22.jpg

 

При настройке триггера можно выбрать цель “Все элементы” либо “Только ссылки”. При выборе типа “Все элементы”, тег будет активироваться при клике на любой элемент, при выборе “Только ссылки” – только при клике на ссылку.

 

Если выбрать цель “Только ссылки”, то появятся дополнительные настройки: “Ждать теги”, “Проверка ошибок”. Такие опции появляются также при создании триггера “Форма”.

 

При активации опции “Ждать теги” происходит задержка открытия ссылок (отправки формы), пока не будут активированы все связанные с этим событием теги или пока не истечет указанное время ожидания (в зависимости от того, что произойдет раньше)

 

При активации опции “Проверка ошибок” тег не будет срабатывать, если для отслеживаемого элемента (ссылки/формы) не было выполнено действие по умолчанию (отправка формы/переход по ссылке).

 

2. Далее задаем условие активации триггера. Выбираем “Некоторые клики”.

 

23.jpg

 

и уточняем, по какому элементу хотим отслеживать клик , установив правило сопоставления с идентифицирующим этот элемент атрибутом (Click Classes, Click ID…). Значение атрибута можно получить, обратившись к исходному коду страницы сайта.

 

 Чтобы встроенная переменная Click Classes стала доступной, не забываем ее активировать на вкладке “Переменные”:

 

24.jpg

 

4. Далее создаем тег, который будет отправлять событие в аналитику. Создаем новый тег типа “Universal Analytics”. В качестве типа отслеживания выбираем “Событие”, указываем обязательные параметры “Категория”, “Действие”.

 

25.jpg

 

5. Добавляем условие активации – триггер, созданный на 3-м шаге.

  

Отслеживание отправки форм в GTM V2

 

Если возникает необходимость настроить отслеживание отправки формы, для начала нужно определить, каким способом передаются данные формы на сервер, так как в зависимости от этого настройки в GTM будут отличаться. Отправить данные с формы можно с помощью метода submit или же в фоновом режиме через ajax. В первом случае будет происходить перезагрузка страницы, во втором – нет.

 

Отслеживание форм, отправляющих данные посредством submit

 

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

 

1. Создаем новый триггер, в качестве типа события триггера выбираем “Отправка формы” вместо “Клик”.

 

26.jpg

 

Если активировать хотя бы одну из опций “Ждать теги”, “Проверка ошибок”, о которых я уже писала в пункте “Отслеживание кликов”, появится дополнительный шаг создания триггера “Условия включения”. Это не то же самое, что условие активации. Условие включения позволяет указать, в каких случаях триггер должен быть доступен, то есть при каких условиях должны прослушиваться отправки форм. Распространенным условием включения триггера типа “форма” является указание только тех страниц, на которых есть формы.

 

27.jpg

 

При установке опции “Ждать теги” обязательно тестируйте события. Если возникают проблемы, снимайте чекбокс. Правда в таком случае, есть вероятность, что часть обращений может быть потеряна.

 

На четвертом шаге указываем условие активации. Привязываемся к атрибуту, идентифицирующему нужную нам форму (Form ID, Form Classes, …). Не забываем активировать необходимую встроенную переменную перед использованием.

 

28.jpg

 

2. Далее создаем тег, который будет отправлять событие в аналитику. В качестве условия активации выбираем триггер, созданный на предыдущем шаге.

 

Отслеживание форм, отправляющих данные посредством ajax

 

Если для отправки данных используется ajax, необходимо проделать следующие шаги:

 

  • В одном из javascript-фалов находим функцию, отвечающую за отправку данных нужной формы через ajax. Выглядит это примерно так:

    Параметр success отвечает за выполнение указанных действий в случае успешной отправки формы. Внутри function() { … } нужно прописать команду
    dataLayer.push({'event': 'event_name'}); где event_name – имя соответствующего события.

 

  • В GTM создаем пользовательское событие event_name.


Добавляем новый триггер “Пользовательское событие”. 

 

29.jpg

 

И в условии его активации указываем ивент, который отправили с помощью dataLayer.push().

 

30.jpg

 

  • Далее создаем тег, который будет отправлять событие в аналитику. В качестве условия активации выбираем триггер, созданный на предыдущем шаге.

Виртуальные страницы в GTM V2

 

1. Создаем новый тег типа “Google Analytics” с типом отслеживания “Просмотр страницы”. В дополнительных настройках добавляем новое поле, в нем ищем параметр “page”. Указываем URL виртуальной страницы, который хотим видеть в аналитике.

 

31.jpg

 

2. В качестве условия активации используем необходимый триггер.

 

В этой статье я рассмотрела основные изменения в GTM 2.0., а также продемонстрировала принципы работы в новом интерфейсе на примере некоторых типичных задач. Надеюсь, этот материал поможет постичь основы работы с новой версией тег менеджера. А также, для того, чтобы повысить свой уровень пользования GTM очень рекомендую пройти курс "Google Tag Manager Fundamentals" . УдачиПодмигивающий

 

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

Анастасия Тимошенко

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)

Комментарии
demureless Ведущий участник
июня 2015

Спасибо!. Как всегда великоплепно! Так держать!

a_timo_ Ведущий участник
июня 2015

Паша, большое спасибо!Очень радостный

EkaterinaK Админ сообщества
июня 2015

@a_timo_ Анастасия, отличная статья и очень наглядно! Большое спасибо! Надеюсь, многим участникам Сообщества материал окажется очень полезнымПодмигивающий

a_timo_ Ведущий участник
июня 2015

@EkaterinaK, спасибо за такую высокую оценку! Мне очень приятно!

dniser
июня 2015

Анастасия, добрый день. Спасибо за хороший мануал.

 

Встречали ли вы мануал или как настроить фиксацию события - просмотр блока, только блока на странице, а не загрузка всей страницы?

Цель: Посчитать CTR блока.

Анастасия, у меня бы никогда терпения на столько скриншотов не хватило Очень радостный Супер!

Неделю угрохал, чтоб все это постичь на практике =) 
И вот только сегодня увидел ваш материал. Спасибо, новичкам будет полезно.

a_timo_ Ведущий участник
июня 2015

Андрей, спасибо!😊

a_timo_ Ведущий участник
июня 2015

Сергей, спасибо! Да, тоже надеюсь, что пост будет полезнымВеселый

a_timo_ Ведущий участник
июня 2015

@dniser, к сожалению, ничего не подскажу по этому вопросу.

dniser
июня 2015

спасибо, тогда еще один вопрос:

 

"Не взаимодействие" с выбранным параметром true - не отображается в сводке "В режиме реального времени - События".

 

Как быть? Т.е. как сделать так, чтобы и события билы в этом отчете и они не сказывались на показателе отказы?Снимок экрана 2015-06-30 в 22.58.52.png

a_timo_ Ведущий участник
июня 2015

Да, если для опции "не взаимодействие" выбрать значение "true", данные о событиях в режиме реального времени не отображаются. Можно воспользоваться второй вкладочкой отчета: "События (за последние 30 мин.)". Там все события видны. http://i.shotnes.com/n4b9kcpa

Натали В
июля 2015

Анастасия, спасибо огромное за детальный обзор! Очень доходчиво!)

a_timo_ Ведущий участник
июля 2015

Натали, большое спасибо! Я очень рада, что материал полезен!)

Sergey U
июля 2015

Респект автору

a_timo_ Ведущий участник
июля 2015

Сергей, спасибо!!

Алексей М
июля 2015

Анастасия подскажите пожалуйста, уничего страшного если в одном теге и отслеживание кликов и форм, и таймер, или можно (или нужно) их разделить на несколько тегов?

Алексей М
июля 2015

Хм уже вижу что нельзя сделать в одном теге даже то что мне нужно тип отслеживания разный.

 

Оля Б
сентября 2015

Анастасия, добрый вечер

 

Хочу вас поблагодавить за подробную инструкцию по работе с GTM.

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

Тригер
В google нашла статью где пишут, что для настроики прослушивания кликов необходимо еще настроить пользовательский тэг, который будет срабатывать на всех страницах сайта.
Так ли это?

 

Заранее спасибо

Оля Б
сентября 2015

Анастасия, доброе утро
Вопрос не актуален- все работает.

Просто данные в режиме реального времени не показывались, а стали видны только в отчете Лучшие события.

 

Еще раз спасибо за статью.

 

a_timo_ Ведущий участник
сентября 2015

Оля, здравствуйте! 

 

Спасибо за добрые слова! Я рада, что материал был полезен. И рада, что у Вас все получилось=)

 

Данные в режиме реального времени не показывались, так как для опции “Не взаимодействие” Вы установили значение "true".  Проверяйте в отчете "Режим реального времени", вторая вкладочка отчета: "События (за последние 30 мин.)". Там все события видны. 

Евгений Х
августа 2016

Вопрос по блоку - Отслеживание форм, отправляющих данные посредством submit

 

При такой настройке как Вы написали - в событие что подгружается - клик по форме или заполнение формы?

 

Как при submit отследить заполнение формы?

Alexey E
августа 2016

Здравствуйте, Анастасия!
Отличная статья!
Не могли бы Вы пояснить по первым двум пунктам, где Вы добавляете тэг Analytics? В первом случае добавляется тэг с триггером "All pages", а во втором – с триггером "Таймер". Правильно ли я понимаю, что в итоге будут добавлены два тэга Analytics, но с разными условиями срабатывания?

Alexey E
августа 2016

Точне по пунктам 1 и 3. Второй пункт про Метрику.

a_timo_ Ведущий участник
августа 2016

@Alexey E, здравствуйте! 

Спасибо=)

С удовольствием поясню. Да, оба тега отправляют данные в Google Analytics, только в первом случае показано, как добавить код Analytics, передающий данные о просмотрах всех страниц, а во втором речь идет о передаче данных о событии - если пользователь провел на странице не менее 60 секунд.

Evgeniy S
сентября 2016

Добрый день, Анастасия

Подскажите пожалуйста, куда конкретно добавить dataLayer.push({'event': 'event_name'});

если код такой:

$.ajax({
	type: 'GET',
	url: '/callbackajax.php',
	data: {name: name, phone: phone},
	success: function(d){
		if(d == 'sended') {
			$('.callback_form_popup').html('Спасибо! Мы Вам перезвоним.')
		} else {
			showErrorMessageCallback()
		}
		},
	error: function(){
		return
		}
})

Правильно я понимаю, что его надо вставить вместо d между скобок после function ?

Пробывал по разному, не получается настроить 

Сайт http://patyapatya.ru/ верхние формы

 

Виталий К
сентября 2016

@Evgeniy S, добрый день. 

Немножко не в то место вы собираетесь вставлять код отправки, предлагаемый Анастасией.

Это будет выглядеть так:

$.ajax({
	type: 'GET',
	url: '/callbackajax.php',
	data: {name: name, phone: phone},
	success: function(d){
		if(d == 'sended') {
		      dataLayer.push({'event': 'event_name'});
                      $('.callback_form_popup').html('Спасибо! Мы Вам перезвоним.')
		} else {
			showErrorMessageCallback()
		}
		},
	error: function(){
		return
		}
})

 

Angelina D
января 2017

Анастасия, подскажите как должно выглядеть регулярное выражение по пункту "Для того, чтобы таймер срабатывал на всех страницах добавляем соответствующее регулярное выражение. На четвертом шаге выбираем все таймеры."? Спасибо.

a_timo_ Ведущий участник
января 2017

Добрый день. 

 

Выражение ".*" http://prntscr.com/e0k06o

Angelina D
января 2017

Спасибо большое, надеюсь остальное все правильно настроила) 

a_timo_ Ведущий участник
января 2017

Не за что. Удачи=)

World H
Октябрь

Ребят, подскажите, пожалуйста, где найти чекбокс "Включить функции для контекстной сети"? С момента выхода урока немного изменился интерфейс, может заменили опцию, найти не могу ( Без ремаркетинга никуда ) 

 

Павел Р
Октябрь

Здравствуйте, Анастасия.
Буду признателен вам за любую помощь.

Мне необходимо настроить событие но форму, видимо на ajax.

 

Ваш манула очень интересный и содержит в себе исчерпывающую информацию. Но из за того что у меня нет знаний программирования, я не могу понять в какое место мне нужно прописать команду dataLayer.push({'event': 'event_name'}).

 

Как мне кажется я нашел скрипт отправки формы, но проблема в том что скрипт большой, и там несколько раз встречается параметр success.
В какой из низ мне добавлять команду dataLayer.push({'event': 'event_name'}) я и хочу у вас просить?

Сайт http://mpa-tehnika.ru/
Задача повесить событие на форму заказа, которая появляется при клике на кнопку заказать на любом товаре и передавать данные о событии в Google Analytics.

Скрипт формы:


function updateQuantity(key,quantity){
$.ajax({
url: 'index.php?route=extension/module/newfastordercart/editCartQuick',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
beforeSend: function() {
$('#fastorder_data').addClass('maskPopupQuickorder');
$('#fastorder_data').after('<span class="loading_quick_order"><img src="catalog/view/theme/newstore/image/check-ajax-ns.gif" ></span>');
$('#cart > button').button('loading');
},
success: function(json) {
$('#cart > button').button('reset');
setTimeout(function () {
$('.shopping-cart #cart').load('index.php?route=common/cart/info .shopping-cart #cart');
}, 100);

if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
location = 'index.php?route=checkout/cart';
} else {
$.ajax({
url: 'index.php?route=extension/module/newfastordercart',
type: 'get',
dataType: 'html',
success: function(data){
$('#popup-quickorder #fastorder_data').html($(data).find('#fastorder_data').html());
$('#popup-quickorder .popup-footer').html($(data).find('.popup-footer').html());
$('.loading_quick_order').remove();
$('#fastorder_data').removeClass('maskPopupQuickorder');
}
});
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
};
function deleteProduct(key){
$.ajax({
url: 'index.php?route=checkout/cart/remove',
type: 'post',
data: 'key=' + key,
dataType: 'json',
beforeSend: function() {
$('#fastorder_data').addClass('maskPopupQuickorder');
$('#fastorder_data').after('<span class="loading_quick_order"><img src="catalog/view/theme/newstore/image/check-ajax-ns.gif" ></span>');
$('#cart > button').button('loading');
},
complete: function() {
$('#cart > button').button('reset');
},
success: function(json) {
setTimeout(function () {
$('.shopping-cart #cart').load('index.php?route=common/cart/info .shopping-cart #cart');
}, 100);

if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
location = 'index.php?route=checkout/cart';
} else {
$.ajax({
url: 'index.php?route=extension/module/newfastordercart',
type: 'get',
dataType: 'html',
success: function(data){
$('#popup-quickorder #fastorder_data').html($(data).find('#fastorder_data').html());
$('#popup-quickorder .popup-footer').html($(data).find('.popup-footer').html());
$('.loading_quick_order').remove();
$('#fastorder_data').removeClass('maskPopupQuickorder');
}
});
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
};



Прошу помочь разобраться.
Спасибо!

mrfrunze
Октябрь

Добрый вечер, подключил тег менеджер на сайте https://reebok-shop.com.ua/

Вопросы
1. настроил тег Гуг аналитик - почему не видно через Teg assiten ? Хотя Тег Менеджера виден! https://prnt.sc/h4f9rx

2. Настрил события на добавление в корзину и Закзать товар - не отробатывает https://prnt.sc/h4fbyy

Подскажите как исправить данную проблему?

Спасибо.

Oleh S
Декабрь

При создание первого тега  вот такая ошибка

Недопустимое регулярное выражение Неизвестный триггер Недопустимое регулярное выражение: "ConvertEntityTask -- *".

 

где искать?

a_timo_ Ведущий участник
Декабрь

@Oleh S

добрый день!

 

Приложите скриншот настроек тега и ошибки.

Oleh S
Декабрь

Спасибо за быстрые ответ.

При открытии предварительного просмотра появляется ошибка

Снимок.JPG

 

Настройки постарался сделать как в статье.

Снимок-1.JPG

 

 

 

Alex N
Декабрь

Анастасия, добрый день

Подскажите с виртуальными страницами.

Вроде все сделал по инструкции, но цели в аналитике не срабатывают. Заранее спасибо.

Знімок екрана 2017-12-14 о 14.13.28.pngЗнімок екрана 2017-12-14 о 14.14.35.png

a_timo_ Ведущий участник
Декабрь

 @Alex N, какой триггер активирует тег отправки виртуальной страницы?

a_timo_ Ведущий участник
Декабрь

@Oleh S, проверьте два новых триггера, которые Вы создали. В одном из них ошибка. http://prntscr.com/hnfbj8 Если затрудняетесь сами найти ошибку, покажите скриншоты триггеров.

Alex N
Декабрь

Клик по элементу. Активация происходит, но вот в дата леирс я не вижу что бы параметры передавались

Знімок екрана 2017-12-14 о 15.46.20.pngЗнімок екрана 2017-12-14 о 15.48.26.png

Alex N
Декабрь

@a_timo_ Анастасия, добрый день. Так что как думаете с чем это может быть связанно?