Cannot detect changes in the DOM

[dungle-scrubs]

This is definitely a fringe request. I'm using Google Tag Manger's "Element Visibility" trigger to detect new items in the DOM on an Ecommerce website. I'm detecting them as they appear in the viewport to track impressions.

However, with React Query, the new product cards technically aren't added, but rather the data within are updated. That's really nice and fast, but the attributes that GTM adds to the DOM elements which help it keep track of them don't update in response to new nodes.

Any thoughts on how to approach this while using React Query?

[TkDodo]

can you elaborate on what the changes in the dom have to do with react-query? should those elements that be added to the dom trigger a fetch?

[dungle-scrubs]

Sorry I realize my question has to do with how components are updated in react and is outside the scope of react query.

I'm using react query prefetch to populate paginated sets of product cards and trying to get Google Tag Manager to recognize them as new DOM nodes each time the data is updated to track product impressions. Because the data is prefetched, react updates the contents of each product card, rather than creating new product card nodes, so GTM doesn't see them.