DOM Ready trigger type in GTM | WTF is this?

When I started using GTM, I was wondering when to use DOM Ready as a trigger type.

Google Tag Manager trigger type DOM Ready. What does this mean?

I’m currently studying a web course called Developing Modern Web Platforms offered by Metropolia University of Applied Sciences. During the course, we learn the basics of HTML, CSS, and JavaScript and also the theory of how a browser renders a web page.

This course is the reason why I got familiar with DOM and, by accident, got an answer to this GTM related question of mine: What does this DOM Ready trigger type mean?

Here is a short description for other beginners who are wondering the same thing.

How does a browser render a web page?

I’m not going to dig deep into this. If you are interested in details, see this video of Ryan Seddon explaining the basics of rendering a web page.

Here are the main steps in rendering the page:

Look at the first blue boxes. Parsing the HTML and CSS creates the DOM tree.

So that’s how easy it is: When HTML and CSS of your site have been parsed, that’s when your page is DOM Ready.

Which trigger type to choose in GTM?

Which page view trigger type to choose in Google Tag Manager

When creating a trigger that fires in Page View, you have three options.

  1. DOM ready trigger fires when a browser has built the skeleton of the page = parsed HTML and CSS. So the page may not look that good yet, but there is something rendered to a page.
  2. Page View trigger fires immediately when the browser starts parsing the site even though nothing would be built. Some of the page visitors might leave before the site has fully loaded but the trigger has already been fired.
  3. Window Loaded trigger fires when the page is fully loaded.

Hopefully you got an answer to your question!