'else'. Did You Forget To Register Or Load This Tag?

Updated: January 3rd, 2022

This article shows examples for Google Analytics 4. If yous are looking for Universal Analytics (GA3) examples, become to this blog post

***

While talking with marketers, I noticed that one of the about popular topics amid them is class tracking. Unfortunately, in some cases form tracking might become a real pain in the barrel (especially if a marketer has no clue what CSS or HTML is). Just do not fear because, in this blog mail service, I'll show you vii Google Tag Manager class tracking techniques.

Spoiler:some of them volition require the developer's input, only I'll try my all-time to put everything in evidently English language.

Table of contents

+ Testify table of contents +

• If this blog post looks complex to you
• Bones Context
• Tag + Trigger
• Earlier Nosotros Continue: Ready-made Guides
• Which Form Tracking Method Should You Choose?
• Method #i. Google Tag Manager Form Submission Trigger
• Method #two. "Thank you" Page Tracking with Google Tag Director
• Method #three. Track AJAX Class Submissions with Google Tag Managing director
• Method #4. Track Form Submissions with Chemical element Visibility Trigger
• Method #5. Write Your Own Form Auto-Result Listener
• Method #half-dozen. Form Tracking with dataLayer Events
• Method #vii. Track Grade Submissions with DOM Scraping
• Concluding words

If this blog post looks complex to yous

This article is a long one and some parts might be confusing, specially if you lot are just starting with Google Tag Managing director. If you desire a fast solution, I accept a module in my GTM form for beginners that is defended solely to class tracking. You lot can learn more about the class here.

Google Tag Manager Class Tracking: Basic Context

In this wonderful thing called THE INTERNET, there are various types of forms. Some of them refresh after a successful submission, some of them don't, some of them might redirect you to a "cheers" page, etc. The principal problem with grade tracking is that in that location are no global standards of how forms must be developed. Some developers may prefer one applied science (e.g. AJAX) over another – and they have a full right to do so.

Since yous are interested in form tracking, you have probably noticed Grade Submission trigger and built-in Form variables in Google Tag Manager. Have at least i Form Submission trigger active on a page (which listens to all course submissions) and you lot'll turn on Google Tag Managing director Form auto-event listener.

Form auto-result listener listens for a standard submit browser event. However, a vast bulk of forms use other ways to send their data (east.g. jQuery's $.ajax) thus the submit event is prevented from working. In that case, Google Tag Manager never records a class submission. And that'south a pretty common problem (in fact, I'd say that in 99% of cases where I worked, I used a unlike tracking method).

If GTM'south class listener does not work in your situation, in that location are other alternatives for how you tin achieve the goal. In this web log post, I will explain both standard options and workarounds for Google Tag Managing director form tracking.

Tag + Trigger

You are probably already familiar with the main Google Tag Manager concept: every interaction you lot want to track needs a tag and a trigger. If yous want to track all form submissions with Google Analytics iv, you'll demand to create a Google Analytics Tag and a Trigger (dominion) when a tag must burn.

Creating a tag is the like shooting fish in a barrel role of this process. Let'due south make 1 – you lot'll demand it in the upcoming chapters of this blog post.

In this commodity, I assume that you have already installed Google Analytics 4 and already have the GA4 configuration tag. If not, read this blog mail service starting time.

Later you have a GA4 config tag in your GTM container, information technology's fourth dimension to create a GA4 event tag that volition be used in all of the examples of this article.

1. Go to Tags
2. PressNewbutton
3. InTag Configurationchoose Google Analytics: GA4 Outcome
4. In theConfiguration Tag field, select your current GA4 configuration tag. The event tag that we are creating will reuse some of the settings from the configuration tag (eastward.g. Measurement ID)
5. In the Upshot Name field, I entergenerate_lead
6. Get out the Triggering part empty (for now) and click Save. We'll get back to it subsequently. 80% of this blog post is dedicated to various types of triggers you lot tin make use of. The choice of trigger blazon depends on the style a grade was developed.

Let me apace explicate some of the choices. The reason why I usedgenerate_lead as an event proper name is that information technology is in the list of GA4 Recommended events. Just if you want, yous can proper noun it something else.

Also, in the upcoming chapters of this weblog post, I might propose calculation some boosted parameters to this tag, and then keep an center on that.

======

Every form tracking method that I am going to cover depends on unlike elements/events that occur on a website later the form submission:

• Form motorcar-event listener
• Cheers page
• AJAX class tracking
• Tracking with Element Visibility trigger
• Writing your ain course auto-event listener
• Developer'south help (to ask for the dataLayer.button)
• DOM scraping

An incorrectly configured trigger will effect in false data and reports (this will pb to wrong insights and actions). Then read everything advisedly.

If you have any questions or if some parts of this blog postal service are misleading, let me know in the annotate department beneath, Twitter or LinkedIn. I will be glad to help.

Before We Continue: Ready-made Guides

Now, before we dive deep into this guide, there's something yous should know. This unabridged guide is universal and covers probably around 95% of class-tracking cases that I take/had to bargain with.

Notwithstanding, to save y'all some time, I'd similar to ask this:are you using Contact Form vii, Caldera Forms, or Gravity Forms plugins?

If yes, then I accept some good news for you. Hither are three guides tailored to those popular form plugins (some of them are using Universal Analytics (GA3) and then you might demand to adapt):

• How to track Contact Form 7 with Google Tag Manager
• How to rails Caldera Forms with Google Tag Manager
• How to runway Gravity Forms with Google Tag Managing director

If your form is custom or built using another technology, don't worry. I have covered all the tips in the next chapters.

Which Form Tracking Method Should You Choose?

Before diving into the pool of triggers and tracking techniques, we'll need to inspect a class and decide which technique fits our needs the all-time. I have prepared a flow scheme that should help you lot choose the correct Google Tag Director grade tracking method.

Open full scheme on a new window

I am sure that some parts of that scheme might look vague. Go on reading and everything volition become much clearer.

Method #i. Google Tag Manager Form Submission Trigger

First, let's endeavor GTM'due south born course listener. Open up a listing of Variables in your Google Tag Manager account. Past default, form variables are disabled, therefore, yous need to enable them. Under born variables, clickConfigure, and in the right sidebar enable all Form variables (all changes are automatically saved).

Then open a list of all your triggers (by clickingTriggers in the left sidebar of the GTM interface). Create a new trigger with the post-obit settings:

A lilliputian near theCheck validationcheckbox. Once this is checked, Google Tag Director will not activate the Trigger if the default action of the form (submit and redirect) is prevented.

If left unchecked, the Trigger will get off whenever a submit event is registered (even when a course is submitted with errors (eastward.yard. several required fields are left blank)).

When that checkbox is enabled, an additional field "Enable this trigger when…" appears. In my example, I desire this trigger to be active on all pages, that's why I enteredPage Path contains /. Why? Because Folio Path will always contain at least one slash on whatsoever page.

Now, let's use GTM's Preview and Debug mode to find out whether the default form car-outcome listener works for usa. At the superlative-correct corner of your Google Tag Manager account, click Preview.

Then a new browser tab volition open asking you lot to enter the URL of the page where the form is located. Enter it and click Outset.

And so a new tab (or window) volition open up with your website. At the bottom of the screen, you should encounter a badge similar to this one (that says connected):

If the preview way'south tab or the badge has not connected, read this guide on how to set Google Tag Manager Preview and Debug way.

After Preview and Debug fashion is enabled, navigate to the site where the form is located. Fill in the grade (try not to leave whatever fields blank):

1. Hit the submit button. Did a Form Submit event appear in the Preview and Debug panel?If not, then GTM's Form auto-event listener will not work with this formand you should skip to the adjacent form tracking option described in this weblog post.
   
2. If theCourse Submitoutcome did appear in Preview and Debug panel, then y'all should do some other test – endeavor leaving at least 1 required course field empty and submit the form again. This way you'll imitate an fault in your course:
   1. If Form Submitevent fired once over again, and then you should bank check other form tracking options mentioned in this weblog mail service.
   2. If Form Submitevent did non fire – that's dandy! Information technology means that GTM volition rails simply those form submissions which were successfully completed (and this is exactly what you demand).

If you lot are reading this paragraph, I'll presume that the Form Submission trigger works as expected and fires the effect in the preview way But when a course is submitted successfully.

Permit'due south create a trigger specifically forthat course.Remember theClass Submitevent that was previously mentioned? Click on information technology (in Preview and Debug fashion), then click Variables.

And so coil downwardly and start looking for anyFormvariable that is unique for that form. Usually, it will beForm ID variable, on other occasions – Form Classes (but Form ID is a better choice). Equally you lot can encounter in the prototype below, I have submitted a form (of which Form ID variable is wpdevart-forms-7).

This is a good identifier that is not used on any other elements in the website, so I'll use it for my trigger:

1. Go to Triggers and open that Form Submission trigger that you lot take previously created
2. Instead of "All Forms", select "Some Forms" and enter the condition to target just that particular grade. In my case, that isClass ID equals wpdevarp-forms-vii.
   1. If you don't see Class ID variable – Enable it in the list of Congenital-in variables of Google Tag Manager.
   2. Form ID may (and probably will) exist different in your situation (compared to my case).
      

Save the trigger.

If you have more than than one form that visitors/users can submit, then it might make sense to include an additional parameter in your GA4 event tag (that volition help yous distinguish which form was submitted).

In GTM, go toTags and edit that GA4 event tag that you lot accept created.

In that location is no strict requirement of how that parameter should exist named, so I'll name itform_id.And its value will be the value of the {{Form ID}} variable.

Relieve the tag.

Let's Test + Annals Custom Dimension in GA4

1. Assign this new trigger to the Google Analytics 4 Event Tag that you created at the beginning of this blog post.
2. Refresh a Preview and Debug style (by clicking the Preview button in the GTM interface once once more)
3. Then fill in the form and submit it. If Google Analytics Tag fired, that's good news! Also (if possible), try submitting a different form on your website: in case of a successful submission, a GA tag should not burn.
4. You should too bank check the incoming events in Google Analytics iv Debug View.
5. If you plan to use the form_id(or some other custom parameter in GA4 reports), you take to annals them as custom dimensions. Read this guide to learn more than.

Method #2. "Thank you" Folio Tracking with Google Tag Manager

If the standard course listener in Google Tag Managing director does not work, you should check whether that form redirects a user after a successful submission to some other page.

• If yes, what URL (web address) does information technology redirect to?
  
  • Is that accost unique?
  • If yes, tin can users just navigate to that page without actually submitting a form? If the reply to the last question is no,then you can create a pageview trigger that fires only on that success folio. Your goal here is to avoid accidental visits to success (a.k.a. "Cheers" page) as much as possible.

Now let's create a trigger that fires only on the "Thank Y'all" page.

1. Go to Triggers in Google Tag Manager
2. PressNew button
3. Choose trigger blazon – Pageview and Some page views
4. If the visitor is redirected to https://www.instance.com/form/thankyou.html, so yous can set one of the following rules for this trigger:
   1. Page Path equals /form/thankyou.html.
   2. or Page URL contains /form/thankyou.html. Endeavor beingness as specific as possible. Setting just "thankyou" as the rule for this trigger might not be the best idea because there might exist other pages, of which URLs can contain that word (and we don't want that!).
5. And do not forget to properly name the trigger, e.thousand. "Pageview – Successful Form Submission". A title must be clear, otherwise, you'll have a mess in your Google Tag Manager account (in the long run). You can read more than virtually naming tips (a.chiliad.a. Naming Conventions) here

Let's Test + Dimensions in GA4

1. Assign this new trigger to the Google Analytics 4 Tag that you created at the beginning of this blog post.
2. Open (or refresh) a Preview and Debug mode, refresh a web folio with a form you want to track.
3. Then fill in the form and submit information technology. After successful submission, yous'll be redirected to a "Thanks" page – if Google Analytics Tag fired, good task! Also (if possible), try submitting a unlike course on your website (to see if the tag did non burn on blow).
4. You should too check Google Analytics 4 Debug View.
5. If you have multiple forms and all of them have different give thanks you lot pages, y'all don't need to set any custom parameters to the GA4 effect tag. GA4 already automatically trackspage_location and you can distinguish form submissions with a dimension such asFolio Path.
6. If on the other hand, you have multiple forms and one "Thank you" page, you will need to practise this:
   1. Bank check all of these tips and see if you lot can get a variable that contains some grade identifier (due east.one thousand. form id, form name, etc.) and use it in the adjacent listing item.
   2. And then include an boosted parameter in the GA4 generate_lead result tag. Information technology tin can be something likeform_id, form_name, or whatever works for you, for example:
      

Method #3. Rails AJAX Form Submissions with Google Tag Manager

If you are reading this part, your class is probably not sending valid form submit events and is not redirecting users to a "thank you" page. It probably just refreshes itself and so displays "You take successfully filled in the form" message without the actual page refresh.

There'south a large chance that this grade is using AJAX. I propose skipping all the technical details here. The only thing here you should know isAJAX listener.

Bounteous have shared an awesome AJAX listener for GTM everyone can utilise for costless. Here we'll borrow their code to rail grade submissions. Re-create the code below and paste it in the Custom HTML tag on Google Tag Director:

<script id="gtm-jq-ajax-mind" type="text/javascript">  (function() {   'employ strict';  var $;  var n = 0;  init();   function init(north) {   // Ensure jQuery is available before anything  if (typeof jQuery !== 'undefined') {    // Define our $ shortcut locally  $ = jQuery;  bindToAjax();   // Check for up to 10 seconds  } else if (n < 20) {    n++;  setTimeout(init, 500);   }   }   function bindToAjax() {   $(document).demark('ajaxComplete', function(evt, jqXhr, opts) {   // Create a false a chemical element for magically uncomplicated URL parsing  var fullUrl = document.createElement('a');  fullUrl.href = opts.url;   // IE9+ strips the leading slash from a.pathname because who wants to get dwelling on time Fri anyways  var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;  // Manually remove the leading question mark, if there is i  var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;  // Turn our params and headers into objects for easier reference  var queryParameters = objMap(queryString, '&', '=', true);  var headers = objMap(jqXhr.getAllResponseHeaders(), '\northward', ':');   // Blindly push to the dataLayer because this fires within GTM  dataLayer.push({  'event': 'ajaxComplete',  'attributes': {  // Return empty strings to preclude adventitious inheritance of old data  'type': opts.type || '',  'url': fullUrl.href || '',  'queryParameters': queryParameters,  'pathname': pathname || '',  'hostname': fullUrl.hostname || '',  'protocol': fullUrl.protocol || '',  'fragment': fullUrl.hash || '',  'statusCode': jqXhr.condition || '',  'statusText': jqXhr.statusText || '',  'headers': headers,  'timestamp': evt.timeStamp || '',  'contentType': opts.contentType || '',  // Defer to jQuery's handling of the response  'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')  }  });   });   }   function objMap(information, delim, spl, decode) {   var obj = {};   // If i of our parameters is missing, return an empty object  if (!data || !delim || !spl) {   render {};   }   var arr = information.carve up(delim);  var i;   if (arr) {   for (i = 0; i < arr.length; i++) {   // If the decode flag is nowadays, URL decode the set  var item = decode ? decodeURIComponent(arr[i]) : arr[i];  var pair = detail.split up(spl);   var fundamental = trim_(pair[0]);  var value = trim_(pair[1]);   if (key && value) {   obj[key] = value;   }   }   }   return obj;   }   // Basic .trim() polyfill  function trim_(str) {   if (str) {   return str.supersede(/^[\southward\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');   }   }    })();  /*  * v0.1.0  * Created by the Google Analytics consultants at http://world wide web.lunametrics.com  * Written by @notdanwilkerson  * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-upshot-listener-google-tag-manager/  * Licensed under the Creative Commons 4.0 Attribution Public License  */ </script>

Fix that Custom HTML tag to fire on all pages.

At present, let's check whether a form is built on AJAX:

1. Enable (or refresh) Preview and Debug mode.
2. Try submitting the form on your website (with no errors).
3. Did the ajaxComplete event appear in the Preview and debug console?
   1. If yeah, the course is using AJAX.
   2. If no, skip to the next affiliate of this blog postal service.

If your answer to the previous questions was Yes, permit's take a look at what can we practise with that AJAX form. Click ajaxComplete event in Preview and Debug manner, then expand the API call:

Looks difficult for a non-developer, right? But information technology's easier than you think.

This is data was passed to the information layer after successful submission of the form. Each line is a split up dataLayer data point that can be used as a dataLayer variable in GTM.

Now yous should expect for something that helps identify successful class submission. Curlicue down and look for "response".

Permit's accept a closer look at information technology. Can y'all see a message "Thanks for contacting u.s.! We will exist in touch with you before long"? Bingo! We can use it as a trigger.

Start, let's create a Information Layer variable in Google Tag Manager.

1. Get to Variables
2. Gyre down toUser-Divers variable and hitNew
3. ClickVariable configuration and choose variable type –Data Layer Variable
4. Enter Data Layer Variable Name – attributes.response.data.message

Yous're probably guessing why I enteredattributes.response.data.message as Information Layer Variable Name, instead of but response. Let'due south accept a closer wait at Data Layer in Preview and Debug style.

In line ii you lot see the upshot namedajaxComplete – that's the same name that appears in Preview and Debug console's left side. So we seeattributes which is an object containing diverse data points (primal-value pairs). And the response is one of those keys.

Within thatresponse (ii), we run intoinformation (3) and within that, we seemessage (iv).

Think of this as accessing folders. First, yous have to access the attributes, then you get to response, then you go do thedata folder and and then you accessmessage.

Of import: in your case, the construction of the data can exist unlike and parameters tin can be named differently. Information technology will e'er outset withattributes.response but subsequently that, things might differ in every grade. Information technology might existattributes.response.message or something similar that. Y'all will need to adapt.

Another example: let's say you're interested in Server data (from that very exact AJAX response). In that case, the Data Layer Variable'southward Name should be attributes.headers.Server.

Afterward nosotros created the Data Layer variable in Google Tag Manager, let's debug. Refresh Preview and Debug mode (by clicking the Preview button in the GTM interface).

Fill up in the form and submit. Click the most recent ajaxComplete event in Preview and Debug console, and so navigate to the Variables tab and find the new variabledlv – attributes.response.data.message. If you lot did everything correctly, it should look like this:

That's a message of the successfully submitted grade. If the value of that variable isundefined,then you should start looking for mistakes. The nearly common ones are typos in the variable name or inaccurately defined variable's path. Some people only endeavor usingresponse instead of attributes.response.information.message.

Now let's create a trigger that fires when the result isajaxComplete AND our new Data Layer variable contains "Thanks for contacting us".

1. Go to Triggers and clickNew
2. Choose Trigger Type – Custom Event
3. Enter Event name – ajaxComplete
4. This trigger should fire onSome Custom Events.
5. Ascertain a condition when the trigger will fire –dlv – attributes.response.data.message contains Thanks for contacting usa!

Permit'due south Test

1. Assign this new trigger to the Google Analytics 4 Issue Tag that you created at the kickoff of this web log post.
2. Open (or refresh) a Preview and Debug mode
3. And then fill in the AJAX form and submit it. After successful submission, Google Analytics 4 Effect Tag should burn (it will exist displayed in Preview and Debug mode. Y'all should likewise check Google Analytics four Debug View.

Things to proceed in listen when tracking AJAX forms:

1. The response of your form might look unlike so yous should arrange your Data Layer Variable and Custom Issue trigger.
2. If developers change the response's information, your trigger will fail. Inform developers about your GTM implementation.
3. If the page contains more than than one AJAX grade, try looking for more information in Information Layer which can help Google Tag Manager tell the difference between those forms.

Method #4. Rails Form Submissions with Element Visibility Trigger

One of the virtually awesome triggers in GTM (in my stance) is the Chemical element Visibility trigger. It enables you to track when a particular element appears on the screen (due to scrolling or some other circumstances).

The same technique can be practical to forms when a particular bulletin (due east.g. "Thanks")  appears afterward a course is successfully submitted.

I have a flake older tutorial virtually this technique that uses Universal Analytics simply if you have no problem with this, you can take a look at that video beneath.

The first affair we need to practice here is to inspect the success message of a form. We'll need to detect a style how to instruct Google Tag Manager in which particular website chemical element are we interested in.

Subsequently you submit the form successfully, right-click on the success message and chooseInspect Chemical element.

You will then see the browser's developer tools that contain diverse information about the bulletin: its content, CSS class, etc.

In the case below I run across that the message has a class "thanks" which could be used every bit a condition in the Element Visibility trigger. It was even better if the success message had a parameter called "id" but since it'south not available, nosotros'll utilize CSS grade.

Let'due south go to your Google Tag Manager container and go to Triggers. Create a new trigger and chooseChemical element Visibility every bit its type. The key ingredient here is the Selection Method that will help GTM empathise what nosotros are looking for.

The selection method has 2 options: Element ID and CSS Selector. Since the success bulletin in my case has no id (but "course"), we'll go with CSS Selector.

In the Chemical element Selector field, we demand to paste that grade "thanks". In CSS, every class is defined with a dot in front of it, so allow'southward practise the same.

Finally, make certain you tick "Discover DOM changes". This setting means that if an element appears on the screennot due to scrolling just nether another circumstances (e.k. "just only pops in"), GTM volition catch it (most likely).

Accept a look at the screenshot beneath. If you want, you may practice some other tweaks just what I did was a blank minimum.

Save the trigger.

If you accept no thought what are you lot doing hither with a CSS selector, I explain them in plain English here + I share some tips on how to learn the topic faster.

Let'south Test

1. Assign this new trigger to Google Analytics Tag that y'all created at the get-go of this weblog post.
2. Open up (or refresh) a Preview and Debug mode
3. Then fill in the course and submit information technology. After successful submission, in P&D console yous volition run across Element Visibility upshot. Click it and y'all will run across that GA4 tag has fired. If yous don't see the Element Visibility event, you lot probably made some mistake in the Option method or CSS selector field. Or forgot to enableObserve DOM changescheckbox. Or that form is in the iFrame (in that case, my Intermediate/Advanced GTM class will help you solve the problem).

Method #5. Write Your Own Grade Auto-Event Listener

Yes, I know that this sounds complicated. Actually, this can't exist further from the truth.

If no other tracking method (explained in this blog post) works, then you accept nothing to lose. Where am I going with this?

There is a slight gamble that you can write an auto-issue listener on your own (without solid coding skills). And I have explained that in this blog mail.

Then before yous swoop into that commodity, first reply this question: Are yous trying to rails some custom-made form that was built by a developer specifically for your website? If yes, skip to Chapter #vi of this blog post. Otherwise, try this method. It is not direct related to forms merely the thought can work and can be applied.

For example, the Gravity form tracking guide is basically the result of this method.

Method #6. Form Tracking with dataLayer Events

Disclaimer:Although this course tracking method is a very robust solution, I placed it every bit a No.half-dozen pick in this listing for a reason.

When other marketers approach me for course tracking advice, they're looking for a solution where the developer's input can be avoided. "Manage your marketing tags without help from developers" is 1 of the main reasons why they start considering Google Tag Managing director in the first place.

This statement was among GTM's key "selling" points when information technology was launched, so it'southward no surprise marketers are expecting this to be 100% true. Although we know that in a lot of situations, the developer'due south help is strongly advised. My position here:

1. If you have access to developers and Google Tag Managing director'south Form listener isn't working for you, I recommend using dataLayer.push button method which I volition depict further.
2. If yous don't accept access to developers or they are super decorated (and they usually are), then it's okay to runway with other techniques mentioned in this blog post. Just exist enlightened, that other solutions accept a bigger gamble of breaking when developers make constant updates to a website. This specially applies to technique No. 7 – DOM scraping.

I hope I made my betoken articulate and we tin can continue.

Equally information technology was mentioned in a higher place, if the born Google Tag Managing director Form listener does not work with your class, the next best matter is to ask the programmer to implement a custom dataLayer.push() into the callback function which is activated upon successful class submission. The slice of code could exist something like (evidently, that dummy information similar "Footer" should exist replaced with the actual data of your grade):

window.dataLayer = window.dataLayer || [];   window.dataLayer.push button({    'event': 'formSubmission',    'formType': 'Contact us',    'formPosition': 'Footer' });

You lot'll need to prepare a brusque simply well-written and articulate job for a developer:

1. Showtime, choose a name for the event. In the example in a higher place I choseformSubmission.
2. So think of whatever boosted data you may need. Write those information points down and try categorizing them.
   1. Let'south say that I have several types of forms – "Contact united states of america" and "Newsletter Subscription". And then I decided to take a dataLayer variableformType.
   2. Another useful parameter (in my opinion) is form position, because some forms are in the footer, and others are in the sidebar of a website. Why non brand it another dataLayer variable?
3. If a developer is new to dataLayer events and Google Tag Manager in general, hand them a link to this dataLayer.push guide with articulate examples. Explain to them that you need an event with additional parameters pushed into dataLayer after the successful class submission. If developers still have questions, this blog post should enlighten them.
4. But think to emphasize that the values of parameters similarformType andformPosition should be dynamically replaced by a developer. If Ten class was submitted, the information of that X form must be pushed to the Data Layer. It is your developer'due south task to know and code a solution that inserts the bodily values.

Done! Subsequently the developer implements dataLayer.push in all forms, you should test it:

1. Open Preview and Debug way.
2. Try submitting the class:
   1. Leave at least one required field blank. In this instance, the dataLayer upshot must not be pushed.
   2. Fill in all fields and attempt submitting again. Did the result appear in Preview and debug console? It should look like this:
      
   3. Check whether all information is correctly pushed to the dataLayer. ClickformSubmission upshot and and so the API call in the Preview console. Data should look similar this:
      

Ready variables and triggers in GTM. In my dataLayer.push example, in that location are ii data points I'd like to use as variables –formTypeandformPosition (I volition include them in my GA4 upshot tag), so I demand to include them in Google Tag Director by creating Data Layer variables.

1st variable:
Title: dlv – formType
Variable type:Data Layer Variable
Data Layer Variable Name: formType
Leave all other settings equally they are

2nd variable:
Title: dlv – formPosition
Variable blazon:Data Layer Variable
Data Layer Variable Proper name:formPosition
Exit all other settings as they are

Now, let'southward create a trigger. Go to Triggers and click New. Enter the following settings:

Trigger Type: Custom upshot
Upshot name: formSubmission (information technology may differ depending on your situation. Just brand certain you and your developer are using the same proper name).
This trigger fires on: All custom events. This means that all formSubmission events will exist tracked.

Update the GA4 event tag

Since I have created two Data Layer variables (formTypeandformPosition), I can use them in my GA4 event tag. As I accept said before in this web log mail service, at that place are no strict requirements of how those parameters should be named.

I decided to useform_type andform_position. Their values are those 2 Data Layer Variables I have merely created.

Salvage the tag.

Let's test + GA4 Custom Dimensions

1. Assign this new trigger to Google Analytics Tag that yous created at the beginning of this blog post.
2. Open up (or refresh) a Preview and Debug mode
3. Then fill up in the class and submit information technology. After successful submission, Google Analytics Tag should fire (information technology volition be displayed in Preview and Debug mode).
4. Y'all should also cheque the incoming events in Google Analytics 4 Debug View.
5. Registerform_position andform_type equally Custom Dimensions in GA4 (if yous program to use them in the reports). Read this guide to learn more.

Method #seven. Rails Form Submissions with DOM Scraping

This method should never be your first choice. Try using all other Google Tag Manager Form tracking methods (described in this blog mail) before you continue reading this affiliate.

If developers often update the website's code, you lot should treat DOM scraping as the final resort. It is risky and can break faster than you think.

Fifty-fifty a slight alter committed past the developer might intermission your implementation. Also, it requires some noesis of Javascript and DOM concepts (which is not a very common skill among marketers).

For this example, nosotros'll be using DOM Element Variable.It is a variable in Google Tag Manager which lets y'all scrape content straight from Document Object Model (in other words: with its assist you lot can transfer any text on your website into a Variable and pass it on to your Marketing tools (e.k. Google Analytics)).

Every bit an case, I'll utilise a Shopify demo shop. There is a Signup up to our mailing list course at the lesser of their homepage.

Quick off-topic notation: If yous oasis't, consider subscribing to my monthly email newsletterfor more than useful Google Tag Manager guides

Enter[email protected] in that Shopify form and hittingSubscribe. A page will refresh, the web address will modify to https://somewebsite.com/?customer_posted=true#contact_form, and that piffling form displays a "Thanks" bulletin.

In this case, we could hands runway class submissions with the Pageview trigger of Thank you lot page, but let'south imagine that the page'south address (URL) did not alter. This is not a common situation, simply it's possible. That'south where DOM Chemical element Variable might come in handy. We could create a trigger that could browse a website and look for a success message "Thanks for subscribing".

Start, let'south create a DOM element variable looking for that detail success message. Hover your mouse cursor over the success message's text, correct-click and chooseInspect.

A developer'south console will announced with a lot of HTML code. Note that success bulletin's code is already selected in that console. That bulletin does not have whatever unique ID so nosotros'll need to use CSS Selectors.

At the bottom of the screenshot, yous can come across a line of CSS selectors, e.g.div.note.grade-success. These selectors can assist us identify the exact chemical element of the website.

Let'due south create a DOM Element variable and endeavour to scrape the "Thanks for subscribing" text.

1. Go to Variables
2. Gyre downwardly to user-defined variables and clickNew
3. Choose Variable type –DOM Element Variable
4. Pick method – CSS selector
5. InElement selector field enter div.annotation.form-success
   
   Run across what I did there? I entered the last CSS selector from the screenshot above.
6. In case there were more than than i possible success messages on a website with a like CSS selector, I would have used a longer CSS selector, for example, "#contact_form div div.note.grade-success" (without quotation marks). If you want to learn CSS Selectors and how to apply them in GTM, have a look at this form.
   
7. Exit the Attribute name empty.
8. Variable's championship could beDOM – Form Success Message.
9. StrikingSave.

Permit'due south test

1. Enable Preview and Debug mode
2. Submit the grade.
3. CullDOM Ready (not Container Loaded) event in Preview and Debug console and click Variables.
   
4. If DOM – Form Success Messagevariable's value isCheers for subscribing, you did a good job.

Alright! Now we need to create a trigger that depends on our new DOM variable.

1. Go to Triggers and clickNew
2. Choose Trigger blazon –DOM Ready
3. This trigger fires onSome Pages
4. Enter the following condition: DOM – Form Success Message equals Thank you for subscribing . This means that the trigger will fire only on those pages where the Course success bulletin is displayed to visitors.
5. Save the trigger

Do non forget to examination:

1. Assign this new trigger to the Google Analytics four Event Tag that you created at the kickoff of this weblog mail.
2. Open a Preview and Debug mode (or refresh)
3. Fill in the form and submit. After successful submission, Google Analytics Tag should fire (it will be displayed in Preview and Debug mode).
4. You should likewise cheque the incoming events in Google Analytics 4 Debug View.
5. Also, try submitting a grade with an intentional fault and see whether the tag fires (it shouldn't).

Google Tag Manager Form Tracking: Final words

In this blog postal service, I described a agglomeration of form tracking methods with Google Tag Manager. This has been an intense ride but  I hope you found it useful. You should now exist able to runway many more forms without a developer's input.

Simply call back – it's okay to ask for the programmer's assistance. If possible, choose dataLayer.push method over DOM scraping. Robust solutions should be your priority.

Did I skip something in this post? Is at that place some attribute of form tracking that yous'd desire more information on? Drop me a comment, and let'southward see what nosotros can come up with!

'else'. Did You Forget To Register Or Load This Tag?,

Source: https://www.analyticsmania.com/post/google-tag-manager-form-tracking/

Posted by: maestaswhowere1953.blogspot.com

Share this post