When setting up a new website, youâll want to collect and analyse your user data about who is visiting your website and where traffic is coming from. Once you have this kind of information you can expand your marketing plan to attract users from other sources, and you can create paid ad campaigns to encourage more visitors belonging to your target demographic to your site. But how do you begin the process of tracking data on your website?
This is where goal-tracking (using Google Tag Manager) comes in, and there is one particular method that is easy and simple to set-up, which will allow you to retrieve such data about how page visitors behave.
Setting up goal-tracking using CSS selectors
Using CSS selectors has the advantage of allowing you to visually select the element you want to begin the process of sending user data to Google Analytics. And, thereâs one easy method that can be quickly set-up to track forms within Google Tag Manager, which is:
Using Google Tag Managerâs âElement Visibilityâ trigger type to select a success message element via its class or ID attribute using CSS attribute selectors (donât worry; weâll explain all of this shortly!).
The âElement Visibilityâ trigger type is great because itâll enable you to retrieve simple data like the total number of form submissions (to name just one data type), without having to set complicated triggers and variables up to do so.Â
Whatâs even better is that this method is suitable for not only WordPress plugins like WP Broadbean, Gravity Forms, WP Forms, and Formidable Forms, but also any other form from any other website-builder like Wix, SquareSpace, and Webflow, as long as it meets the following criteria:Â
- There is a HTML element (a span, a div, or any other inline- or block-level element) that displays after the form submit button is clicked.
If your form has this, you can now begin the easy steps to achieving simple goal-tracking!
How to set up your triggerÂ
Your first step will be to create a trigger (a condition which causes Google Tag Manager to track any given event and subsequently record data) thatâll help you select which HTML element youâd like to target as our form success signifier. In this case, itâs a paragraph (â<p>â) element with the text âSuccess! Your form has been submittedâ which contains the unique class of âform-success-messageâ.Â
Itâs important to set the trigger up first because weâll be calling it when we set our tag up (a tag is a vessel in which we place all of our variables and triggers into, to receive a specified piece of data like form submissions and transport it to Google Analytics). This trigger is what will tell your tag (which youâll set-up in a second) to run once a form is submitted. To begin, follow the instructions below:
- Head over to the âTriggersâ tab on the left-hand side of Google Tag Manager and click âNewâ.
- The first option youâll see is âTrigger Typeâ, which youâll want to open up and click âElement Visibilityâ, which can be found under the âUser Engagementâ section.
- Change our next âSelection Methodâ field to either âIDâ or âCSS Selectorâ.
Select âIDâ if the element contains a unique ID, but if not, a unique class attribute will also do the trick, in which case: select âCSS Selectorâ.
To find out whether your success message has a unique class or ID (or both), right-click on the form submission page (make sure you do this after submitting a form) and select âInspectâ.
Then, click this icon in the top left corner of dev tools and click on the success message. Dev tools will highlight where the element containing the success message is within the source code, from which you need to look for either an ID or class element that is unique to it.
In our example, the WordPress Broadbean outputs a class of âwpbb-message wpbb-message-successâ for the success message, which weâll pop into our trigger field of âElement Selectorâ.
Classes are specified with a dot in-front, but in our class, youâll see that there are actually two classes separated by a space: âwpbb-messageâ and âwpbb-message-successâ. To be safe, weâre going to unite them into one global class that prints as the following: â.wpbb-message.wpbb-message-successâ.
- The remaining options are straight-forward to configure: simply copy the screenshot.
The main setting here is âObserve DOM changesâ, which will catch our success message when it appears since the DOM contains all visual elements of a webpage like buttons, paragraphs, and layouts.
It doesnât even matter if the page redirects to another, or stays on the same URL, as long as you select âObserve DOM changesâ, Google Tag Manager will be able to track any new additions to the DOM. One con about using âObserve DOM changesâ is that itâll result in a greater network load since Tag Manager will have to track real-time changes to the DOM (in our situation, itâs the dynamically-generated appearance of the success message after the page has initially loaded), but as long as our CSS selector is unique, then it will only need to record changes when that specific success message shows.
Weâre now ready to set our tag up so we can push our data to Google Analytics! Weâll need to do this so we can easily access the form submission data in one place, along with all of your stats about traffic and session durations (Google Tag Manager wonât display this data in a user-friendly way).
Pushing data to Google Analytics
This is the easy bit. All we need to do is click on âTagsâ in the left-hand panel and click âNewâ on the right to get started. Upon doing so, this is the screen you will see:
Instructions
- First, letâs set the âTag Typeâ to âGoogle Analytics: Universal Analyticsâ (it should be the first option you see come up in the âFeaturedâ section of the âChoose tag typeâ panel.
- Our âTrack typeâ needs to be âEventâ because weâre tracking a change in the DOM once an element (submit button) is clicked.
- For âCategoryâ, we just need to put something along the lines of âform submissionâ (though, you can name it whatever you want â so long as itâs easy to identify in Google Analytics).
- The âActionâ field should tell us what event has occurred, so for us, itâs that the form has been submitted.
- The âLabelâ field is how weâll identify which form it is that weâre looking at (be as specific as possible as itâll save you a headache later if you need to track multiple forms across your website).
- For what we want to achieve, the âValueâ and âNon-Interaction Hitâ are not needed, so set these to be blank and âfalseâ respectively.Â
- Finally, in âGoogle Analytics settingsâ we need to type in our Google Analytics tracking code. First, though, youâll need to create a new variable if you havenât set this up already; click the dropdown and youâll see an option called âCreate New Variableâ. Once done, youâll see this screen:
Type in your tracking code as shown above. You can find your code in Google Analytics by going to âAdminâ > âAccountâ > âPropertyâ > âTracking Infoâ > âTracking Codeâ; your tracking ID will be visible at the top of the âTracking Codeâ page.
Does it work?
We need to make sure that the trigger weâve set up is actually working; to do so, click âPreviewâ.Â
Youâll then be prompted to enter the URL of the page your form is in; once youâve entered it, youâll be taken to said URL and you should see a little Tag Manager widget in the bottom right-hand corner:
If you see this, then the Google Tag Manager debugger is successfully running, and now you simply need to fill your form out and click the submit button.
Once youâve completed this step, go to your âTag Assistantâ browser tab (it will have opened in a new tab automatically), and in the âSummaryâ section, you should see your that your tag has fired at least once:
Your form is now set-up for goal tracking and you can now easily view how many people are submitting your forms. In this article, we only covered job submissions, but this âElement Visibilityâ method can be applied to ANY form that has a dynamically-generated element displaying AFTER a form is submitted. This method is especially beneficial for website owners that may not have much time to set-up something more advanced, and just want to track a simple metric thatâll inform them of the effectiveness of each webpage with a form (for example, by measuring how many people visit a page and then fill the form out).Â
If you need any further help or advice, drop us an email at hello@quibblecontent.co.uk.
Source: AgroMarketing.digital