For some reason, the Google Tags Manager does not load any cookies when added dynamically
When the user clicks on some accept button I add a script tag to the body with the src of https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAGS_ID} and after it has been loaded I ran this:
function gtag(...args: any[]) {
window.dataLayer.push(args);
}
// After the script has finish loading I called this function
function load() {
gtag('js', new Date());
gtag('config', GOOGLE_TAGS_ID);
}
gtag function should be global and use the arguments objectThe problem was the gtag function I defined
The code that you should add to your HTML page was this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<id>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<id>');
</script>
gtag function had:It wasn't global (maybe wasn't a problem but it's different then the original implementation).
I used the rest parameters (...args) instead of using the arguments object.
Because rest parameters and the arguments object are not the same, as explained at MDN - The difference between rest parameters and the arguments object
In most circumstances, you should prefer to use the rest parameters over arguments object, but apparently, Google Tags Manager needs the properties of the arguments object.
So what I did was:
// The function is usually done in the script tag within the global scope, so we adding the function to the global scope
window.gtag = function gtag(...args: any[]) {
// The original function was without the ...args, we added it so TypeScript won't scream
// Use arguments instead of the rest parameter
// See why here - https://stackoverflow.com/a/69185535/5923666
// TL;DR: arguments contain some data that not passed in the rest parameters
window.dataLayer.push(arguments);
}