SlideShare uma empresa Scribd logo
1 de 40
Baixar para ler offline
Проведем 70 минут с пользой!
● 10 минут теории
● 20 минут делаем Measurement Plan
● 40 минут практики
gtm.april@gmail.com
MSKsdh83a_3-23
google.com/tagmanager и google.com/analytics
GTM-59L85S UA-61497996-1
Авторизуйтесь
Заходите
Немного теории
Структура GTM
Контейнер – основной блок кода, хранящий все
теги (устанавливается на все страницы сайта)
Тег – фрагмент кода, который мы хотим
имплементировать на сайте
Правило – условие активации тега
Макрос – переменные уровня данных
Типы Тегов и Макросов
Google Tag Manager позволяет отслеживать шесть типов
событий:
Типы событий
✓ Прослушивание кликов (gtm.click)
✓ Прослушивание отправок форм (gtm.formSubmit)
✓ Прослушивание кликов по ссылке (gtm.linkClick)
✓ Прослушивание таймера (gtm.timer)
✓ Обработчик ошибок JavaScript (gtm.pageError)
✓ Обработчик событий истории (gtm.historyChange)
+ вы можете писать собственные обработчики
событий
В кастомных макросах и тегах можно ссылаться на свойства объекта
DOM, или сам объект
gtm.element.nodeName
Example return value: IMG
gtm.element.value
Example return value: Simo Ahava
What it does: Returns the value of the element. This is useful if you’re tracking input elements on your forms (with e.g. blur,
focus, or change), and you want to send an event every time a form field has been filled.
Data Layer Variable Name: gtm.element.hash
Example return value: #chapter1
What it does: Returns the hash (if any) of the element href. So if the link was to /this-page/?internal=true#chapter1, gtm.
element.hash would return #chapter1
Data Layer Variable Name: gtm.element.pathname
Example return value: /this-page/
What it does: Returns the path in the element href. If the link was to /this-page/?internal=true#chapter1, gtm.element.pathname
would return /this-page/
Data Layer Variable Name: gtm.element.search
Example return value: ?internal=true
What it does: Returns the full query string of the element. If the link was to /this-page/?internal=true#chapter1, gtm.element.
search would return ?internal=true
Переменные типа dataLayer
Data Layer Variable Name: gtm.element.parentElement
Example return value: (object), extend further with some property of the parent element
What it does: Returns the direct parent of the element, and you should extend this macro further to access its properties
(e.g. gtm.element.parentElement.id returns the value stored in the ID attribute of the parent tag)
Data Layer Variable Name: gtm.element.firstChild
Example return value: (object), extend further with some property of the child element
What it does: Returns the first direct descendant of the element, and you should extend this macro further to access its properties (e.g. gtm.
element.firstChild.className returns value stored in the CLASS attribute of the child tag)
Data Layer Variable Name: gtm.element.nextSibling
Example return value: (object), extend further with some property of the sibling element
What it does: Returns the next element in the DOM tree which is on the same hierarchical level as the element, and
you should extend this macro further to access its properties (e.g. gtm.element.nextSibling.nodeName returns the tag
name of the sibling tag)
● beforeunload – Fire a listener when the window, the document,
and all resources are about to be unloaded (e.g. when someone
is closing the browser window).
● blur – An element has lost focus (e.g. the user has left a form
field). Note, this doesn’t bubble by default, meaning a listener on
the document node won’t be able to catch it. To activate event
delegation, you’ll need to set the last parameter in thedocument.
addEventListener() call to true instead of false.
● change – The value of an element changes between receiving
and losing focus (e.g. the user enters a form field, types
something in, and leaves the field).
● click – A click is registered on an element (use GTM’s Click
Listener instead).
● contextmenu – The right mouse button is clicked.
● copy – Text is copied to the clipboard.
● cut – Text is cut to the clipboard.
● dblclick – A double-click is registered on an element.
● focus – An element has received focus (e.g. the user has left a
form field). Note, this doesn’t bubble by default, meaning a
listener on the document node won’t be able to catch it. To
activate event delegation, you’ll need to set the last parameter in
thedocument.addEventListener() call to true instead of false.
● keydown – A key is pressed down.
● keyup – A pressed down key is released.
● mousedown – The mouse button is pressed down.
● mouseenter – The mouse pointer is moved over the element
where the listener is attached. Won’t really work if the listener
is on the document node.
● mouseleave – The mouse pointer is moved off the element
where the listener is attached. Won’t really work if the listener
is on the document node.
● mouseout – The mouse pointer is moved off the element
where the listener is attached or one of its children.
● mouseover – The mouse pointer is moved over the element
where the listener is attached or one of its children.
● mouseup – The pressed down mouse button is released.
● orientationchange – The orientation (portrait / landscape) of
the screen changes.
● reset – A form is reset.
● scroll – A document view or element is scrolled.
● submit – A form submit is registered (use GTM’s Form
Submit Listener instead).
<script>
var eventType = "change"; // Modify this to reflect the event type you want to listen for
if (document.addEventListener) {
document.addEventListener(eventType, {{generic event handler}}, false);
} else if (document.attachEvent) {
document.attachEvent('on' + eventType, {{generic event handler}});
}
</script>
https://developer.mozilla.org/en-US/docs/Web/Events
CSS Selectors rules (GTM v2 only)
.thisclass Matches if element has class “thisclass”
.thisclass.thatclass Matches if element has class “thisclass” and class “thatclass”
#thisid Matches if element has ID “thisid”
#main .navlink Matches if element has class “navlink” and is a descendant of an element with the ID “main”
div#main > .navlink Matches if element has class “navlink” and is the direct child of a DIV element with the ID “main”
:checked Matches if element is checked (radio button or checkbox)
[data-title~=”chairman mao”] Matches if element has attribute “data-title” with the string “chairman mao” somewhere in its value
a[href$=”.pdf”] Matches if element is a link (A) with a HREF attribute that ends with “.pdf”
.contactmail:only-child Matches if element has class “contactmail” and is the only child of its parent
http://www.w3schools.com/cssref/css_selectors.asp
Что вообще можно делать?
Так выглядят реальные контейнеры
И да, там ни строчки кода GA/dataLayer на
сайтах. Все отслеживается “снаружи”.
GTM трюкиCustom HTML tag fired on GTM load
<script>
var checkzoom = function(e) {
if( e.which === 187 && e.ctrlKey ) {
dataLayer.push({'event': 'zoom'});
}
};
document.addEventListener('keydown', checkzoom);
</script>
Начиная с какого разрешения
экрана пользователи разного
возраста пользуются CTRL+?
MAILTO + &cid on Google Apps Gmail
Revenue from the mailto: links
MP: http://www.google-analytics.com/collect?v=1&tid=UA-8202998-
27&t=event&cid=1732166662.1421823610&ec=client&ea=new&ev=3420000
● top - Detail view
● 500px - Checkout
● end of the article - Transaction
jQuery custom listener + chain of events + custom html datalayer pushes +
enhanced ecommerce tags
Custom Scroll Listener
Вызов транзакции в GA и Метрике одновременно
По 1 правилу - два тега
1) сustom html tag
<script type="text/javascript">
yaCounter179064.reachGoal('Home', yaParams);
</script>
2) тег Google Analytics, тип transaction
GTM трюки
GTM трюки - проигрывание видео на сайте
GTM трюки - клики по маркерам на карте
Пример расширенных сегментов
ссылка в ротации по
clientId.
ClientID traversal
http://surveygizmo.com/s3/1933094?sguid=12324233.123123123
Пример расширенных сегментов
Мастеркласс по GTM на Google Event
Собираем объект для расширенной электронной торговли по кускам
Если товаров много (например, в корзине)
var products = new Array();
for(var i=2; i<document.getElementsByClassName("sale_basket_basket zero")[0].getElementsByTagName("tr").length-1; i=i+3) {
var b=document.getElementsByClassName("sale_basket_basket zero")[0].children[0].children[i];
var name = b.children[0].getElementsByClassName("m5")[0].innerText;
var quantity = b.getElementsByClassName("quantity")[0].children[0].value;
var price = b.getElementsByClassName("price")[0].innerText
products.push({'name':name,'quantity':quantity,'price':price});
}
Отправляем Product Impression с указанием списка (также покупают, подойдут) по мере
попадания продукта в зону видимости
var productPosition=0;
$(window).bind("scroll", function() {
$(".name_carousel:in-viewport").not('.
impressionSent').each(function(){
$(this).addClass('impressionSent');
productPosition=productPosition+1;
dataLayer.push({
'event': 'impression',
'list' : $(this)[0].parentElement.parentElement.
parentElement.className
});
(function($) {
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.abovethetop = function(element, settings) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height() - settings.threshold;
};
$.rightofscreen = function(element, settings) {
var fold = $(window).width() + $(window).scrollLeft();
return fold <= $(element).offset().left - settings.threshold;
};
$.leftofscreen = function(element, settings) {
var left = $(window).scrollLeft();
return left >= $(element).offset().left + $(element).width() - settings.threshold;
};
$.inviewport = function(element, settings) {
return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings)
&& !$.abovethetop(element, settings);
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
},
"above-the-top": function(a, i, m) {
return $.abovethetop(a, {threshold : 0});
},
"left-of-screen": function(a, i, m) {
return $.leftofscreen(a, {threshold : 0});
},
"right-of-screen": function(a, i, m) {
return $.rightofscreen(a, {threshold : 0});
},
"in-viewport": function(a, i, m) {
return $.inviewport(a, {threshold : 0});
}
});
})(jQuery);
Visibility обработчик
etc...
Делаем из хлебных крошек Enhanced E-commerce Product Category
document.getElementsByClassName("breadcrumbs")[0].innerText
"Главная > Каталог > Шторы > В гостиную > Комплект штор для гостиной Antonio-S 123206770"
document.getElementsByClassName("breadcrumbs")[0].innerText.replace(/s>s/g ,'/').replace("Главная/Каталог/","");
"Шторы/В гостиную/Комплект штор для гостиной Antonio-S 123206770"
Инструменты дебага
Проверка валидности хитов в Measurement Protocol
Google analytics Debugger
● включает расширенный лог в консоль,
заменяя analytics.js на analytics_debug.js
Tag Assistant by Google
● показывает какие теги присутствуют на страницах
и нет ли синтаксических ошибок
● для GTM контейнеров показывает какие теги
были запущены через него.
Мастеркласс по GTM на Google Event
Мастеркласс по GTM на Google Event
● А создался ли сам объект ga?
● Выполняются ли функции?
Если MP отправляется из недоступного вам куска кода
Мастеркласс по GTM на Google Event
Мастеркласс по GTM на Google Event
Инструмент отладки
1) Отладчик GTM
2) отчеты Real Time
Какие теги сработали при
выполнении действия
Инструмент отладки
Действие при отладке
Мастеркласс по GTM на Google Event
Мастеркласс по GTM на Google Event

Mais conteúdo relacionado

Destaque

Отложенные конверсии - научитесь ждать!
Отложенные конверсии - научитесь ждать!Отложенные конверсии - научитесь ждать!
Отложенные конверсии - научитесь ждать!Kirill Bushev
 
Performance marketing
Performance marketing Performance marketing
Performance marketing Kirill Bushev
 
172 вебинар UXRussia
172 вебинар UXRussia172 вебинар UXRussia
172 вебинар UXRussiaJulia Suvorova
 
Аналитика СМИ для всех и каждого
Аналитика СМИ для всех и каждогоАналитика СМИ для всех и каждого
Аналитика СМИ для всех и каждогоJulia Suvorova
 
Еженедельная встреча 20 июня 2016 года
Еженедельная встреча 20 июня 2016 годаЕженедельная встреча 20 июня 2016 года
Еженедельная встреча 20 июня 2016 годаFedor Ovchinnikov
 
Знакомство с Додо Пиццей
Знакомство с Додо ПиццейЗнакомство с Додо Пиццей
Знакомство с Додо ПиццейFedor Ovchinnikov
 
Додо Пицца: презентация для владельцев помещений
Додо Пицца: презентация для владельцев помещенийДодо Пицца: презентация для владельцев помещений
Додо Пицца: презентация для владельцев помещенийFedor Ovchinnikov
 
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...eLama.ru
 
Веб-аналитика для бизнеса (Web Analytics for Bussines)
Веб-аналитика для бизнеса (Web Analytics for Bussines)Веб-аналитика для бизнеса (Web Analytics for Bussines)
Веб-аналитика для бизнеса (Web Analytics for Bussines)Anton Sorokopud
 
1 августа 2016 Еженедельная встреча Dodo Pizza
1 августа 2016 Еженедельная встреча Dodo Pizza1 августа 2016 Еженедельная встреча Dodo Pizza
1 августа 2016 Еженедельная встреча Dodo PizzaFedor Ovchinnikov
 
сатин личный кабинет
сатин   личный кабинетсатин   личный кабинет
сатин личный кабинетAnastasia Karimova
 
Федор Овчинников Съезд Партнеров 2016
Федор Овчинников Съезд Партнеров 2016Федор Овчинников Съезд Партнеров 2016
Федор Овчинников Съезд Партнеров 2016Fedor Ovchinnikov
 
Анализ больших данных с помощью инструментов Google
Анализ больших данных с помощью инструментов GoogleАнализ больших данных с помощью инструментов Google
Анализ больших данных с помощью инструментов GoogleNetpeak
 
Ищем помещения для пиццерий!
Ищем помещения для пиццерий!Ищем помещения для пиццерий!
Ищем помещения для пиццерий!Fedor Ovchinnikov
 
эффективный интерфейс для корпоративного сайта
эффективный интерфейс для корпоративного сайтаэффективный интерфейс для корпоративного сайта
эффективный интерфейс для корпоративного сайтаJulia Suvorova
 
180. мобильный и доступный
180. мобильный и доступный180. мобильный и доступный
180. мобильный и доступныйJulia Suvorova
 

Destaque (20)

Отложенные конверсии - научитесь ждать!
Отложенные конверсии - научитесь ждать!Отложенные конверсии - научитесь ждать!
Отложенные конверсии - научитесь ждать!
 
Performance marketing
Performance marketing Performance marketing
Performance marketing
 
172 вебинар UXRussia
172 вебинар UXRussia172 вебинар UXRussia
172 вебинар UXRussia
 
ICBDA'2015
ICBDA'2015ICBDA'2015
ICBDA'2015
 
Аналитика СМИ для всех и каждого
Аналитика СМИ для всех и каждогоАналитика СМИ для всех и каждого
Аналитика СМИ для всех и каждого
 
American students
American studentsAmerican students
American students
 
Еженедельная встреча 20 июня 2016 года
Еженедельная встреча 20 июня 2016 годаЕженедельная встреча 20 июня 2016 года
Еженедельная встреча 20 июня 2016 года
 
Знакомство с Додо Пиццей
Знакомство с Додо ПиццейЗнакомство с Додо Пиццей
Знакомство с Додо Пиццей
 
Додо Пицца: презентация для владельцев помещений
Додо Пицца: презентация для владельцев помещенийДодо Пицца: презентация для владельцев помещений
Додо Пицца: презентация для владельцев помещений
 
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...
Вебинар «Анализируем рекламу и повышаем ее эффективность с помощью Google Ana...
 
Веб-аналитика для бизнеса (Web Analytics for Bussines)
Веб-аналитика для бизнеса (Web Analytics for Bussines)Веб-аналитика для бизнеса (Web Analytics for Bussines)
Веб-аналитика для бизнеса (Web Analytics for Bussines)
 
1 августа 2016 Еженедельная встреча Dodo Pizza
1 августа 2016 Еженедельная встреча Dodo Pizza1 августа 2016 Еженедельная встреча Dodo Pizza
1 августа 2016 Еженедельная встреча Dodo Pizza
 
сатин личный кабинет
сатин   личный кабинетсатин   личный кабинет
сатин личный кабинет
 
семинар лк
семинар лксеминар лк
семинар лк
 
михаил штин
михаил штинмихаил штин
михаил штин
 
Федор Овчинников Съезд Партнеров 2016
Федор Овчинников Съезд Партнеров 2016Федор Овчинников Съезд Партнеров 2016
Федор Овчинников Съезд Партнеров 2016
 
Анализ больших данных с помощью инструментов Google
Анализ больших данных с помощью инструментов GoogleАнализ больших данных с помощью инструментов Google
Анализ больших данных с помощью инструментов Google
 
Ищем помещения для пиццерий!
Ищем помещения для пиццерий!Ищем помещения для пиццерий!
Ищем помещения для пиццерий!
 
эффективный интерфейс для корпоративного сайта
эффективный интерфейс для корпоративного сайтаэффективный интерфейс для корпоративного сайта
эффективный интерфейс для корпоративного сайта
 
180. мобильный и доступный
180. мобильный и доступный180. мобильный и доступный
180. мобильный и доступный
 

Semelhante a Мастеркласс по GTM на Google Event

29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should KnowMike Arnesen
 
All about google tag manager - Basics
All about google tag manager - Basics All about google tag manager - Basics
All about google tag manager - Basics Rob Levish
 
Morphing GA into an Affiliate Analytics Monster
Morphing GA into an Affiliate Analytics MonsterMorphing GA into an Affiliate Analytics Monster
Morphing GA into an Affiliate Analytics MonsterPhil Pearce
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptWalid Ashraf
 
"Taster Slides" for Most advanced GTM implementation
"Taster Slides" for Most advanced GTM implementation"Taster Slides" for Most advanced GTM implementation
"Taster Slides" for Most advanced GTM implementationPhil Pearce
 
Session4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) EventsSession4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) Eventsmuthusvm
 
Most Advanced GTM Deployment. Ever!
Most Advanced GTM Deployment. Ever!Most Advanced GTM Deployment. Ever!
Most Advanced GTM Deployment. Ever!Phil Pearce
 
Google Tag Manager (GTM)
Google Tag Manager (GTM)Google Tag Manager (GTM)
Google Tag Manager (GTM)Dragos Ionita
 
Less03 2 e_testermodule_2
Less03 2 e_testermodule_2Less03 2 e_testermodule_2
Less03 2 e_testermodule_2Suresh Mishra
 
Google Analytics for Developers
Google Analytics for DevelopersGoogle Analytics for Developers
Google Analytics for DevelopersRubén Martínez
 
Having fun with Google Tag Manager (implement cool things like weather tracki...
Having fun with Google Tag Manager (implement cool things like weather tracki...Having fun with Google Tag Manager (implement cool things like weather tracki...
Having fun with Google Tag Manager (implement cool things like weather tracki...Eventz.Digital
 
Using Google Analytics with Primo
Using Google Analytics with PrimoUsing Google Analytics with Primo
Using Google Analytics with Primorshanrath
 
Magic of web components
Magic of web componentsMagic of web components
Magic of web componentsHYS Enterprise
 
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...Hanapin Marketing
 

Semelhante a Мастеркласс по GTM на Google Event (20)

29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know
 
How to Defeat the Beast
How to Defeat the BeastHow to Defeat the Beast
How to Defeat the Beast
 
Javascript 2
Javascript 2Javascript 2
Javascript 2
 
All about google tag manager - Basics
All about google tag manager - Basics All about google tag manager - Basics
All about google tag manager - Basics
 
Morphing GA into an Affiliate Analytics Monster
Morphing GA into an Affiliate Analytics MonsterMorphing GA into an Affiliate Analytics Monster
Morphing GA into an Affiliate Analytics Monster
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
"Taster Slides" for Most advanced GTM implementation
"Taster Slides" for Most advanced GTM implementation"Taster Slides" for Most advanced GTM implementation
"Taster Slides" for Most advanced GTM implementation
 
Session4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) EventsSession4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) Events
 
Most Advanced GTM Deployment. Ever!
Most Advanced GTM Deployment. Ever!Most Advanced GTM Deployment. Ever!
Most Advanced GTM Deployment. Ever!
 
Google Tag Manager (GTM)
Google Tag Manager (GTM)Google Tag Manager (GTM)
Google Tag Manager (GTM)
 
Rendering The Fat
Rendering The FatRendering The Fat
Rendering The Fat
 
Google Analytics Meetup: Auto Event Tracking
Google Analytics Meetup: Auto Event TrackingGoogle Analytics Meetup: Auto Event Tracking
Google Analytics Meetup: Auto Event Tracking
 
Less03 2 e_testermodule_2
Less03 2 e_testermodule_2Less03 2 e_testermodule_2
Less03 2 e_testermodule_2
 
Google Analytics for Developers
Google Analytics for DevelopersGoogle Analytics for Developers
Google Analytics for Developers
 
Having fun with Google Tag Manager (implement cool things like weather tracki...
Having fun with Google Tag Manager (implement cool things like weather tracki...Having fun with Google Tag Manager (implement cool things like weather tracki...
Having fun with Google Tag Manager (implement cool things like weather tracki...
 
Using Google Analytics with Primo
Using Google Analytics with PrimoUsing Google Analytics with Primo
Using Google Analytics with Primo
 
Unit3.pptx
Unit3.pptxUnit3.pptx
Unit3.pptx
 
course js day 3
course js day 3course js day 3
course js day 3
 
Magic of web components
Magic of web componentsMagic of web components
Magic of web components
 
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...
Lead Score Web Visitors For KILLER Remarketing, Upsell and Exit Intent Strate...
 

Último

Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlDr. Bruce A. Johnson
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashasashalaycock03
 

Último (20)

Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic SupportMarch 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting Bl
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sasha
 

Мастеркласс по GTM на Google Event

  • 1. Проведем 70 минут с пользой! ● 10 минут теории ● 20 минут делаем Measurement Plan ● 40 минут практики
  • 4. Структура GTM Контейнер – основной блок кода, хранящий все теги (устанавливается на все страницы сайта) Тег – фрагмент кода, который мы хотим имплементировать на сайте Правило – условие активации тега Макрос – переменные уровня данных
  • 5. Типы Тегов и Макросов
  • 6. Google Tag Manager позволяет отслеживать шесть типов событий: Типы событий ✓ Прослушивание кликов (gtm.click) ✓ Прослушивание отправок форм (gtm.formSubmit) ✓ Прослушивание кликов по ссылке (gtm.linkClick) ✓ Прослушивание таймера (gtm.timer) ✓ Обработчик ошибок JavaScript (gtm.pageError) ✓ Обработчик событий истории (gtm.historyChange) + вы можете писать собственные обработчики событий
  • 7. В кастомных макросах и тегах можно ссылаться на свойства объекта DOM, или сам объект
  • 8. gtm.element.nodeName Example return value: IMG gtm.element.value Example return value: Simo Ahava What it does: Returns the value of the element. This is useful if you’re tracking input elements on your forms (with e.g. blur, focus, or change), and you want to send an event every time a form field has been filled. Data Layer Variable Name: gtm.element.hash Example return value: #chapter1 What it does: Returns the hash (if any) of the element href. So if the link was to /this-page/?internal=true#chapter1, gtm. element.hash would return #chapter1 Data Layer Variable Name: gtm.element.pathname Example return value: /this-page/ What it does: Returns the path in the element href. If the link was to /this-page/?internal=true#chapter1, gtm.element.pathname would return /this-page/ Data Layer Variable Name: gtm.element.search Example return value: ?internal=true What it does: Returns the full query string of the element. If the link was to /this-page/?internal=true#chapter1, gtm.element. search would return ?internal=true Переменные типа dataLayer
  • 9. Data Layer Variable Name: gtm.element.parentElement Example return value: (object), extend further with some property of the parent element What it does: Returns the direct parent of the element, and you should extend this macro further to access its properties (e.g. gtm.element.parentElement.id returns the value stored in the ID attribute of the parent tag) Data Layer Variable Name: gtm.element.firstChild Example return value: (object), extend further with some property of the child element What it does: Returns the first direct descendant of the element, and you should extend this macro further to access its properties (e.g. gtm. element.firstChild.className returns value stored in the CLASS attribute of the child tag) Data Layer Variable Name: gtm.element.nextSibling Example return value: (object), extend further with some property of the sibling element What it does: Returns the next element in the DOM tree which is on the same hierarchical level as the element, and you should extend this macro further to access its properties (e.g. gtm.element.nextSibling.nodeName returns the tag name of the sibling tag)
  • 10. ● beforeunload – Fire a listener when the window, the document, and all resources are about to be unloaded (e.g. when someone is closing the browser window). ● blur – An element has lost focus (e.g. the user has left a form field). Note, this doesn’t bubble by default, meaning a listener on the document node won’t be able to catch it. To activate event delegation, you’ll need to set the last parameter in thedocument. addEventListener() call to true instead of false. ● change – The value of an element changes between receiving and losing focus (e.g. the user enters a form field, types something in, and leaves the field). ● click – A click is registered on an element (use GTM’s Click Listener instead). ● contextmenu – The right mouse button is clicked. ● copy – Text is copied to the clipboard. ● cut – Text is cut to the clipboard. ● dblclick – A double-click is registered on an element. ● focus – An element has received focus (e.g. the user has left a form field). Note, this doesn’t bubble by default, meaning a listener on the document node won’t be able to catch it. To activate event delegation, you’ll need to set the last parameter in thedocument.addEventListener() call to true instead of false. ● keydown – A key is pressed down. ● keyup – A pressed down key is released. ● mousedown – The mouse button is pressed down. ● mouseenter – The mouse pointer is moved over the element where the listener is attached. Won’t really work if the listener is on the document node. ● mouseleave – The mouse pointer is moved off the element where the listener is attached. Won’t really work if the listener is on the document node. ● mouseout – The mouse pointer is moved off the element where the listener is attached or one of its children. ● mouseover – The mouse pointer is moved over the element where the listener is attached or one of its children. ● mouseup – The pressed down mouse button is released. ● orientationchange – The orientation (portrait / landscape) of the screen changes. ● reset – A form is reset. ● scroll – A document view or element is scrolled. ● submit – A form submit is registered (use GTM’s Form Submit Listener instead). <script> var eventType = "change"; // Modify this to reflect the event type you want to listen for if (document.addEventListener) { document.addEventListener(eventType, {{generic event handler}}, false); } else if (document.attachEvent) { document.attachEvent('on' + eventType, {{generic event handler}}); } </script> https://developer.mozilla.org/en-US/docs/Web/Events
  • 11. CSS Selectors rules (GTM v2 only) .thisclass Matches if element has class “thisclass” .thisclass.thatclass Matches if element has class “thisclass” and class “thatclass” #thisid Matches if element has ID “thisid” #main .navlink Matches if element has class “navlink” and is a descendant of an element with the ID “main” div#main > .navlink Matches if element has class “navlink” and is the direct child of a DIV element with the ID “main” :checked Matches if element is checked (radio button or checkbox) [data-title~=”chairman mao”] Matches if element has attribute “data-title” with the string “chairman mao” somewhere in its value a[href$=”.pdf”] Matches if element is a link (A) with a HREF attribute that ends with “.pdf” .contactmail:only-child Matches if element has class “contactmail” and is the only child of its parent http://www.w3schools.com/cssref/css_selectors.asp
  • 13. Так выглядят реальные контейнеры И да, там ни строчки кода GA/dataLayer на сайтах. Все отслеживается “снаружи”.
  • 14. GTM трюкиCustom HTML tag fired on GTM load <script> var checkzoom = function(e) { if( e.which === 187 && e.ctrlKey ) { dataLayer.push({'event': 'zoom'}); } }; document.addEventListener('keydown', checkzoom); </script> Начиная с какого разрешения экрана пользователи разного возраста пользуются CTRL+?
  • 15. MAILTO + &cid on Google Apps Gmail Revenue from the mailto: links MP: http://www.google-analytics.com/collect?v=1&tid=UA-8202998- 27&t=event&cid=1732166662.1421823610&ec=client&ea=new&ev=3420000
  • 16. ● top - Detail view ● 500px - Checkout ● end of the article - Transaction jQuery custom listener + chain of events + custom html datalayer pushes + enhanced ecommerce tags Custom Scroll Listener
  • 17. Вызов транзакции в GA и Метрике одновременно По 1 правилу - два тега 1) сustom html tag <script type="text/javascript"> yaCounter179064.reachGoal('Home', yaParams); </script> 2) тег Google Analytics, тип transaction GTM трюки
  • 18. GTM трюки - проигрывание видео на сайте
  • 19. GTM трюки - клики по маркерам на карте
  • 23. Собираем объект для расширенной электронной торговли по кускам
  • 24. Если товаров много (например, в корзине) var products = new Array(); for(var i=2; i<document.getElementsByClassName("sale_basket_basket zero")[0].getElementsByTagName("tr").length-1; i=i+3) { var b=document.getElementsByClassName("sale_basket_basket zero")[0].children[0].children[i]; var name = b.children[0].getElementsByClassName("m5")[0].innerText; var quantity = b.getElementsByClassName("quantity")[0].children[0].value; var price = b.getElementsByClassName("price")[0].innerText products.push({'name':name,'quantity':quantity,'price':price}); }
  • 25. Отправляем Product Impression с указанием списка (также покупают, подойдут) по мере попадания продукта в зону видимости var productPosition=0; $(window).bind("scroll", function() { $(".name_carousel:in-viewport").not('. impressionSent').each(function(){ $(this).addClass('impressionSent'); productPosition=productPosition+1; dataLayer.push({ 'event': 'impression', 'list' : $(this)[0].parentElement.parentElement. parentElement.className }); (function($) { $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $(element).offset().top - settings.threshold; }; $.abovethetop = function(element, settings) { var top = $(window).scrollTop(); return top >= $(element).offset().top + $(element).height() - settings.threshold; }; $.rightofscreen = function(element, settings) { var fold = $(window).width() + $(window).scrollLeft(); return fold <= $(element).offset().left - settings.threshold; }; $.leftofscreen = function(element, settings) { var left = $(window).scrollLeft(); return left >= $(element).offset().left + $(element).width() - settings.threshold; }; $.inviewport = function(element, settings) { return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; $.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top": function(a, i, m) { return $.abovethetop(a, {threshold : 0}); }, "left-of-screen": function(a, i, m) { return $.leftofscreen(a, {threshold : 0}); }, "right-of-screen": function(a, i, m) { return $.rightofscreen(a, {threshold : 0}); }, "in-viewport": function(a, i, m) { return $.inviewport(a, {threshold : 0}); } }); })(jQuery); Visibility обработчик etc...
  • 26. Делаем из хлебных крошек Enhanced E-commerce Product Category document.getElementsByClassName("breadcrumbs")[0].innerText "Главная > Каталог > Шторы > В гостиную > Комплект штор для гостиной Antonio-S 123206770" document.getElementsByClassName("breadcrumbs")[0].innerText.replace(/s>s/g ,'/').replace("Главная/Каталог/",""); "Шторы/В гостиную/Комплект штор для гостиной Antonio-S 123206770"
  • 29. Google analytics Debugger ● включает расширенный лог в консоль, заменяя analytics.js на analytics_debug.js
  • 30. Tag Assistant by Google ● показывает какие теги присутствуют на страницах и нет ли синтаксических ошибок ● для GTM контейнеров показывает какие теги были запущены через него.
  • 33. ● А создался ли сам объект ga? ● Выполняются ли функции?
  • 34. Если MP отправляется из недоступного вам куска кода
  • 38. Какие теги сработали при выполнении действия Инструмент отладки Действие при отладке