04 Mar

Leveraging DOM Scraping with Google Tag Manager

Ever find yourself setting up an event in Google Tag Manager and thinking, “If only I could grab just a bit more info from the page, but I have no idea how”? Trust me, you’re not alone. A nifty trick called DOM scraping might be just what you need.

DOM scraping lets you pull extra details about user interactions straight from the webpage’s code—no developer required. Sure, there are some things to watch out for (which we’ll cover), but this method can be a real lifesaver when you’re in a pinch.

I’ll show you how to use DOM scraping with Google Tag Manager in this guide. Whether you’re a seasoned coder or just heard the term “DOM” for the first time, I’ve got you covered. Let’s dive in!

Getting Started

Before we jump in, make sure you’re set up with the following:

  • A Basic Understanding of JavaScript: Don’t worry if you’re not an expert.
  • Google Analytics 4 Installed via GTM: We’re focusing on Google Analytics 4 installed using Google Tag Manager. 

    If you’ve set up GA4 differently, that’s cool, but this guide might not fit your setup.

So, What's the DOM Anyway?

Let’s break it down. When you punch in a website’s URL, your browser sends a request to that site’s server, saying, “Hey, can I get the contents of this page?” The server replies with all the goodies: the HTML, CSS, JavaScript—you name it. Your browser then takes all that and paints the webpage you see.

Now, if you’re curious (like me), you can right-click on any webpage and hit “View Page Source.” This shows you the raw HTML code—the static stuff straight from the server. But here’s the kicker: when your browser processes this code, it creates a dynamic version called the DOM, or Document Object Model.

Think of the DOM as a live, interactive map of the webpage. It’s like the behind-the-scenes blueprint that you can poke around in. To see it in action, right-click on the page again and select “Inspect.” A panel will pop up showing you all the elements. Hover over them, and you’ll see the corresponding parts highlighted on the webpage. It’s pretty neat!

What’s even cooler? You can tweak things here—change text, styles, you name it. Just remember, any changes you make are temporary and only visible to you. But hey, it can make for some fun pranks!

So, in a nutshell, the DOM is the structured representation of the webpage that scripts can interact with. And by “scripts,” I mean code that can modify content, styles, and more. This is where DOM scraping comes into play. It allows us to grab values or even change stuff on the fly.

A Quick Heads-Up: The Risks of DOM Scraping

Before you get too excited, I have to play the responsible adult for a minute. DOM scraping can be a bit… finicky. Why? Because it depends on the structure of the webpage staying exactly the same. If someone updates the site—say, a developer tweaks how products are displayed—your DOM scraping setup might break or, worse, collect incorrect data.

Ideally, you should ask a developer to push the info you need into the data layer so you can grab it easily with a Data Layer variable. But I get it—that’s not always feasible. And that’s where DOM scraping becomes a handy tool in your arsenal. Just use it wisely!

Let's Get Our Hands Dirty: Practical Examples

Let's dive into a couple of scenarios where DOM scraping can save the day.

Example 1: Tracking User Input from a Form

Imagine you have a subscription form on your website where users can choose their preferred newsletter topics from a list of checkboxes. You want to track which topics are most popular, but this information isn’t available in the data layer. 

Here’s how you can capture it using DOM scraping.

Step 1: Identify the Form Elements

  • Inspect the Form:
    • Go to your website’s subscription page.
    • Right-click on one of the topic checkboxes and select “Inspect.”
    • Look for a common class or attribute that identifies these checkboxes. Let’s say they all have the class newsletter-topic.

Step 2: Create a Custom JavaScript Variable in GTM

  • Set Up the Variable:
    • In Google Tag Manager, navigate to “Variables” and click “New.”
    • Choose “Custom JavaScript” as the variable type.
  • Insert the Code:
    • 				
					function() {
  var topics = [];
  var checkboxes = document.querySelectorAll('input.newsletter-topic:checked');
  checkboxes.forEach(function(checkbox) {
    topics.push(checkbox.value);
  });
  return topics.join(',');
}
    • Explanation:
      • We select all checked checkboxes with the class newsletter-topic.
      • We loop through them and push their values into an array.
      • We return a comma-separated string of the selected topics. 
    • Name the Variable: “SNT – Selected Newsletter Topics”

    Step 3: Create a Form Submission Trigger

    • Set Up the Trigger:
      • Go to “Triggers” and click “New.”
      • Choose “Form Submission” as the trigger type.
      • Configure it to fire on the subscription form. You can limit it to a specific form by checking the form’s ID or action attribute.
      • Name the trigger “Form Submission – Newsletter Signup.”

    Step 4: Set Up a GA4 Event Tag

    • Configure the Tag:
      • Navigate to “Tags” and click “New.”
      • Choose “GA4 Event” as the tag type.
      • Enter your Measurement ID and set the event name to newsletter_signup.
      • Add an event parameter named selected_topics and set its value to the variable “SNT – Selected Newsletter Topics.”
      • Set the trigger to “Form Submission – Newsletter Signup.”
      • Name the tag “GA4 Event – Newsletter Signup.”

    Step 5: Test Your Setup

    • Preview and Debug:
      • Enter preview mode in GTM.
      • Go to your website and select a few newsletter topics.
      • Submit the form.
      • In the GTM preview pane, ensure that the tag fires and that the selected_topics parameter contains the correct data.
      • Check GA4’s DebugView to confirm the event was received with the correct parameters.

    Example 2: Monitoring Interactions with Dynamic Elements

    Suppose your website features a gallery of articles, each with a “Read More” button. These articles are loaded dynamically, and you want to track which articles users are most interested in by capturing the article titles when the buttons are clicked.

    Step 1: Identify the Dynamic Elements

    • Inspect the “Read More” Button:
      • Navigate to your article gallery.
      • Right-click on a “Read More” button and select “Inspect.”
      • Notice the HTML structure. Let’s say each article is wrapped in a div with the class article-item, and the title is within an h3 tag inside that div.

    Step 2: Create a Custom JavaScript Variable

    • Set Up the Variable:
      • In GTM, go to “Variables” and click “New.”
      • Choose “Custom JavaScript” as the variable type.
    • Insert the Code:
    				
					function() {
  var clickedElement = {{Click Element}};
  var articleItem = clickedElement.closest('.article-item');
  if (articleItem) {
    var articleTitle = articleItem.querySelector('h3').innerText;
    return articleTitle;
  }
  return undefined;
}
    • Explanation:
      • We start from the clicked element ({{Click Element}}).
      • We find the closest ancestor with the class article-item.
      • Within that, we select the h3 tag to get the article title.
      • We return the title or undefined if not found.
    • Name the Variable: “SNT – Article Title”

    Step 3: Create a Click Trigger

    • Set Up the Trigger:
      • Go to “Triggers” and click “New.”
      • Choose “Click – All Elements” as the trigger type.
      • Configure it to fire when the Click Classes contain read-more-btn (assuming the button has this class).
      • Name the trigger “Click – Read More Buttons.”

    Step 4: Set Up a GA4 Event Tag

    • Configure the Tag:
      • Navigate to “Tags” and click “New.”
      • Choose “GA4 Event” as the tag type.
      • Enter your Measurement ID and set the event name to article_read_more.
      • Add an event parameter named article_title and set its value to the variable “CJS – Article Title.”
      • Set the trigger to “Click – Read More Buttons.”
      • Name the tag “GA4 Event – Article Read More.”

    Step 5: Test Your Setup

    • Preview and Debug:
      • Enter preview mode in GTM.
      • Click on several “Read More” buttons on your website.
      • In the GTM preview pane, ensure the tag fires and captures the correct article titles.
      • Verify in GA4’s DebugView that events are received with the right data.

    Wrapping Things Up

    While getting a developer to push the info you need into the data layer is the gold standard, sometimes you have to roll up your sleeves and find another way. DOM scraping can be that handy workaround when you’re in a pinch.

    Just keep in mind that websites evolve. The elements you’re referencing today might change tomorrow, which could throw a wrench in your tracking. So, while DOM scraping is super helpful, it’s wise to keep an eye on things and not rely on it as a permanent solution.

    Do you have any other cool ideas or use cases for DOM scraping? I’d love to hear about them! Please share your thoughts in the comments below.

    Leave a Reply