Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
NB 
Advanced Form Tracking 
Google Tag Manager 
29 Oct 2014 | Conversion Conference, London | @SimoAhava
@SimoAhava 
google.me/+SimoAhava 
>> www.simoahava.com << 
Simo Ahava
NB 
What’s the point? 
3
Session includes 
/thankyou/ page 
NB 
Why track forms? 
Session does not include 
4 
Session start 
/thankyou/ page 
? 
F...
Session includes 
/thankyou/ page 
NB 
Why track forms? 
Session does not include 
5 
Session start 
/thankyou/ page 
Trac...
Session includes 
/thankyou/ page 
NB 
Why track forms? 
Session does not include 
6 
Session start 
/thankyou/ page 
…and...
For many websites, a web form is central to 
identifying and optimizing engagement goals! 
NB 
Why track forms? 
7 29 Oct ...
Why track forms with Google Tag Manager? 
NB 
Because agility is incredibly important to web analytics 
8 29 Oct 2014 | Co...
Why track forms with Google Tag Manager? 
NB 
Because a complex development process is detrimental to 
analytics and to ca...
Why track forms with Google Tag Manager? 
Because Google Tag Manager leverages a number of JavaScript 
NB 
APIs that help ...
NB 
What is the biggest challenge here? 
11 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
What is the biggest challenge here? 
12 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
GTM’s form submi...
NB 
What is the biggest challenge here? 
13 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
2...
NB 
What is the biggest challenge here? 
14 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
2...
NB 
What is the biggest challenge here? 
15 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
2...
NB 
What is the biggest challenge here? 
16 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
2...
NB 
What is the biggest challenge here? 
17 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
2...
NB 
What is the biggest challenge here? 
18 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
J...
NB 
What is the biggest challenge here? 
19 
HTML 
HEAD 
BODY 
ARTICLE 
DIV 
DIV 
FORM 
Event delegation 
submit() 
GTM 
J...
NB 
Other challenges 
 Is engagement page- or session-scoped? 
 If the user returns to the form later in the session, is...
NB 
Tracking forms with Google Tag 
Manager 
21
NB 
Step 1: Initiate a Form Submit Listener 
22 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Step 1: Initiate a Form Submit Listener 
23 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Step 1: Initiate a Form Submit Listener 
24 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Step 1: Initiate a Form Submit Listener 
25 29 Oct 2014 | Conversion Conference, London | @SimoAhava
Step 2: Create tag(s) to collect submit events 
NB 
26 29 Oct 2014 | Conversion Conference, London | @SimoAhava
Step 2: Create tag(s) to collect submit events 
NB 
27 29 Oct 2014 | Conversion Conference, London | @SimoAhava
Step 2: Create tag(s) to collect submit events 
NB 
28 29 Oct 2014 | Conversion Conference, London | @SimoAhava
Step 2: Create tag(s) to collect submit events 
NB 
29 29 Oct 2014 | Conversion Conference, London | @SimoAhava
Step 2: Create tag(s) to collect submit events 
NB 
30 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Step 3: Use macros to parse form fields 
31 
{{field value}} 
Macro Type: Custom JavaScript 
Code: 
PII ALERT! 
29 Oct...
NB 
Step 3: Use macros to parse form fields 
32 
{{selected option}} 
Macro Type: Custom JavaScript 
Code: 
29 Oct 2014 | ...
NB 
Step 3: Use macros to parse form fields 
33 
{{checked button}} 
Macro Type: Custom JavaScript 
Code: 
29 Oct 2014 | C...
NB 
Step 3: Use macros to parse form fields 
34 
{{string of checked buttons}} 
Macro Type: Custom JavaScript 
Code: 
29 O...
NB 
Step 3: Use macros to parse form fields 
35 
{{array of checked buttons}} 
Macro Type: Custom JavaScript 
Code: 
29 Oc...
NB 
Step 4: Create your own listeners 
36 
{{generic event handler}} 
Macro Type: Custom JavaScript 
Code: 
29 Oct 2014 | ...
NB 
Step 4: Create your own listeners 
37 
Custom HTML Tag 
Code: 
29 Oct 2014 | Conversion Conference, London | @SimoAhav...
NB 
Summary and further reading 
38
NB 
Why track forms? 
39 
To create a story 
29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Why track forms? 
40 
To create a story 
To complete a story 
29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB 
Why track forms? 
41 
To create a story 
To complete a story 
To recognize a story 
29 Oct 2014 | Conversion Conferenc...
NB 
Further reading 
42 
www.simoahava.com/analytics/form-tracking-google-tag-manager/ 
www.simoahava.com/analytics/custom...
NB 
Further reading 
43 
www.simoahava.com/analytics/form-tracking-google-tag-manager/ 
www.simoahava.com/analytics/custom...
Upcoming SlideShare
Loading in …5
×

Advanced Form Tracking in Google Tag Manager

6,096 views

Published on

My slides about how to do Advanced Form Tracking in Google Tag Manager. I presented these at Conversion Conference London, in October 2014.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Advanced Form Tracking in Google Tag Manager

  1. 1. NB Advanced Form Tracking Google Tag Manager 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  2. 2. @SimoAhava google.me/+SimoAhava >> www.simoahava.com << Simo Ahava
  3. 3. NB What’s the point? 3
  4. 4. Session includes /thankyou/ page NB Why track forms? Session does not include 4 Session start /thankyou/ page ? Form engagement is rarely tracked together with web traffic 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  5. 5. Session includes /thankyou/ page NB Why track forms? Session does not include 5 Session start /thankyou/ page Track forms to reveal the conversion-killing monsters… 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  6. 6. Session includes /thankyou/ page NB Why track forms? Session does not include 6 Session start /thankyou/ page …and to find opportunities to optimize the entire online experience 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  7. 7. For many websites, a web form is central to identifying and optimizing engagement goals! NB Why track forms? 7 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  8. 8. Why track forms with Google Tag Manager? NB Because agility is incredibly important to web analytics 8 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  9. 9. Why track forms with Google Tag Manager? NB Because a complex development process is detrimental to analytics and to capturing the subtleties of engagement 9 X 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  10. 10. Why track forms with Google Tag Manager? Because Google Tag Manager leverages a number of JavaScript NB APIs that help you track engagement on your site 10 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  11. 11. NB What is the biggest challenge here? 11 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  12. 12. NB What is the biggest challenge here? 12 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation GTM’s form submit handler 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  13. 13. NB What is the biggest challenge here? 13 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  14. 14. NB What is the biggest challenge here? 14 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  15. 15. NB What is the biggest challenge here? 15 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  16. 16. NB What is the biggest challenge here? 16 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  17. 17. NB What is the biggest challenge here? 17 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  18. 18. NB What is the biggest challenge here? 18 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM JS 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  19. 19. NB What is the biggest challenge here? 19 HTML HEAD BODY ARTICLE DIV DIV FORM Event delegation submit() GTM JS X X X 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  20. 20. NB Other challenges  Is engagement page- or session-scoped?  If the user returns to the form later in the session, is it an overall success, or one abandonment and one completion?  Just what events should you track?  submit  blur  focus  change  unload  Just what elements should you track?  What are relevant fields?  Should you track validation errors?  Should you track for funnels or unique goals?  Look out for PII! 20 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  21. 21. NB Tracking forms with Google Tag Manager 21
  22. 22. NB Step 1: Initiate a Form Submit Listener 22 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  23. 23. NB Step 1: Initiate a Form Submit Listener 23 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  24. 24. NB Step 1: Initiate a Form Submit Listener 24 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  25. 25. NB Step 1: Initiate a Form Submit Listener 25 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  26. 26. Step 2: Create tag(s) to collect submit events NB 26 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  27. 27. Step 2: Create tag(s) to collect submit events NB 27 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  28. 28. Step 2: Create tag(s) to collect submit events NB 28 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  29. 29. Step 2: Create tag(s) to collect submit events NB 29 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  30. 30. Step 2: Create tag(s) to collect submit events NB 30 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  31. 31. NB Step 3: Use macros to parse form fields 31 {{field value}} Macro Type: Custom JavaScript Code: PII ALERT! 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  32. 32. NB Step 3: Use macros to parse form fields 32 {{selected option}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  33. 33. NB Step 3: Use macros to parse form fields 33 {{checked button}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  34. 34. NB Step 3: Use macros to parse form fields 34 {{string of checked buttons}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  35. 35. NB Step 3: Use macros to parse form fields 35 {{array of checked buttons}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  36. 36. NB Step 4: Create your own listeners 36 {{generic event handler}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  37. 37. NB Step 4: Create your own listeners 37 Custom HTML Tag Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  38. 38. NB Summary and further reading 38
  39. 39. NB Why track forms? 39 To create a story 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  40. 40. NB Why track forms? 40 To create a story To complete a story 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  41. 41. NB Why track forms? 41 To create a story To complete a story To recognize a story 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  42. 42. NB Further reading 42 www.simoahava.com/analytics/form-tracking-google-tag-manager/ www.simoahava.com/analytics/custom-event-listeners-gtm/ www.simoahava.com/analytics/dont-gtm-listeners-work/ 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  43. 43. NB Further reading 43 www.simoahava.com/analytics/form-tracking-google-tag-manager/ www.simoahava.com/analytics/custom-event-listeners-gtm/ www.simoahava.com/analytics/dont-gtm-listeners-work/ THANK YOU! 29 Oct 2014 | Conversion Conference, London | @SimoAhava

×