43
NB Advanced Form Tracking Google Tag Manager 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Advanced Form Tracking - Conversion Conference

Embed Size (px)

DESCRIPTION

@SimoAhava's Presentation from October 2014, Conversion Conference

Citation preview

Page 1: Advanced Form Tracking - Conversion Conference

NB

Advanced Form TrackingGoogle Tag Manager

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 2: Advanced Form Tracking - Conversion Conference

Simo Ahava

@SimoAhava

google.me/+SimoAhava

>> www.simoahava.com <<

Page 3: Advanced Form Tracking - Conversion Conference

NB

What’s the point?

3

Page 4: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

4

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

Page 5: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

5

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

Page 6: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

6

…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

Page 7: Advanced Form Tracking - Conversion Conference

NB

For many websites, a web form is central to

identifying and optimizing engagement goals!

Why track forms?

7 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 8: Advanced Form Tracking - Conversion Conference

NB

Because agility is incredibly important to web analytics

Why track forms with Google Tag Manager?

8 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 9: Advanced Form Tracking - Conversion Conference

NB

Because a complex development process is detrimental to

analytics and to capturing the subtleties of engagement

Why track forms with Google Tag Manager?

9

X29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 10: Advanced Form Tracking - Conversion Conference

NB

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?

10 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 11: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

11 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 12: Advanced Form Tracking - Conversion Conference

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

Page 13: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

13

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 14: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

14

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 15: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

15

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 16: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

16

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 17: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

17

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 18: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

18

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

JS

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 19: Advanced Form Tracking - Conversion Conference

NB

What is the biggest challenge here?

19

HTML

HEAD

BODY

ARTICLE

DIV

DIV

FORM

Event delegationsubmit()

GTM

JS

X

X

X

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 20: Advanced Form Tracking - Conversion Conference

NB

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

20 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 21: Advanced Form Tracking - Conversion Conference

NB

Tracking forms with Google TagManager

21

Page 22: Advanced Form Tracking - Conversion Conference

NB

Step 1: Initiate a Form Submit Listener

22 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 23: Advanced Form Tracking - Conversion Conference

NB

Step 1: Initiate a Form Submit Listener

23 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 24: Advanced Form Tracking - Conversion Conference

NB

Step 1: Initiate a Form Submit Listener

24 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 25: Advanced Form Tracking - Conversion Conference

NB

Step 1: Initiate a Form Submit Listener

25 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 26: Advanced Form Tracking - Conversion Conference

NB

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

26 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 27: Advanced Form Tracking - Conversion Conference

NB

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

27 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 28: Advanced Form Tracking - Conversion Conference

NB

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

28 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 29: Advanced Form Tracking - Conversion Conference

NB

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

29 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 30: Advanced Form Tracking - Conversion Conference

NB

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

30 29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 31: Advanced Form Tracking - Conversion Conference

NB

Step 3: Use macros to parse form fields

31

{{field value}}

Macro Type: Custom JavaScript

Code:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

PII ALERT!

Page 32: Advanced Form Tracking - Conversion Conference

NB

Step 3: Use macros to parse form fields

32

{{selected option}}

Macro Type: Custom JavaScript

Code:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 33: Advanced Form Tracking - Conversion Conference

NB

Step 3: Use macros to parse form fields

33

{{checked button}}

Macro Type: Custom JavaScript

Code:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 34: Advanced Form Tracking - Conversion Conference

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

Page 35: Advanced Form Tracking - Conversion Conference

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

Page 36: Advanced Form Tracking - Conversion Conference

NB

Step 4: Create your own listeners

36

{{generic event handler}}

Macro Type: Custom JavaScript

Code:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 37: Advanced Form Tracking - Conversion Conference

NB

Step 4: Create your own listeners

37

Custom HTML Tag

Code:

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 38: Advanced Form Tracking - Conversion Conference

NB

Summary and further reading

38

Page 39: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

39

To create a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 40: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

40

To create a story

To complete a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 41: Advanced Form Tracking - Conversion Conference

NB

Why track forms?

41

To create a story

To complete a story

To recognize a story

29 Oct 2014 | Conversion Conference, London | @SimoAhava

Page 42: Advanced Form Tracking - Conversion Conference

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

Page 43: Advanced Form Tracking - Conversion Conference

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