Advanced Form Tracking in Google Tag Manager

Post on 14-Jun-2015

2.460 views 3 download

Tags:

description

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

Transcript of 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 <<

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

?

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB5

Why track forms?

Track forms to reveal the conversion-killing monsters…

Session start

Session includes /thankyou/ page

Session does not include /thankyou/ page

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB6

Why track forms?

…and to find opportunities to optimize the entire online experience

Session start

Session includes /thankyou/ page

Session does not include /thankyou/ page

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB7

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

Why track forms?

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB8

Because agility is incredibly important to web analytics

Why track forms with Google Tag Manager?

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB9

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

Why track forms with Google Tag Manager?

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

Why track forms with Google Tag Manager?

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB11

What is the biggest challenge here?

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB12

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegation

GTM’s form submit handler

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB13

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB14

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB15

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB16

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB17

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB18

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

JS

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB19

What is the biggest challenge here?

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

JS

X

X

X

29 Oct 2014 | Conversion Conference, London | @SimoAhava

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB21

Tracking forms with Google Tag Manager

NB22

Step 1: Initiate a Form Submit Listener

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB23

Step 1: Initiate a Form Submit Listener

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB24

Step 1: Initiate a Form Submit Listener

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB25

Step 1: Initiate a Form Submit Listener

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB26

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB27

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB28

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB29

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB30

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB31

Step 3: Use macros to parse form fields

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

PII ALERT!

NB32

Step 3: Use macros to parse form fields

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB33

Step 3: Use macros to parse form fields

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB34

Step 3: Use macros to parse form fields

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB35

Step 3: Use macros to parse form fields

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB36

Step 4: Create your own listeners

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

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB37

Step 4: Create your own listeners

Custom HTML TagCode:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB38

Summary and further reading

NB39

Why track forms?

To create a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB40

Why track forms?

To create a storyTo complete a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

NB41

Why track forms?

To create a storyTo complete a storyTo recognize a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

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/

29 Oct 2014 | Conversion Conference, London | @SimoAhava

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!

29 Oct 2014 | Conversion Conference, London | @SimoAhava