This blog will explain the methods to track the website form submission when forms are created via Elementor Pro WP plugin.
Elementor WordPress Page Builder
Elementor is one of the WordPress page builder plugins that allow you to create complex layouts visually and design your website live without switching between the WordPress editor and the preview mode. I am recently familiar with this plugin so can’t tell you about its popularity. But according to data mentioned on Elementor’s own website, it is the world’s leading WordPress page builder and over 40 million professionals have been joined Elementor and build better sites.
Anyways, let’s focus on our topic – how to track Elementor form submission tracking with Google Tag Manager and Google Analytics.
Before continuing
If you have Shopify website and not found the solution of your website’s conversion goals tracking such as form submission, phone click and email click. You can visit this previously published post by us – https://www.brandconn.com/blog/2020/02/shopify-website-conversion-tracking-through-tag-manager/, that will guide you step-by-step on how to track your Shopify website conversions tracking through Google Tag Manager.
However, if are you looking for a digital marketing agency with a team of experienced professionals who could setup all these conversions for your website? You can fill this contact us form on our website or call us on +91 120 4293692 + 91 8750 799 799.
Elementor Form Submission Tracking
When you have to go track a website form, first and the foremost step is that you need to check how it works for the end user. Submit your website’s form and check whether it is;
- Redirects to a “Thank you” or another page
- Or it shows a thank you message without doing anything else
- Or that form is in the iFrame, etc.
Depending on the above-mentioned possibilities, different form tracking method needs to be chosen.
In the case of Elementor, I have noticed my form does not reload the page or redirect a visitor anywhere else. Only “Thank you” message “The form was sent successfully” was displayed after submitting the form.
Generally, when only success message is displayed after submitting the form, this denotes that the form is using AJAX and it can be tracked by “AJAX Listener” method. Unluckily this time, this technique did not work, and that is where I moved to another option “Element Visibility Trigger”.
Element visibility trigger to the rescue form submission tracking
This trigger will allow you tracking the moment when a certain element appears on the screen. In my case, the Elementor form displays the thank you message “The form was sent successfully” every time a form is successfully submitted.
Now create an element visibility trigger, In GTM dashboard, go to Triggers >> New >> and choose “Element Visibility” trigger.
You will see two selection methods to pick that success message. It’s either ID or CSS Selector. But it is still not sure which one is the best option, so you will need to inspect the actual message element.
Go back to the website where the Elementor success message was present, do the right-click thereon and hit Inspect. Unfortunately, in my case, the success message doesn’t have any ID. This suggests that the ID selection method won’t work and our only hope is CSS selector.
These two CSS classes “elementor-message” and “elementor-message-success” are utilized in my case so I will use these two classes. If you see other classes, use them instead of these.
Copy and paste those two classes in the Visibility Trigger’s settings after changing the selection method to CSS selector. In front of every class add a dot and make sure that there are no additional spaces in-between your two classes. In CSS, a dot means a class.
So the final result (in my case) is “div.elementor-message.elementor-message-success”, as you can see in the above figure.
Now enable Observe DOM Changes. This will track the appearance of the element.
And keep the trigger firing once per page if there is only one form on a page. Let’s go to test whether this trigger works.
Save it, and refresh the Preview and Debug mode in GTM, then refresh the page that has the Elementor Form. Submit the form, and see if the Element Visibility event appears in the GTM debug console or not.
If it appears, then that is exactly what you should be looking for and the trigger is working fine. If not, please check whether your CSS selector was entered correctly or in some cases, you have not properly refreshed the page and the Preview & Debug mode.
NOTE*: Always refresh the Preview and Debug mode first, only then the actual web page you’re working on.
Google Analytics tag to track the Elementor Form
The next step is to send an event to Google Analytics whenever that “thank you” message appears on the screen.
In Google Tag Manager Dashboard, go to Tags >> New >> choose Universal Analytics. Then enter the following settings:
You can rename the Category, Action, and Label values to match your event tracking naming convention. Then go to the triggering section and choose the trigger we have created in the previous stage (Element Visibility).
Test
Save all the changes and refresh the Preview and Debug mode, then refresh the page where the Elementor Form is present. Fill the form fields and submit it.
Here are the things that were supposed to happen in preview Debug mode:
- Element Visibility event should have to appear.
- Click that event and you should see the GA Event tag fired.
Now go to your real-time event reports in Google Analytics and check whether that event is visible there. If it is fired, you’re good to go. If you are satisfied with the result, then go to GTM and Submit the container.
This is the only tracking method of the form if just display a thank you message after submitting the form without doing anything else. And the page has only one form. But if it is redirected the user on thank you page or page has multiple forms for tracking. Then this method will not work, in this case, you need to choose another option.
In our upcoming blogs, we will cover up these two topics of Elementor form tracking.
- It is redirected on the thank you page
- The page has multiple tracking form
