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.

[Bailey]

Yes, you can set up a dataLayer push to fire an event when the element shows itself using a custom HTML tag in GTM.

You would use a MutationObserver with GTM. MutationObserver provides developers a way to react to changes in a DOM. It is designed to react to changes in the structure of a document’s tree, like the addition or removal of elements, changes in element’s attributes, and more.

You need to write a custom bit of JavaScript which you run on the page as a Custom HTML tag. This script creates a new MutationObserver which then watches the element (which you can target as you have done via the shadowRoot method when it’s available). If the element is found, the MutationObserver fires, sending an event to the dataLayer.

Here is a sample JavaScript you might use:

`javascript
(function() {
// Ensure the element with ‘c-cp-login’ ID exists on the page
var targetNode = document.querySelector(‘c-cp-login’);
if (targetNode) {
// Configuration of the observer:
var config = {
attributes: true,
childList: true,
subtree: true
};
// Callback function to execute when mutations are observed:
var callback = function(mutationsList, observer) {
// Look through all mutations that just occured:
for (var mutation of mutationsList) {
// If a childNode was added (or removed), use querySelector to see if your element now exists:
if (mutation.type === ‘childList’) {
var errorElement = targetNode.shadowRoot.querySelector(‘.slds-form-element.cp-padding-left-right.cp-error_text’);
if (errorElement) {
// If your element exists, push to dataLayer and stop observing:
dataLayer.push({
event: ‘elementShown’,
element: ‘YOUR_ELEMENT’
});
observer.disconnect();
}
}
}
};
// Create an observer instance linked to the callback function:
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations:
observer.observe(targetNode, config);
}
})();
`

The ‘elementShown’ event can be then used within GTM to trigger your GA4 tag.

Bear in mind that MutationObservers should be used sparingly and detached as soon as they are not required anymore, which is why in the code above, we disconnect the observer as soon as it detects the desired element. This is due to the potential performance impact they can have if there are a huge number of DOM changes.