Tinkering with the Google Analytics JS snippet. A lesson in isograms

There is a neat code repo on Github called Isogram which can be used to play with the default Google Analytics tracking snippet issued by the Google Analytics dashboard.The standard tracking code issued by Google is something like:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-52506676-7', 'auto');
  ga('send', 'pageview');

</script>

Note the word isogram taking the form of function arguments. Ever enquiring, I googled the term Isogram, and it means:

An isogram (also known as a "nonpattern word") is a logological term for a word or phrase without a repeating letter. It is also used by some to mean a word or phrase in which each letter appears the same number of times, not necessarily just once.[1] Conveniently, the word itself is an isogram in both senses of the word.

Which sort of makes sense if you inspect the code. It ties in nicely with the notion of 'constraints' in programming where any deviation from such constraints would break the code.

I wanted to make my own custom tracking code, and so I google around further and realize a few others, notably Mathias Bynens has toyed with the concept already:

In the end, I didn't use the Isogram tool to create my snippet, as it is trivial enough to do this with some hand-coding alone. It also helps if your editor highlights every occurrence of the same variable. I imagine it would be slightly taxing doing this without decent syntax highlighting:

I wanted to use my snippet on my side project Unicode Tools

The end result is this:

(function (u, n, i, c, o, d, e) {
u.GoogleAnalyticsObject = c;
u[c] || (u[c] =
function () {
(u[c].q = u[c].q || []).push(arguments)
});
u[c].c = +new Date;
o = n.createElement(i);
d = n.getElementsByTagName(i)[0];
o.src = '//www.google-analytics.com/analytics.js';
d.parentNode.insertBefore(o, d)
}
(window, document, 'script', 'ga'));
ga('create', 'UA-52506676-7');
ga('send', 'pageview');

Note how I am spelling out the word UNICODE here. The Isogram repo maintains a small list of sites that are using this playful hack in their code. I subsequently added Unicode Tools to this list.

The hack itself is a bit useless, but I would treat it more like a Personal Easter Egg, and if anything; it was a fun lesson in coding, and has me wondering where else this concept could be applied.

Noteworthy Links: