simo ahava - tag management solutions – best. data. ever. mktfest 2014
TRANSCRIPT
Tag Management Solutions
BEST. DATA. EVER.
Simo Ahava (NetBooster) – Marketing Festival
Marketing Festival 2014 | #mktfest | @SimoAhava
Q1: Why Should I Care?
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
TYPICAL (WATERFALL) PROCESS
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
THE BUSINESS OWNER / EXECUTIVE
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
THE MARKETER / NON-DEVELOPER
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
THE DEVELOPER / IT
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
SILOS
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
SILOS
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
SILOS
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
SILOS
Marketing Festival 2014 | #mktfest | @SimoAhava
Idea Implementation Analysis Results
INEFFECTIVE, NON-ITERATIVE PROCESS
Marketing Festival 2014 | #mktfest | @SimoAhava
Business Requirement
Data Point(s)
Measurable Goal
Ticket / Request
Design
Develop Test
Publish
Approve
INEFFECTIVE, NON-ITERATIVE PROCESS
Marketing Festival 2014 | #mktfest | @SimoAhava
Business Requirement
Data Point(s)
Measurable Goal
Ticket / Request
Design
Develop Test
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
Marketing Festival 2014 | #mktfest | @SimoAhava
Business Req.
TMS & Data Layer
Data Heaven
Rinse & Repeat
AND MAKE IT AGILE!
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Silos and non-‐involvement lead to bad data quality
YOU SHOULD CARE BECAUSE
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Silos and non-‐involvement lead to bad data quality ü Bad data quality leads to misalignment of analy6cs
and business goals
YOU SHOULD CARE BECAUSE
Marketing Festival 2014 | #mktfest | @SimoAhava
ü 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
YOU SHOULD CARE BECAUSE
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
Picard Layer
Kirk Layer
Data Layer
Marketing Festival 2014 | #mktfest | @SimoAhava
AFTER
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Consolida6on of marke6ng-‐related web development
TAG MANAGEMENT IS
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Consolida6on of marke6ng-‐related web development ü A common terminology for all working with data
TAG MANAGEMENT IS
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Consolida6on of marke6ng-‐related web development ü A common terminology for all working with data ü Fer6le ground for agile growth in data organiza6on
TAG MANAGEMENT IS
Marketing Festival 2014 | #mktfest | @SimoAhava
Q3: What Is The 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
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…
Marketing Festival 2014 | #mktfest | @SimoAhava
ü A structured repository for all marke6ng data
DATA LAYER IS
Marketing Festival 2014 | #mktfest | @SimoAhava
ü A structured repository for all marke6ng data ü Dynamic and flexible
DATA LAYER IS
Marketing Festival 2014 | #mktfest | @SimoAhava
ü A structured repository for all marke6ng data ü Dynamic and flexible ü Platorm-‐ and vendor-‐independent
DATA LAYER IS
Marketing Festival 2014 | #mktfest | @SimoAhava
Q4: How Do You Do eCommerce With A TMS?
Marketing Festival 2014 | #mktfest | @SimoAhava
You don't!
<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 -‐-‐>
Triggers your eCommerce Transaction tag
The dataLayer is written by your eCommerce platform or CMS!
<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
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Using the data layer
YOU ”DO” ECOMMERCE
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Using the data layer ü By observing and respec6ng structural requirements
YOU ”DO” ECOMMERCE
Marketing Festival 2014 | #mktfest | @SimoAhava
ü Using the data layer ü By observing and respec6ng structural requirements ü With the developer and marketer working together
YOU ”DO” ECOMMERCE
Marketing Festival 2014 | #mktfest | @SimoAhava
Q5: Why Don't The Auto-Event Listeners Work?
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM's form submit handler
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
return false JS
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
return false JS
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
return false JS
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
HTML
HEAD
BODY
ARTICLE
DIV
DIV
FORM
GTM
submit()
return false JS
X
X
X
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() { ('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 node
EVENT DELEGATION
Marketing Festival 2014 | #mktfest | @SimoAhava
ü GTM's listeners are primed on the document node ü For them to work, events must bubble / propagate
EVENT DELEGATION
Marketing Festival 2014 | #mktfest | @SimoAhava
EVENT DELEGATION
ü GTM's listeners are primed on the document 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
Marketing Festival 2014 | #mktfest | @SimoAhava
Q6: What Tools Should I Use?
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR MAPPING TAGS
Google Tag Assistant
http://goo.gl/qF6OQM
WASP.crawler
http://goo.gl/1fieUZ
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR DEBUGGING HITS
GA Debugger
http://goo.gl/GmqodA
WASP.inspector
http://goo.gl/Tl9Nhi
Marketing Festival 2014 | #mktfest | @SimoAhava
FOR DEBUGGING GTM
GTM Sonar
http://goo.gl/NVmBhv
GTM Preview
http://tagmanager.google.com/
Marketing Festival 2014 | #mktfest | @SimoAhava
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
Simo Ahava | NetBooster @SimoAhava
http://google.me/+SimoAhava
www.simoahava.com www.netbooster.fi
THANK YOU!