SlideShare a Scribd company logo

Advanced Form Tracking in Google Tag Manager

•Download as PPTX, PDF•
•
Simo Ahava
Simo Ahava

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

1 of 43
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 ? Form engagement is rarely tracked together with web traffic 29 Oct 2014 | Conversion Conference, London | @SimoAhava
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
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
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
Why track forms with Google Tag Manager? NB Because agility is incredibly important to web analytics 8 29 Oct 2014 | Conversion Conference, London | @SimoAhava
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
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
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 submit handler 29 Oct 2014 | Conversion Conference, London | @SimoAhava
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
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
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
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
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
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
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
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
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 2014 | Conversion Conference, London | @SimoAhava
NB Step 3: Use macros to parse form fields 32 {{selected option}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB Step 3: Use macros to parse form fields 33 {{checked button}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
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
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
NB Step 4: Create your own listeners 36 {{generic event handler}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
NB Step 4: Create your own listeners 37 Custom HTML Tag Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
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 Conference, London | @SimoAhava
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
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

More Related Content

Advanced Form Tracking in Google Tag Manager

  • 1. NB Advanced Form Tracking Google Tag Manager 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 2. @SimoAhava google.me/+SimoAhava >> www.simoahava.com << Simo Ahava
  • 3. NB What’s the point? 3
  • 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. 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. 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. 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. 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. 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. 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. NB What is the biggest challenge here? 11 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. NB Tracking forms with Google Tag Manager 21
  • 22. NB Step 1: Initiate a Form Submit Listener 22 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 23. NB Step 1: Initiate a Form Submit Listener 23 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 24. NB Step 1: Initiate a Form Submit Listener 24 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 25. NB Step 1: Initiate a Form Submit Listener 25 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 26. Step 2: Create tag(s) to collect submit events NB 26 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 27. Step 2: Create tag(s) to collect submit events NB 27 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 28. Step 2: Create tag(s) to collect submit events NB 28 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 29. Step 2: Create tag(s) to collect submit events NB 29 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 30. Step 2: Create tag(s) to collect submit events NB 30 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 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. 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. 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. 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. 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. NB Step 4: Create your own listeners 36 {{generic event handler}} Macro Type: Custom JavaScript Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 37. NB Step 4: Create your own listeners 37 Custom HTML Tag Code: 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 38. NB Summary and further reading 38
  • 39. NB Why track forms? 39 To create a story 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 40. NB Why track forms? 40 To create a story To complete a story 29 Oct 2014 | Conversion Conference, London | @SimoAhava
  • 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. 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. 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