Google Tag Manager<\/a> is a great tool. Yeah, you came all the way to this article to read that truism. It also performs really well, loading at a sweet, swift pace even on a slow connection, thanks to pretty decent response times from Google servers. On top of that, the library itself loads asynchronously<\/em>, meaning the container download doesn\u2019t interrupt the browser as it tries to make sense of your messy HTML.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n However, after the container has downloaded, the rest is up to you. The Triggers<\/a> you attach to Tags, the Variables<\/a> you resolve in both Tags and Triggers, and all sorts of things like Tag Firing Priority<\/a> can potentially bog down your site simply because they all represent complex JavaScript operations. Just because code is executed in the Google Tag Manager container doesn\u2019t guarantee fast performance. The browser still needs to execute it line-by-line, using asynchronous requests where possible (such as when a call is made to the Google Analytics endpoint), but also relying on quite expensive operations such as DOM insertion.<\/p>\n Anyway, being the experimenter that I aspire to be (how\u2019s that for a circular statement), I wanted to measure just how much time it takes for GTM events to resolve. Here\u2019s the result:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Interesting stuff! Out of the largest timing samples, it\u2019s the most basic of events, gtm.js<\/strong>, which takes the longest time to complete! 2.5 seconds on average, phew! Here are the Tags on my site which fire on gtm.js<\/strong>:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n There\u2019s a tracker setup<\/a> Tag, a little Konami code<\/a> surprise, as well as some code to measure the SERP bounce time<\/a> on my site. Each one of them has some Anyway, this measurement has been quite eye-opening. It\u2019s a good idea to be aware of what happens behind the scenes. Even asynchronous operations can be harmful to page performance, especially if there are many of them running one after the another. The reason for this is that the Let me quickly walk you through how I setup this measurement. It\u2019s not a walk in the park, and if you want to try it yourself I urge<\/em> you to test it in a staging environment first!<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n To make it work, we need to hack the Data Layer.<\/p>\n Queue ominous music.<\/p>\n That\u2019s right, we need to do what Google Tag Manager has already done<\/a> and hijack the So, the following code needs to end up on your page template before<\/em> the Google Tag Manager container snippet:<\/p>\n Wow. That\u2019s a beast. I\u2019m not going to walk you through it line-by-line, but here\u2019s how it works:<\/p>\n When a It takes the object that was pushed, and if it contains an A timer is started (the time when the event execution began) and stored in the key The Finally, whatever was processed by this script (whether it be the modified object or the new \u201cperfTime\u201d object) is returned to the original Ah, that IS a beast. Perhaps it\u2019s easier if I show you an example. When this code is running (i.e. before the page has completely loaded), a simple \u2026is automatically turned into:<\/p>\n And when all Tags which fire on So my little hack is automatically measuring the time any By the way, you don\u2019t really need to add the NOTE!!<\/strong> The script automatically excludes gtm.linkClick<\/strong>, gtm.timer<\/strong> and gtm.formSubmit<\/strong>, as these have their own uses for Remember to test first, please!<\/p>\n The setup in GTM requires the following:<\/p>\n A Data Layer Variable<\/strong> named DLV – perfEvent.event<\/strong>, pointing to variable name A Data Layer Variable<\/strong> named DLV – perfEvent.totalTime<\/strong>, pointing to variable name A Custom Event Trigger<\/strong> named Event – perfTime<\/strong>, with Event name set to A Universal Analytics Tag<\/strong> of type Timing<\/strong> (see below)<\/p>\n<\/li>\n<\/ol>\n Here\u2019s the Tag:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n And this Tag will send your hits as User Timings, after which you\u2019ll find the report in Google Analytics, under Behavior -> Site Speed -> User Timings<\/strong>.<\/p>\n![\"gtm.js](\"https:\/\/www.simoahava.com\/images\/2016\/06\/gtm-js-load.jpg#ZgotmplZ\")
<\/p>\n![\"GTM](\"https:\/\/www.simoahava.com\/images\/2016\/06\/measure-gtm-event-performance.jpg#ZgotmplZ\")
<\/p>\n![\"gtm.js](\"https:\/\/www.simoahava.com\/images\/2016\/06\/gtm-js-tags.jpg#ZgotmplZ\")
<\/p>\ndataLayer.push()<\/code> methods executed, and the tracker setup does load the analytics.js<\/strong> library, so it\u2019s not like it\u2019s lightweight stuff. But still, 2.5 seconds? That\u2019s a lifetime in Internet time!<\/p>\nload<\/code> event for the window<\/code> object is delayed until the page and all its related resources (e.g. scripts and images) have completely loaded. This might lead to problems with frameworks like React<\/a>, where many operations are executed only after the window.onload<\/code> event has been dispatched in the browser.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nLet\u2019s hack the Data Layer<\/h2>\n
dataLayer.push<\/code> method to overwrite it with our own.<\/p>\nscript>\n window<\/span>.dataLayer = window<\/span>.dataLayer || [];\n var<\/span> oldPush = window<\/span>.dataLayer.push;\n window<\/span>.dataLayer.push = function<\/span>() {\n var<\/span> e = [].slice.call(arguments, 0<\/span>);\n if<\/span> (e[0<\/span>].event && \n e[0<\/span>].event !== \"perfTime\"<\/span> &&\n [\"gtm.linkClick\"<\/span>,\"gtm.formSubmit\"<\/span>,\"gtm.timer\"<\/span>].indexOf(e[0<\/span>].event) === -1<\/span> &&\n document<\/span>.readyState !== \"complete\"<\/span>) {\n var<\/span> t = (new<\/span> Date<\/span>).getTime(),\n a = e[0<\/span>].event;\n e[0<\/span>].eventStartTime = t,\n e[0<\/span>].eventCallback = function<\/span>(c){\n window<\/span>.dataLayer.push(\n {\n event : \"perfTime\"<\/span>,\n \"perfEvent.event\"<\/span> : a,\n \"perfEvent.totalTime\"<\/span> : (new<\/span> Date<\/span>).getTime() - t,\n \"perfEvent.containerId\"<\/span> : c\n }\n )\n }\n }\n \n oldPush.apply(window<\/span>.dataLayer, e);\n\n }\nscript<\/span>><\/code><\/pre>\n<\/div>\n\n
dataLayer.push()<\/code> happens, this code is first executed.<\/p>\n<\/li>\n'event'<\/code> key and if it matches some other conditions, the following code is then run:<\/p>\n\n
eventStartTime<\/code><\/p>\n<\/li>\n[eventCallback](\/gtm-tips\/hitcallback-eventcallback\/)<\/code> of this object is set to a function, which basically pushes another<\/em> dataLayer<\/code> object, where a new timer calculates the difference between the event execution start and end times<\/p>\n<\/li>\ndataLayer.push<\/code> method, so that GTM can pick it up<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\ndataLayer.push()<\/code> like this:<\/p>\nwindow<\/span>.dataLayer.push({\n 'event'<\/span> : 'testing'<\/span>,\n 'someVar'<\/span> : 'someVal'<\/span>\n});\n<\/code><\/pre>\n<\/div>\nwindow<\/span>.dataLayer.push({\n 'event'<\/span> : 'testing'<\/span>,\n 'someVar'<\/span> : 'someVal'<\/span>,\n 'eventStartTime'<\/span> : 1464890512708<\/span>,\n 'eventCallback'<\/span> : function<\/span>(e) {...}\n});\n<\/code><\/pre>\n<\/div>\n'event' : 'testing'<\/code> have completed their execution, the following is, again, automatically pushed into dataLayer<\/code>:<\/p>\nwindow<\/span>.dataLayer.push({\n event : 'perfTime'<\/span>,\n 'perfEvent.event'<\/span> : 'testing'<\/span>,\n 'perfEvent.totalTime'<\/span> : 421<\/span>,\n 'perfEvent.containerId'<\/span> : 'GTM-W92WQQ'<\/span>\n});\n<\/code><\/pre>\n<\/div>\n'event'<\/code> takes to complete, as long as it happens before the page has loaded (as that\u2019s the only performance I\u2019m interested in).<\/p>\neventStartTime<\/code> into the object, as you already have a locally scoped variable t<\/code> which stores the start time in a closure. However, I prefer to keep it there in case I want to do further debugging, since with the start time I can also build a waterfall model out of the performance times, to see how much execution of these different pre-load events overlap.<\/p>\neventCallback<\/code> (the Wait for Tags<\/strong> option). Similarly, if you\u2019re already using eventCallback<\/code> with some events, be sure to add them to the Array of excluded events, or you might break your site!<\/p>\n\n
perfEvent.event<\/code><\/p>\n<\/li>\nperfEvent.totalTime<\/code><\/p>\n<\/li>\nperfTime<\/code><\/p>\n<\/li>\n![\"Universal](\"https:\/\/www.simoahava.com\/images\/2016\/06\/ua-timing-tag.jpg#ZgotmplZ\")
<\/p>\n