Optimize Google Tag Manager performance wise

[MisRob]

Observed behavior

Google Tag Manager (GTM) stores references to DOM elements in window.dataLayer array for some events (e.g. click and linkClick). Because of that, some of those DOM elements can easily become detached DOM elements (elements that are not rendered anymore to a user but are still kept in memory). See gtm.element being a memory retainer in the JS Heap Memory Snapshot taken after navigating a channel for a while and triggering garbage collection:

Expected behavior

GTM is optimized so that there are no detached DOM nodes as a result of using it.

User-facing consequences

Even though my guess would be that it's not the primary cause of the memory leaks (#3363), it most likely contributes to it. From the user's point of view, memory leaks are experienced as slow responses or even unresponsiveness, especially after sustained usage.

Errors and logs

The heap snapshot from the screenshot above

Additional information

• I haven't noticed any information in the data layer documentation itself and haven't tested this, however I noticed a post on StackOverflow saying that the size of the dataLayer is said to be capped at 300 items.

• @bjester: They don't call out any caveats to using the reset method, so perhaps we can periodically push that onto the dataLayer. We should just verify that events still attach things like the channel name, which we can see in Google Analytics.

• You can see Your website probably has a memory leak article where one of the sources of memory leaks was GTM. They present some solution to lose references in GTM events to DOM nodes.

Steps to reproduce the issue

1. Navigate a channel
2. Check the ever-growing window.dataLayer

Usage Details

• OS: Ubuntu
• Browser: Chrome