Reply To: Recording the Visibility of a Shadow DOM Element in the Browser

[Ethan]

Yes, it’s possible to set up a dataLayer push to fire an event when a specific div element appears on page using a custom HTML tag in Google Tag Manager. You do this by writing a script that listens for changes in the DOM (the structure of the webpage), and then pushes an event into the dataLayer when it detects that the specific div has been added. Since the element you’re concerned with is encapsulated in a Shadow DOM, your JavaScript will have to penetrate that to access the element. This method gives you the flexibility to specify exactly what conditions must be fulfilled for the event to be fired. After setting this up, you can then configure Google Tag Manager to fire a Google Analytics 4 event tag each time it sees the custom event you’ve specified.