Although this look like a common setup, it’s actually tricky to find the correct information on how to do it. In this tutorial you will learn how to track AJAX forms or search bars with instant search via Google Analytics 4 and Google Tag Manager.
#1 To start with, you will need full access to GA4 and Google Tag Manager and have the two services connected.
#2 Secondly, make sure that your form/search bar is using AJAX. If you have a form on a website that does not reload the page after it was successfully submitted or an instant search bar (search suggestions) it’s probably built with AJAX. By default Google Analytics 4 and Google Tag Manager cannot track such forms or interactive search bars, but with several tweaks that becomes possible.
#3 Go to Google Tag Manager that is installed on your website and then go to Tags > New tag configuration and then select Custom html. Use the code below that is designed to track AJAX requests on a website. Paste the code and then set this tag to fire on All pages.
#4 Next you need to click the Preview button and enter the URL of the page where you have that form/search bar and click Connect. Now, let’s submit the form or start typing inside the instant search bar (I’m mentioning both types of events as you may need to track one or the other).
Let’s go back to the Preview mode of Google Tag Manager. If you see the ‘ajaxSuccess‘ event, it means that your form/search is indeed built on AJAX. It’s possible that your listener will get many events of the same type. If that’s the case, you will need to open them to identify the event action and discover the one event generated by your form/search bar.
!!! In the example below, I was able to discover the event generated by my search bar. And I will explain you how to track AJAX search forms with this type of events. Furthermore, I will only refer to the setup for this particular type of AJAX form.
#5 Into the next step you will learn how to create a little more complex data variable that will help identify the AJAX search events. You will go to GTM dashboard, click on Variables>New>Variable configuration and choose Data layer variable from the list. Under Data layer variable name we should use the name of the variable that we want to be read. In our example, that would eventAction. After you insert this name, you have to define a variable name at the top. We’ll use AjaxSearchEvent. Check the .gif below for instructions.
#6 Now, to be able to record only the search events, we need to set up a trigger and a custom event that will grab only the data related to search and not all the Ajax events detected by the listener.
Go to GTM dashboard and click on Triggers>New>Trigger configuration and select Custom event. To configure this custom event we should use our main event called ajaxSuccess and use a filter to grab only search related events. Under Trigger filters, use our previously created variable AjaxSearchEvent and choose ‘starts with’ condition and add the value /search?view that you could see in the GTM preview from #4 above. Name the trigger AjaxSearchStarted and you are done with this step. See the instructions below.
#7 Next you will need to create a new tag that will send the instant search event to Google Analytics (GA4). Go to GTM dashboard open Tags>New from the list select Google Analytics: GA4 Event. At this point we can assume that you already had connected GA4 with GTM. Use your configuration tag for GA4 and define your event name as you would like to appear in your GA4 events. For instance, I used the name ‘Site_search_ajax’. Under Triggers use the trigger that we created above – AjaxSearchStarted. Add a name for your tag and save this tag.
#8 Now you are almost done! Before you go, you should test your events. Go to GTM dashboard and click on Preview. Open the URL where you have the search bar and start typing. Then go back to GTM Preview window and find that ajaxSuccess event. Open it and you should be able to see what tags were fired.
#9 Just to make sure your GA4 config is working you should double check the search events in your GA4 dashboard.
If you don’t have a GA4 configuration in place, I will post soon a tutorial on how to configure and set up GA4 in Google Tag Manager.
Now you are all set. If you consider this tutorial helpful, please show some love and give us a reference.