Form Tracking With DOM scraping and Google Tag Manager

Disclaimer: This method should never be your first form tracking option with Google Tag Manager. Try using any other Google Tag Manager Form tracking method mentioned in this blog post.

If developers often update the website’s code, you should treat DOM scraping as the last resort when it comes to form tracking. It’s better than “no form tracking at all”, but it’s less robust than other options described in this blog post. Although you gain a lot of flexibility and agility, it hardly depends on the website front-end’s structure. Even a slight change committed by developer might break your implementation. Also, it requires some knowledge of Javascript and DOM concepts (which is a rare skill among marketers).

For this example we’ll be using DOM Element Variable. It is a variable in Google Tag Manager which lets you scrape content directly from Document Object Model (in other words: with its help you can transfer any text on your website into a Variable and pass it on to your Marketing tools (e.g. Google Analytics)). But first, let’s create a GA tag.

Create a Google Analytics Tag

You are probably already familiar with the main GTM concept: every interaction you want to track needs a tag and a trigger. 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):

1. Go to Tags
2. Press New button
3. In Tag Configuration choose Universal Analytics:
   1. Paste your Google Analytics ID (e.g. UA-XXXXXX). It would be better if you pasted it as a constant variable.
   2. Track Type – Event
   3. Event Category – Form submission (feel free to choose another appropriate title)
   4. Event Action – Contact Form (feel free to choose another appropriate title)
   5. Event Label – {{Page URL}}. P.S. Feel free to choose other values for the event category, action, and label.
   6. Leave other fields as they are.
4. Leave the Triggering part empty (for now) and click Save. We’ll get back to it in the next chapter of this blog post.

Let’s Create a Trigger

Open a demo Shopify store Brooklyn Theme and see everything in action. I’d like to apologize Shopify folks in advance for spamming their demo website with fake email submissions (but I’m sure they’re fine with it). There is a Signup up to our mailing list form at the bottom of their homepage.

Quick off-topic note: If you haven’t, consider subscribing to my monthly email newsletter for more useful Google Tag Manager guides

Enter exampl[email protected] in that Shopify form and hit Subscribe. A page will refresh, web address will change to https://brooklyn-theme.myshopify.com/?customer_posted=true#contact_form, and that little form displays a “Thank you” message.

In th,is case we could easily track form submissions with Pageview trigger of Thank you page, but let’s imagine that page’s address (URL) did not change. This is not a common situation, but it’s possible. That’s where DOM Element Variable might come in handy. We could create a trigger which could scan a website and look for a success message “Thanks for subscribing”.

First, let’s create a DOM element variable looking for that particular success message. Hover your mouse cursor over success message’s text, click the right mouse button and choose Inspect.

A developer’s console will appear with a lot of HTML code. Note that the success message’s code is already selected in that console. That message does not have any unique ID so we’ll need to utilize CSS Selectors.

At the bottom of screenshot, you can see a line of CSS selectors, e.g. div.note.form-success. These selectors can help us identify the exact element of the website.

Let’s create a DOM Element variable and try to scrape “Thanks for subscribing” text.

1. Go to Variables
2. Scroll down to user-defined variables and click New
3. Choose Variable type – DOM Element Variable
4. Selection method – CSS selector
5. In Element selector field enter div.note.form-success
   
   See what I did there? I entered the last CSS selector from the screenshot above. I also verified CSS selector according to Measureschool’s DOM scraping tutorial (start from 3:12), because there’s a possibility of more website elements with similar CSS selector. I want to track only that particular success message, so I need to make sure my CSS selector is unique.
6. In case there were more possible success messages on the website with similar CSS selector, I would have used a longer CSS selector, for example, “#contact_form div div.note.form-success” (without quotation marks)
   
7. Leave Attribute name empty.
8. Variable’s title could be DOM – Form Success Message.
9. Hit Save.

Let’s Test

1. Enable Preview and Debug mode (or refresh if it’s already launched).
2. Refresh the page with form (or delete ?customer_posted=true#contact_form in URL) and try submitting it.
3. Choose Page view event in Preview and Debug console and click Variables.
   
4. If DOM – Form Success Message variable’s value is Thanks for subscribing, you did a good job.

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

1. Go to Triggers and click New
2. Choose Trigger type – Pageview
3. This trigger fires on: Some Pages
4. Enter the following condition: DOM – Form Success Message equals Thanks for subscribing. This means that trigger will fire only on those pages where Form success message is displayed to visitors.

Do not forget to test:

1. Assign this new trigger to Google Analytics Tag that you created in the beginning of this blog post.
2. Open a Preview and Debug mode (or refresh), reload a web page with a form you want to track.
3. Fill in the 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).
4. Also try submitting a form with an intentional error and see whether the tag fires (spoiler alert: it shouldn’t).

In Case DOM Scraping Isn’t the Right Method for You

I have created a very detailed Google Tag Manager form tracking guide which includes 5 different form tracking techniques. I highly recommend trying other 4 methods before considering DOM scraping, due to its riskiness.

If you have questions, feel free to contact me via social media accounts or write a comment in this blog post.