-
Unresolved Issue: Retained iframes in DOM with GTM
Hey there, I’ve been tinkering with an Angular single page app and I’ve been using GTM with it. Every time I switch between pages, I have a Page-View event that’s triggered by
window.dataLayer.push(obj).objhere means the whole object, if you’re unsure.Anyways, things get a bit more complicated with GTM. I have these two triggers, one that adds a Custom HTML element (a script element actually), and it triggers another
dataLayer.pushbut with a simple object just to signal a new page view and the previous referer. With the other one, an iframe of type DoubleClick Floodlight is added to the DOM to keep tabs on certain behaviors for a short lifespan.From my understanding, these events are supposed to just pop up once in the DOM and then just sort of disappear. However, every new page view adds two more elements to the DOM (the script element + the iframe). I’ve been noticing this weird accumulation; every new page view just adds to the js heap size, which I think is the reason my Chrome DevTools is depicting a significant memory leak.
Even though the
dataLayerpops the oldest event once it reaches 300 events, this issue is still concerning me. What I’m trying understand is that if this is something that is to be expected with GTM? Or is it me who’s missing something in the larger picture with GTM?Do you think I would need to create a cleanup tag that will trigger once all elements have been inserted into the DOM? Or even go a step further and have a system where I track and remove it from within my application itself?
To be honest, I’m still struggling to fully comprehend this issue and I would really appreciate it if anyone can throw some light into it.
I haven’t actually tried anything to fix this yet. I have only been researching on stackoverflow and other resources including articles, videos and documents. I hope to find some seasoned advice from this community to guide me on what I should be doing next. Thanks in advance!
-
2 Replies
-
It sounds like you’ve run into a situation where elements that are created and added to the DOM (Document Object Model) via Google Tag Manager (GTM) are not being removed, leading to a buildup of these elements each time a page view event occurs. This might cause a memory leak situation, as you’ve observed in Chrome DevTools. This is not typical behavior for GTM, there may be something in your specific setup or custom script/iframe elements causing this action.
It’s a good idea to consider a cleanup routine. This can be a GTM tag that triggers when all elements are in the DOM, then cleans up these extra elements. Alternatively, it can be a routine within your app itself that tracks and removes these extra elements. It’s likely worthwhile to test these options out to see whether they mitigate the memory leak issue you’re encountering. Keep in mind that this is a deeper technical issue that may require more specific technical advice or direction.
-
It does seem like your application is experiencing a memory leak. Generally, elements inserted into the DOM should not persist across navigation in a Single Page Application (SPA) like Angular. The view should be completely destroyed and recreated when navigating to a new route. Based on your explanation, it might indeed, be the behavior of the Custom HTML Tag that adds the script element and the DoubleClick Floodlight iFrame to the DOM persistently. The growing heap size with each navigation would be indicative of this.
The natural behavior of Google Tag Manager (GTM) is not this. It’s designed to make the management of such script tags easier, not to insert them into the DOM and leave them there. It’s possible that it’s due to the Custom HTML Tag or how DoubleClick Floodlight is configured in GTM. So, you may want to investigate the configuration of these tasks.
Creating a cleanup tag could be a viable workaround, but it could lead to a higher complexity of your tag setup in GTM and potentially an increased possibility of bugs. A better approach might be to work on the root of the problem and change how these total elements are injected into the DOM, and inspect the behavior of the Custom HTML tag and DoubleClick Floodlight within GTM.
If that doesn’t work, then you probably need to check your Angular application if it’s correctly destroying and re-creating your views on navigation. You might want to consider employing some sort of manual cleanup via Javascript within your application, although this should be considered as a last resort due to its complexity.
For further debugging, I would recommend using the Google Tag Assistant plugin, as it can provide valuable insight into when and how your tags are firing. Hope this gives you some insight and guidance to tackle the memory leak issue.
Log in to reply.