Learn business growth with Google Analytics 4 Forums Google Analytics 4 Recording the Visibility of a Shadow DOM Element in the Browser

  • Recording the Visibility of a Shadow DOM Element in the Browser

    Posted by Cameron on 31 October 2022 at 8:48 pm

    Hey there! I’m trying to figure out a way to fire an event to GA4 when a user brings up an LWC div element by clicking a button (like an error text pop-up). This element is tucked away in Shadow DOM (think Salesforce greetings), and the usual GTM elementVisibility trigger won’t detect it as the querySelector method turns up nothing.

    On my end, though, I can spot it using the DevTools console by running this:

    `javascript
    document.querySelector(‘c-cp-login’).shadowRoot.querySelector(‘.slds-form-element.cp-padding-left-right.cp-error_text’);
    `
    I’ve also cooked up a GTM custom JavaScript variable that can pull up the path of this element or the exact text of the element if I add in a .textContent property to the selector:

    `javascript
    “HTMLDivElement: div.slds-grid.slds-grid_vertical.slds-grid_vertical-” +
    “stretch.cp-top-container.cp-Box > div.slds-col > div.slds-form-element.cp-padding-left-right.cp-error_text”
    `
    So here’s my challenge: Can I set up a dataLayer push to fire an event when this rogue element shows itself using a custom HTML tag in GTM? Any thoughts or suggestions would be really appreciated. Thanks!

    Bailey replied 1 year, 3 months ago 3 Members · 2 Replies
  • 2 Replies
  • Ethan

    Member
    24 February 2023 at 5:14 am

    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

    Member
    18 April 2023 at 3:38 am

    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.

Log in to reply.