What better way to celebrate the 50th #GTMTips article than, well, a really useful Google Tag Manager tip?! This tip is so useful and simple; it encapsulates everything that I had in mind when starting this series. The tip is about restricting scope of Custom HTML Tags. This is an important concept, because it’s possible that you’re stuffing your page’s global JavaScript namespace with all sorts of junk, and thus inadvertently causing conflicts.
X
The Simmer Newsletter
Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox!
Tip 50: Restrict Custom HTML Tag Scope
The tip is very simple. Whenever adding JavaScript code in a Custom HTML Tag between and tags, add the following code around whatever you’ve written:
(function() {
// Your JavaScript here
})();
What you’re doing is creating an immediately invoked function expression, or IIFE for short. By wrapping the function() {...} in parentheses, you’re instructing the browser to treat the code within as an expression rather than a declaration. In other words, you’re instructing the browser to invoke the function, making it syntactically valid by adding the empty parentheses at the end (so that the browser knows it’a a function expression). This executes whatever code is within the block.
So if it does exactly what it would do even without the IIFE, why do it?
Well, JavaScript scopes variables to their execution context. This means that if variables are declared within a function, they are only accessible inside that function. Furthermore, JavaScript has a global namespace which in the web browser is defined by the window object. If you didn’t have the IIFE around your code, then any variables you declared would be hoisted to the global window namespace, thus creating potential for conflict.
Take a look at this example:
<script>
// No IIFE
var ga = "My secret 'ga' code";
console.log(ga);
// Results in an error
window.ga('send', 'pageview');
script>By overwriting ga with your own nifty little string, you just broke Universal Analytics. Congratulations.
Whereas if you did this:
<script>
(function() {
// IIFE
var ga = "My secret 'ga' code";
console.log(ga);
})();
// Works
window.ga('send', 'pageview');
script>This time you’re protecting your own little ga variable and, more importantly, you’re protecting the global ga function by declaring your variable in an IIFE.
Just remember the following additional tips:
-
Always declare variables in GTM using the
varkeyword. This way they will be restricted to the current scope. If you omit this keyword, then JavaScript automatically adds them to the globalwindownamespace. NOTE! This also applies to Custom JavaScript Variables, not just Custom HTML Tags! -
Always refer to global variables using the
window.prefix. That will make your code more readable and will prevent you from causing conflicts by accident.
And that’s it!
