Google Tag Manager AJAX Form Tracking

Updated: June 6th, 2020. In this post, I’ll show you how to implement Google Tag Manager AJAX Form Tracking. This article is a part of a much larger and comprehensive guide – Google Tag Manager Form Tracking.

You are probably already familiar with the main GTM concept: every interaction you want to track needs a tag and a trigger. If on the other hand, you’re very new to Google Tag Manager, first read this tutorial for a beginner.

If you want to track all form submissions with Google Analytics, you’ll need to create a Google Analytics Tag and a Trigger (rule) when a tag must fire.

Creating a tag is the easy part of this process. Let’s make one – you’ll need it in the next chapter of this blog post):

When you submit your form, it probably just refreshes itself and then displays “You have successfully filled in the form” message without the actual page refresh or changed URL, right? If yes, then (most likely) this blog post is exactly what you need.

There’s a big chance that form you’re dealing with is using AJAX technology. I suggest skipping all the technical mumbo-jumbo here (since I am not a developer + I don’t think I am capable of clearly explaining how it works). The only thing here you should know is AJAX listener.

Bounteous have shared an awesome AJAX listener for GTM everyone can use for free. If you want to read more about how it works, you can do that on Bounteous blog. Here we’ll borrow their code to track form submissions. Copy the code below and paste it in the Custom HTML tag on GTM:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<script id="gtm-jq-ajax-listen"type="text/javascript">

(function(){

'use strict';

var$;

varn=0;

init();

functioninit(n){

// Ensure jQuery is available before anything

if(typeofjQuery!=='undefined'){

// Define our $ shortcut locally

$=jQuery;

bindToAjax();

// Check for up to 10 seconds

}elseif(n<20){

n++;

setTimeout(init,500);

}

}

functionbindToAjax(){

$(document).bind('ajaxComplete',function(evt,jqXhr,opts){

// Create a fake a element for magically simple URL parsing

varfullUrl=document.createElement('a');

fullUrl.href=opts.url;

// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways

If no, try using other Google Tag Manager Form Tracking methods mentioned in this blog post.

Let’s see what can we do with that AJAX form. Click ajaxComplete event in Preview and Debug mode, then click Data Layer:

Looks difficult for a non-developer, right? But it’s easier than you think. This is the data that was passed to the data layer after successful submission of the form, each line is a separate dataLayer data point that can be used as a Data Layer variable in GTM. Keep looking for something which helps identify successful form submission. Scroll down and look for “response”.

Let’s take a closer look at it. Can you see a message “This message has been successfully sent”? Bingo! We can use it as a trigger. Note: in your case, the response will probably be different.

Enter Data Layer Variable Name – attributes.response. Leave all other settings as they are.

My recommendation for the Title of this GTM variable is dlv – attributes.response (“dlv” stands for Data Layer Variable).

You’re probably guessing why I entered attributes.response as Data Layer Variable Name, instead of just response. Let’s take a closer look at Data Layer in Preview and Debug mode. On line 2, you see event name ajaxComplete – that’s the same name which appears in Preview and Debug console’s left side. Then we see attributes, which is an object containing various data points (key-value pairs). And the response is one of those keys.

So when we want to tell Google Tag Manager that we are interested in response’s value, we need to tell the exact path to that data. In our case, it’s attributes → response. Each level of the path must be separated with dot → attributes.response . Another example: let’s say you’re interested in Server data (from that very exact AJAX response). In that case, the Data Layer Variable’s Name should be attributes.headers.Server .

After we created attributes.response Data Layer variable in Google Tag Manager, let’s debug. Refresh Preview and Debug mode and refresh the page where the AJAX form is.

I filled in the form and submitted it. Then I clicked the most recent ajaxComplete event in Preview and Debug console, navigated to the Variables tab, and found the new variable dlv – attributes.response. Here’s how it looked to me:

That’s a message of a successfully submitted form. If in your case, the value of that variable is undefined, then you should start looking for mistakes. The most common ones are typos in a variable name or inaccurately defined variable’s path. Some guys just try using response instead of attributes.response.

Now let’s create a trigger that fires when the event is ajaxComplete AND our new dataLayer variable contains text The message has been successfully sent.

Define a condition when the trigger will fire – dlv – attributes.responsecontainsThe message has been successfully sent.

Important: there is no single answer

Not all AJAX forms return the same response after the form is submitted. In some cases, attributes.response is enough to get the value of a response. However, in other cases, the response object might contain even more keys, for example:

JavaScript

1

2

3

4

5

attributes:{

response:{

message:"form submitted"

}

}

In this case, we have attributes object. Inside of it, there is a response object. And within that, there is a message object. If you wanted to access the message key, you would need to enter attributes.response.message in your Data Layer Variable.

Let’s Test

Assign this new trigger to Google Analytics Tag that you created at the beginning of this blog post.

Open (or refresh) a Preview and Debug mode, refresh a web page with a form you want to track.

Then fill in the AJAX form and submit. After successful submission, Google Analytics Tag should fire (it will be displayed in Preview and Debug mode. You can also check Google Analytics Real-time event reports). If you see your tag firing but the event is not visible in the GA realtime reports, read this guide.

Things to keep in mind when tracking AJAX forms:

The response of your form might look different so try adjusting my tutorial to your situation.