Tag Management Solutions 
BEST. DATA. EVER. 
Simo Ahava (NetBooster) – Marketing Festival
Q1: Why Should I Care? 
Marketing Festival 2014 | #mktfest | @SimoAhava
TYPICAL (WATERFALL) PROCESS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
THE BUSINESS OWNER / EXECUTIVE 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
THE MARKETER / NON-DEVELOPER 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
THE DEVELOPER / IT 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
SILOS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
SILOS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
SILOS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
SILOS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
INEFFECTIVE, NON-ITERATIVE PROCESS 
Idea Implementation Analysis Results 
Marketing Festival 2014 | #mktfest | @SimoAhava
INEFFECTIVE, NON-ITERATIVE PROCESS 
Business 
Requirement 
Data 
Point(s) 
Measurable 
Develop Test 
Design 
Marketing Festival 2014 | #mktfest | @SimoAhava 
Goal 
Ticket / 
Request 
Publish 
Approve
Business 
Requirement 
Data 
Point(s) 
Measurable 
Develop Test 
Design 
Marketing Festival 2014 | #mktfest | @SimoAhava 
Goal 
Ticket / 
Request 
Publish 
Approve 
Marketer / 
Non-developer 
Developer 
INEFFECTIVE, NON-ITERATIVE PROCESS
Marketing Festival 2014 | #mktfest | @SimoAhava 
Business 
Req. 
TMS & 
Data 
Layer 
Data 
Heaven 
INVOLVE EVERYONE AROUND DATA
AND MAKE IT AGILE! 
Marketing Festival 2014 | #mktfest | @SimoAhava 
Business 
Req. 
TMS & 
Data 
Layer 
Data 
Heaven 
Rinse & Repeat
YOU SHOULD CARE BECAUSE 
ü Silos 
and 
non-­‐involvement 
lead 
to 
bad 
data 
quality 
Marketing Festival 2014 | #mktfest | @SimoAhava
YOU SHOULD CARE BECAUSE 
ü Silos 
and 
non-­‐involvement 
lead 
to 
bad 
data 
quality 
ü Bad 
data 
quality 
leads 
to 
misalignment 
of 
analy6cs 
and 
business 
goals 
Marketing Festival 2014 | #mktfest | @SimoAhava
YOU SHOULD CARE BECAUSE 
ü Silos 
and 
non-­‐involvement 
lead 
to 
bad 
data 
quality 
ü Bad 
data 
quality 
leads 
to 
misalignment 
of 
analy6cs 
and 
business 
goals 
ü Proper 
tools 
and 
processes 
improve 
data 
quality 
Marketing Festival 2014 | #mktfest | @SimoAhava
Q2: What Is ”Tag Management” 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
BEFORE 
Marketing Festival 2014 | #mktfest | @SimoAhava
AFTER 
Marketing Festival 2014 | #mktfest | @SimoAhava
AFTER 
Marketing Festival 2014 | #mktfest | @SimoAhava 
Kirk Layer 
Data Layer 
Picard Layer
AFTER 
Marketing Festival 2014 | #mktfest | @SimoAhava
TAG MANAGEMENT IS 
ü Consolida6on 
of 
marke6ng-­‐related 
web 
development 
Marketing Festival 2014 | #mktfest | @SimoAhava
TAG MANAGEMENT IS 
ü Consolida6on 
of 
marke6ng-­‐related 
web 
development 
ü A 
common 
terminology 
for 
all 
working 
with 
data 
Marketing Festival 2014 | #mktfest | @SimoAhava
TAG MANAGEMENT IS 
ü Consolida6on 
of 
marke6ng-­‐related 
web 
development 
ü A 
common 
terminology 
for 
all 
working 
with 
data 
ü Fer6le 
ground 
for 
agile 
growth 
in 
data 
organiza6on 
Marketing Festival 2014 | #mktfest | @SimoAhava
Q3: What Is The Data Layer? 
Marketing Festival 2014 | #mktfest | @SimoAhava
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITHOUT A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITH A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITH A DATA LAYER…
Marketing Festival 2014 | #mktfest | @SimoAhava 
Marke6ng 
PlaCorm 
I 
Marke6ng 
PlaCorm 
II 
Marke6ng 
PlaCorm 
III 
WITH A DATA LAYER…
DATA LAYER IS 
ü A 
structured 
repository 
for 
all 
marke6ng 
data 
Marketing Festival 2014 | #mktfest | @SimoAhava
DATA LAYER IS 
ü A 
structured 
repository 
for 
all 
marke6ng 
data 
ü Dynamic 
and 
flexible 
Marketing Festival 2014 | #mktfest | @SimoAhava
DATA LAYER IS 
ü A 
structured 
repository 
for 
all 
marke6ng 
data 
ü Dynamic 
and 
flexible 
ü Platorm-­‐ 
and 
vendor-­‐independent 
Marketing Festival 2014 | #mktfest | @SimoAhava
Q4: How Do You Do eCommerce With A TMS? 
Marketing Festival 2014 | #mktfest | @SimoAhava
You don't! 
Marketing Festival 2014 | #mktfest | @SimoAhava
<script> 
window.dataLayer 
= 
window.dataLayer 
|| 
[]; 
dataLayer.push({ 
'transactionId' 
: 
'12345', 
'transactionAffiliation' 
: 
'MKTFEST', 
'transactionTotal' 
: 
9.99, 
'transactionTax' 
: 
1.32, 
'transactionShipping' 
: 
2.50, 
'transactionProducts' 
: 
[{ 
'sku' 
: 
'WhenIGrowUp', 
'name' 
: 
'IWantToBe', 
'category' 
: 
'Avinash', 
'price' 
: 
5.50, 
'quantity' 
: 
1 
},{ 
'sku' 
: 
'BEST', 
'name' 
: 
'CONFERENCE', 
'category' 
: 
'EVER', 
'price' 
: 
3.50, 
'quantity' 
: 
2 
}] 
}); 
</script> 
<!-­‐-­‐ 
Google 
Tag 
Manager 
Container 
Snippet 
Here 
-­‐-­‐>
<script> 
window.dataLayer 
= 
window.dataLayer 
|| 
[]; 
dataLayer.push({ 
'transactionId' 
: 
'12345', 
'transactionAffiliation' 
: 
'MKTFEST', 
'transactionTotal' 
: 
9.99, 
'transactionTax' 
: 
1.32, 
'transactionShipping' 
: 
2.50, 
'transactionProducts' 
: 
[{ 
'sku' 
: 
'WhenIGrowUp', 
'name' 
: 
'IWantToBe', 
'category' 
: 
'Avinash', 
'price' 
: 
5.50, 
'quantity' 
: 
1 
},{ 
'sku' 
: 
'BEST', 
'name' 
: 
'CONFERENCE', 
'category' 
: 
'EVER', 
'price' 
: 
3.50, 
'quantity' 
: 
2 
}] 
}); 
</script> 
<!-­‐-­‐ 
Google 
Tag 
Manager 
Container 
Snippet 
Here 
-­‐-­‐> 
Triggers your eCommerce 
Transaction tag
<script> 
window.dataLayer 
= 
window.dataLayer 
|| 
[]; 
dataLayer.push({ 
'transactionId' 
: 
'12345', 
'transactionAffiliation' 
: 
'MKTFEST', 
'transactionTotal' 
: 
9.99, 
'transactionTax' 
: 
1.32, 
'transactionShipping' 
: 
2.50, 
'transactionProducts' 
: 
[{ 
'sku' 
: 
'WhenIGrowUp', 
'name' 
: 
'IWantToBe', 
'category' 
: 
'Avinash', 
'price' 
: 
5.50, 
'quantity' 
: 
1 
},{ 
'sku' 
: 
'BEST', 
'name' 
: 
'CONFERENCE', 
'category' 
: 
'EVER', 
'price' 
: 
3.50, 
'quantity' 
: 
2 
}] 
}); 
</script> 
<!-­‐-­‐ 
Google 
Tag 
Manager 
Container 
Snippet 
Here 
-­‐-­‐> 
The dataLayer is 
written by your 
eCommerce 
platform or CMS! 
Triggers your eCommerce 
Transaction tag
<html> 
<head> 
<title>MARKETING 
FESTIVAL 
RULES 
OK</title> 
<script> 
window.dataLayer 
= 
window.dataLayer 
|| 
[]; 
dataLayer.push({ 
'transactionId' 
: 
'12345', 
'transactionAffiliation' 
: 
'MKTFEST', 
'transactionTotal' 
: 
9.99, 
'transactionTax' 
: 
1.32, 
'transactionShipping' 
: 
2.50, 
'transactionProducts' 
: 
[{ 
'sku' 
: 
'WhenIGrowUp', 
'name' 
: 
'IWantToBe', 
'category' 
: 
'Avinash', 
'price' 
: 
5.50, 
'quantity' 
: 
1 
},{ 
'sku' 
: 
'BEST', 
'name' 
: 
'CONFERENCE', 
'category' 
: 
'EVER', 
'price' 
: 
3.50, 
'quantity' 
: 
2 
}] 
}); 
</script> 
</head> 
<body> 
<!-­‐-­‐ 
Google 
Tag 
Manager 
Container 
Snippet 
Here 
-­‐-­‐> 
</body> 
</html> 
1. eCommerce platform or CMS 
renders the page template…
<script> 
window.dataLayer 
= 
window.dataLayer 
|| 
[]; 
dataLayer.push({ 
'transactionId' 
: 
'12345', 
'transactionAffiliation' 
: 
'MKTFEST', 
'transactionTotal' 
: 
9.99, 
'transactionTax' 
: 
1.32, 
'transactionShipping' 
: 
2.50, 
'transactionProducts' 
: 
[{ 
'sku' 
: 
'WhenIGrowUp', 
'name' 
: 
'IWantToBe', 
'category' 
: 
'Avinash', 
'price' 
: 
5.50, 
'quantity' 
: 
1 
},{ 
'sku' 
: 
'BEST', 
'name' 
: 
'CONFERENCE', 
'category' 
: 
'EVER', 
'price' 
: 
3.50, 
'quantity' 
: 
2 
}] 
}); 
</script> 
1. eCommerce platform or CMS 
renders the page template… 
2. …and populates dataLayer with 
details about the transaction…
1. eCommerce platform or CMS 
renders the page template… 
2. …and populates dataLayer with 
details about the transaction… 
3. …these details are then picked 
up by a tag in GTM…
1. eCommerce platform or CMS 
renders the page template… 
2. …and populates dataLayer with 
details about the transaction… 
3. …these details are then picked 
up by a tag in GTM… 
4. …which sends this data to 
Google Analytics
YOU ”DO” ECOMMERCE 
ü Using 
the 
data 
layer 
Marketing Festival 2014 | #mktfest | @SimoAhava
YOU ”DO” ECOMMERCE 
ü Using 
the 
data 
layer 
ü By 
observing 
and 
respec6ng 
structural 
requirements 
Marketing Festival 2014 | #mktfest | @SimoAhava
YOU ”DO” ECOMMERCE 
ü Using 
the 
data 
layer 
ü By 
observing 
and 
respec6ng 
structural 
requirements 
ü With 
the 
developer 
and 
marketer 
working 
together 
Marketing Festival 2014 | #mktfest | @SimoAhava
Q5: Why Don't The Auto-Event Listeners Work? 
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION 
GTM's form submit handler 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
submit()
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
submit()
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
submit()
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
submit()
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
submit()
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
return 
false 
submit() 
JS
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
return 
false 
submit() 
JS
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
return 
false 
submit() 
JS
EVENT DELEGATION 
Marketing Festival 2014 | #mktfest | @SimoAhava 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
GTM 
return 
false 
submit() 
JS 
X 
X 
X
SAMPLE FIX 
$('a.toTop').on('click', 
function() 
{ 
('html, 
body') 
.animate({ 
scrollTop: 
$('#top').offset().top 
– 
5 
}, 
500); 
return 
false; 
} 
); 
Binds 
a 
specific 
link 
click 
to 
scroll 
the 
screen 
to 
the 
top 
of 
the 
page 
Marketing Festival 2014 | #mktfest | @SimoAhava
SAMPLE FIX 
$('a.toTop').on('click', 
function() 
{ 
('html, 
body') 
.animate({ 
scrollTop: 
$('#top').offset().top 
– 
5 
}, 
500); 
return 
false; 
} 
); 
Binds 
a 
specific 
link 
click 
to 
scroll 
the 
screen 
to 
the 
top 
of 
the 
page 
Marketing Festival 2014 | #mktfest | @SimoAhava
SAMPLE FIX 
$('a.toTop').on('click', 
function(e) 
{ 
e.preventDefault(); 
('html, 
body') 
.animate({ 
scrollTop: 
$('#top').offset().top 
– 
5 
}, 
500); 
return 
false; 
} 
); 
Binds 
a 
specific 
link 
click 
to 
scroll 
the 
screen 
to 
the 
top 
of 
the 
page 
Marketing Festival 2014 | #mktfest | @SimoAhava
ü GTM's 
listeners 
are 
primed 
on 
the 
document 
Marketing Festival 2014 | #mktfest | @SimoAhava 
node 
EVENT DELEGATION
ü GTM's 
listeners 
are 
primed 
on 
the 
document 
Marketing Festival 2014 | #mktfest | @SimoAhava 
node 
ü For 
them 
to 
work, 
events 
must 
bubble 
/ 
propagate 
EVENT DELEGATION
EVENT DELEGATION 
ü GTM's 
listeners 
are 
primed 
on 
the 
document 
Marketing Festival 2014 | #mktfest | @SimoAhava 
node 
ü For 
them 
to 
work, 
events 
must 
bubble 
/ 
propagate 
ü If 
events 
aren't 
captured, 
work 
with 
your 
developers 
to 
find 
possible 
func6ons 
that 
stop 
propaga5on
Q6: What Tools Should I Use? 
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR MAPPING TAGS 
Google Tag Assistant 
http://goo.gl/qF6OQM 
Marketing Festival 2014 | #mktfest | @SimoAhava 
WASP.crawler 
http://goo.gl/1fieUZ
FOR DEBUGGING HITS 
Marketing Festival 2014 | #mktfest | @SimoAhava 
GA Debugger 
http://goo.gl/GmqodA 
WASP.inspector 
http://goo.gl/Tl9Nhi
FOR DEBUGGING GTM 
Marketing Festival 2014 | #mktfest | @SimoAhava 
GTM Sonar 
http://goo.gl/NVmBhv 
GTM Preview 
http://tagmanager.google.com/
GTM TOOLS 
http://www.gtmtools.com/ 
Marketing Festival 2014 | #mktfest | @SimoAhava
GTM TOOLS V2.0 
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR DOING AWESOME STUFF 
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR DOING AWESOME STUFF 
http://goo.gl/7wxHCD 
Marketing Festival 2014 | #mktfest | @SimoAhava
Simo Ahava | NetBooster 
@SimoAhava 
http://google.me/+SimoAhava 
simo@simoahava.com 
www.simoahava.com 
www.netbooster.fi 
THANK YOU!

Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014

  • 1.
    Tag Management Solutions BEST. DATA. EVER. Simo Ahava (NetBooster) – Marketing Festival
  • 2.
    Q1: Why ShouldI Care? Marketing Festival 2014 | #mktfest | @SimoAhava
  • 3.
    TYPICAL (WATERFALL) PROCESS Idea Implementation Analysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 4.
    THE BUSINESS OWNER/ EXECUTIVE Idea Implementation Analysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 5.
    THE MARKETER /NON-DEVELOPER Idea Implementation Analysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 6.
    THE DEVELOPER /IT Idea Implementation Analysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 7.
    SILOS Idea ImplementationAnalysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 8.
    SILOS Idea ImplementationAnalysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 9.
    SILOS Idea ImplementationAnalysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 10.
    SILOS Idea ImplementationAnalysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 11.
    INEFFECTIVE, NON-ITERATIVE PROCESS Idea Implementation Analysis Results Marketing Festival 2014 | #mktfest | @SimoAhava
  • 12.
    INEFFECTIVE, NON-ITERATIVE PROCESS Business Requirement Data Point(s) Measurable Develop Test Design Marketing Festival 2014 | #mktfest | @SimoAhava Goal Ticket / Request Publish Approve
  • 13.
    Business Requirement Data Point(s) Measurable Develop Test Design Marketing Festival 2014 | #mktfest | @SimoAhava Goal Ticket / Request Publish Approve Marketer / Non-developer Developer INEFFECTIVE, NON-ITERATIVE PROCESS
  • 14.
    Marketing Festival 2014| #mktfest | @SimoAhava Business Req. TMS & Data Layer Data Heaven INVOLVE EVERYONE AROUND DATA
  • 15.
    AND MAKE ITAGILE! Marketing Festival 2014 | #mktfest | @SimoAhava Business Req. TMS & Data Layer Data Heaven Rinse & Repeat
  • 16.
    YOU SHOULD CAREBECAUSE ü Silos and non-­‐involvement lead to bad data quality Marketing Festival 2014 | #mktfest | @SimoAhava
  • 17.
    YOU SHOULD CAREBECAUSE ü Silos and non-­‐involvement lead to bad data quality ü Bad data quality leads to misalignment of analy6cs and business goals Marketing Festival 2014 | #mktfest | @SimoAhava
  • 18.
    YOU SHOULD CAREBECAUSE ü Silos and non-­‐involvement lead to bad data quality ü Bad data quality leads to misalignment of analy6cs and business goals ü Proper tools and processes improve data quality Marketing Festival 2014 | #mktfest | @SimoAhava
  • 19.
    Q2: What Is”Tag Management” Marketing Festival 2014 | #mktfest | @SimoAhava
  • 20.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 21.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 22.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 23.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 24.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 25.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 26.
    BEFORE Marketing Festival2014 | #mktfest | @SimoAhava
  • 27.
    AFTER Marketing Festival2014 | #mktfest | @SimoAhava
  • 28.
    AFTER Marketing Festival2014 | #mktfest | @SimoAhava Kirk Layer Data Layer Picard Layer
  • 29.
    AFTER Marketing Festival2014 | #mktfest | @SimoAhava
  • 30.
    TAG MANAGEMENT IS ü Consolida6on of marke6ng-­‐related web development Marketing Festival 2014 | #mktfest | @SimoAhava
  • 31.
    TAG MANAGEMENT IS ü Consolida6on of marke6ng-­‐related web development ü A common terminology for all working with data Marketing Festival 2014 | #mktfest | @SimoAhava
  • 32.
    TAG MANAGEMENT IS ü Consolida6on of marke6ng-­‐related web development ü A common terminology for all working with data ü Fer6le ground for agile growth in data organiza6on Marketing Festival 2014 | #mktfest | @SimoAhava
  • 33.
    Q3: What IsThe Data Layer? Marketing Festival 2014 | #mktfest | @SimoAhava
  • 34.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 35.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 36.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 37.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 38.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 39.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 40.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 41.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITHOUT A DATA LAYER…
  • 42.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITH A DATA LAYER…
  • 43.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITH A DATA LAYER…
  • 44.
    Marketing Festival 2014| #mktfest | @SimoAhava Marke6ng PlaCorm I Marke6ng PlaCorm II Marke6ng PlaCorm III WITH A DATA LAYER…
  • 45.
    DATA LAYER IS ü A structured repository for all marke6ng data Marketing Festival 2014 | #mktfest | @SimoAhava
  • 46.
    DATA LAYER IS ü A structured repository for all marke6ng data ü Dynamic and flexible Marketing Festival 2014 | #mktfest | @SimoAhava
  • 47.
    DATA LAYER IS ü A structured repository for all marke6ng data ü Dynamic and flexible ü Platorm-­‐ and vendor-­‐independent Marketing Festival 2014 | #mktfest | @SimoAhava
  • 48.
    Q4: How DoYou Do eCommerce With A TMS? Marketing Festival 2014 | #mktfest | @SimoAhava
  • 49.
    You don't! MarketingFestival 2014 | #mktfest | @SimoAhava
  • 50.
    <script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId' : '12345', 'transactionAffiliation' : 'MKTFEST', 'transactionTotal' : 9.99, 'transactionTax' : 1.32, 'transactionShipping' : 2.50, 'transactionProducts' : [{ 'sku' : 'WhenIGrowUp', 'name' : 'IWantToBe', 'category' : 'Avinash', 'price' : 5.50, 'quantity' : 1 },{ 'sku' : 'BEST', 'name' : 'CONFERENCE', 'category' : 'EVER', 'price' : 3.50, 'quantity' : 2 }] }); </script> <!-­‐-­‐ Google Tag Manager Container Snippet Here -­‐-­‐>
  • 51.
    <script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId' : '12345', 'transactionAffiliation' : 'MKTFEST', 'transactionTotal' : 9.99, 'transactionTax' : 1.32, 'transactionShipping' : 2.50, 'transactionProducts' : [{ 'sku' : 'WhenIGrowUp', 'name' : 'IWantToBe', 'category' : 'Avinash', 'price' : 5.50, 'quantity' : 1 },{ 'sku' : 'BEST', 'name' : 'CONFERENCE', 'category' : 'EVER', 'price' : 3.50, 'quantity' : 2 }] }); </script> <!-­‐-­‐ Google Tag Manager Container Snippet Here -­‐-­‐> Triggers your eCommerce Transaction tag
  • 52.
    <script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId' : '12345', 'transactionAffiliation' : 'MKTFEST', 'transactionTotal' : 9.99, 'transactionTax' : 1.32, 'transactionShipping' : 2.50, 'transactionProducts' : [{ 'sku' : 'WhenIGrowUp', 'name' : 'IWantToBe', 'category' : 'Avinash', 'price' : 5.50, 'quantity' : 1 },{ 'sku' : 'BEST', 'name' : 'CONFERENCE', 'category' : 'EVER', 'price' : 3.50, 'quantity' : 2 }] }); </script> <!-­‐-­‐ Google Tag Manager Container Snippet Here -­‐-­‐> The dataLayer is written by your eCommerce platform or CMS! Triggers your eCommerce Transaction tag
  • 53.
    <html> <head> <title>MARKETING FESTIVAL RULES OK</title> <script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId' : '12345', 'transactionAffiliation' : 'MKTFEST', 'transactionTotal' : 9.99, 'transactionTax' : 1.32, 'transactionShipping' : 2.50, 'transactionProducts' : [{ 'sku' : 'WhenIGrowUp', 'name' : 'IWantToBe', 'category' : 'Avinash', 'price' : 5.50, 'quantity' : 1 },{ 'sku' : 'BEST', 'name' : 'CONFERENCE', 'category' : 'EVER', 'price' : 3.50, 'quantity' : 2 }] }); </script> </head> <body> <!-­‐-­‐ Google Tag Manager Container Snippet Here -­‐-­‐> </body> </html> 1. eCommerce platform or CMS renders the page template…
  • 54.
    <script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId' : '12345', 'transactionAffiliation' : 'MKTFEST', 'transactionTotal' : 9.99, 'transactionTax' : 1.32, 'transactionShipping' : 2.50, 'transactionProducts' : [{ 'sku' : 'WhenIGrowUp', 'name' : 'IWantToBe', 'category' : 'Avinash', 'price' : 5.50, 'quantity' : 1 },{ 'sku' : 'BEST', 'name' : 'CONFERENCE', 'category' : 'EVER', 'price' : 3.50, 'quantity' : 2 }] }); </script> 1. eCommerce platform or CMS renders the page template… 2. …and populates dataLayer with details about the transaction…
  • 55.
    1. eCommerce platformor CMS renders the page template… 2. …and populates dataLayer with details about the transaction… 3. …these details are then picked up by a tag in GTM…
  • 56.
    1. eCommerce platformor CMS renders the page template… 2. …and populates dataLayer with details about the transaction… 3. …these details are then picked up by a tag in GTM… 4. …which sends this data to Google Analytics
  • 57.
    YOU ”DO” ECOMMERCE ü Using the data layer Marketing Festival 2014 | #mktfest | @SimoAhava
  • 58.
    YOU ”DO” ECOMMERCE ü Using the data layer ü By observing and respec6ng structural requirements Marketing Festival 2014 | #mktfest | @SimoAhava
  • 59.
    YOU ”DO” ECOMMERCE ü Using the data layer ü By observing and respec6ng structural requirements ü With the developer and marketer working together Marketing Festival 2014 | #mktfest | @SimoAhava
  • 60.
    Q5: Why Don'tThe Auto-Event Listeners Work? Marketing Festival 2014 | #mktfest | @SimoAhava
  • 61.
    EVENT DELEGATION GTM'sform submit handler Marketing Festival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM
  • 62.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM submit()
  • 63.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM submit()
  • 64.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM submit()
  • 65.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM submit()
  • 66.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM submit()
  • 67.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM return false submit() JS
  • 68.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM return false submit() JS
  • 69.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM return false submit() JS
  • 70.
    EVENT DELEGATION MarketingFestival 2014 | #mktfest | @SimoAhava HTML HEAD BODY ARTICLE DIV DIV FORM GTM return false submit() JS X X X
  • 71.
    SAMPLE FIX $('a.toTop').on('click', function() { ('html, body') .animate({ scrollTop: $('#top').offset().top – 5 }, 500); return false; } ); Binds a specific link click to scroll the screen to the top of the page Marketing Festival 2014 | #mktfest | @SimoAhava
  • 72.
    SAMPLE FIX $('a.toTop').on('click', function() { ('html, body') .animate({ scrollTop: $('#top').offset().top – 5 }, 500); return false; } ); Binds a specific link click to scroll the screen to the top of the page Marketing Festival 2014 | #mktfest | @SimoAhava
  • 73.
    SAMPLE FIX $('a.toTop').on('click', function(e) { e.preventDefault(); ('html, body') .animate({ scrollTop: $('#top').offset().top – 5 }, 500); return false; } ); Binds a specific link click to scroll the screen to the top of the page Marketing Festival 2014 | #mktfest | @SimoAhava
  • 74.
    ü GTM's listeners are primed on the document Marketing Festival 2014 | #mktfest | @SimoAhava node EVENT DELEGATION
  • 75.
    ü GTM's listeners are primed on the document Marketing Festival 2014 | #mktfest | @SimoAhava node ü For them to work, events must bubble / propagate EVENT DELEGATION
  • 76.
    EVENT DELEGATION üGTM's listeners are primed on the document Marketing Festival 2014 | #mktfest | @SimoAhava node ü For them to work, events must bubble / propagate ü If events aren't captured, work with your developers to find possible func6ons that stop propaga5on
  • 77.
    Q6: What ToolsShould I Use? Marketing Festival 2014 | #mktfest | @SimoAhava
  • 78.
    FOR MAPPING TAGS Google Tag Assistant http://goo.gl/qF6OQM Marketing Festival 2014 | #mktfest | @SimoAhava WASP.crawler http://goo.gl/1fieUZ
  • 79.
    FOR DEBUGGING HITS Marketing Festival 2014 | #mktfest | @SimoAhava GA Debugger http://goo.gl/GmqodA WASP.inspector http://goo.gl/Tl9Nhi
  • 80.
    FOR DEBUGGING GTM Marketing Festival 2014 | #mktfest | @SimoAhava GTM Sonar http://goo.gl/NVmBhv GTM Preview http://tagmanager.google.com/
  • 81.
    GTM TOOLS http://www.gtmtools.com/ Marketing Festival 2014 | #mktfest | @SimoAhava
  • 82.
    GTM TOOLS V2.0 Marketing Festival 2014 | #mktfest | @SimoAhava
  • 83.
    FOR DOING AWESOMESTUFF Marketing Festival 2014 | #mktfest | @SimoAhava
  • 84.
    FOR DOING AWESOMESTUFF http://goo.gl/7wxHCD Marketing Festival 2014 | #mktfest | @SimoAhava
  • 85.
    Simo Ahava |NetBooster @SimoAhava http://google.me/+SimoAhava simo@simoahava.com www.simoahava.com www.netbooster.fi THANK YOU!