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

Preview:

Citation preview

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

simo@simoahava.com

www.simoahava.com www.netbooster.fi

THANK YOU!