DOM Scraping Conversion Tracking Method with GTM

In This Article, we will explain to you how to setup Conversion and Event Tracking with DOM Scraping with the help of GTM.

DOM Scraping is not Robust. For e.g if your developer makes frequent changes on website then this method would not be suitable for you.

How to add event tracking with the help of DOM Scraping method?

Let’s Began and See the Step by Step process of Event Tracking with DOM Scraping

Step 1: Singing to GTM account and open your website container

Step 2: Open your website and submit your contact form so that you can see your thank-you message. Once you see your thank you or success message, we need to right-click on that thank you message and select an inspect element option.

In screenshot, you can see the DOM Element for thank you page is “div#wpforms-confirmation-45” which is unique DOM on that Page, so we can use that for conversion tracking . Like that you will also need to find your unique DOM Element.

Step 3: Click on Variable options from Left navigation and create a user define Variable. In Variable Type, select DOM Element. Select CSS Selection from selection method option. Add div#wpforms-confirmation-45 in Elementor Selector box. All other setting will remain the same. Save the variable with name “DOM – Form Success Message“.

Step 2: We have to create a Trigger. Click on Trigger and Click on New Trigger option to create a new Trigger

Select page view option in Trigger type configuration and select to fire on “some page views“. Add the condition as shown in snapshot below. Save it with a name “DOM Trigger”

Step 6: Create A new tag and select Google Analytics: GA4 Event and under that select Google Analytics GA4 Configuration(We have already setup this on first part of GA4 installation. You can watch the same on below link https://www.youtube.com/watch?v=Q-np00ab2WU)

Add an Event name “Lead Form” and select Trigger “DOM Trigger“. Save your Tag with any name you want.