advanced form tracking in google tag manager

NB

Advanced Form TrackingGoogle Tag Manager

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Simo Ahava

@SimoAhava

google.me/+SimoAhava

>> www.simoahava.com <<

http://www.simoahava.com/

NB3

What’s the point?

NB4

Why track forms?

Form engagement is rarely tracked together with web traffic

Session start

Session includes /thankyou/ page

Session does not include /thankyou/ page

?


NB5

Why track forms?

Track forms to reveal the conversion-killing monsters…

Session start




NB6

Why track forms?

…and to find opportunities to optimize the entire online experience

Session start




NB7

For many websites, a web form is central to identifying and optimizing engagement goals!

Why track forms?


NB8

Because agility is incredibly important to web analytics

Why track forms with Google Tag Manager?


NB9

Because a complex development process is detrimental to analytics and to capturing the subtleties of engagement


X29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB10

Because Google Tag Manager leverages a number of JavaScript APIs that help you track engagement on your site



NB11

What is the biggest challenge here?


NB12


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegation

GTM’s form submit handler


NB13


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM


NB14


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM


NB15


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM


NB16


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM


NB17


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM


NB18


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM

JS


NB19


HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM


GTM

JS

X

X

X


NB20

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!

Other challenges


NB21

Tracking forms with Google Tag Manager

NB22

Step 1: Initiate a Form Submit Listener


NB23



NB24



NB25



NB26

Step 2: Create tag(s) to collect submit events


NB27



NB28



NB29



NB30



NB31

Step 3: Use macros to parse form fields

{{field value}}Macro Type: Custom JavaScriptCode:


PII ALERT!

NB32


{{selected option}}Macro Type: Custom JavaScriptCode:


NB33


{{checked button}}Macro Type: Custom JavaScriptCode:


NB34


{{string of checked buttons}}Macro Type: Custom JavaScriptCode:


NB35


{{array of checked buttons}}Macro Type: Custom JavaScriptCode:


NB36

Step 4: Create your own listeners

{{generic event handler}}Macro Type: Custom JavaScriptCode:


NB37

Step 4: Create your own listeners

Custom HTML TagCode:


NB38

Summary and further reading

NB39

Why track forms?

To create a story


NB40

Why track forms?

To create a storyTo complete a story


NB41

Why track forms?

To create a storyTo complete a storyTo recognize a story


NB42

Further reading

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/


NB43

Further reading

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!


advanced form tracking in google tag manager

Internet

conversion conference