Tag Manager as a CMS Because why not?
May 25, 2019 - Sam Messina
I had a weird thought at work the other day.
I was explaining how Google's Tag Manager works to a team mate in marketing, and caught myself saying "...and the best part is that we can inject any HTML we want into the page!"
And that's when it hit me: could we create a whole website using only Google Tag Manager?
This was a question that needed answering, and suddenly felt way more pressing than the side project I've been speccing out lately. So I got to work.
First, what is Google Tag Manager? Let's see what Wikipedia says...
How Does Tag Manager Work?
Tag Manager is pretty handy, but I won't get too into it here. You can read more in Google's docs here
So like I said, I had this crazy idea. Why not use Tag Manager as a kindof root element, a la React? Is it even possible?
Let's find out.
1. Self Validation
First thing is to set up Tag Manager and test out our own little Hello World. Setting up Tag Manager is easy enough, and I was able to spin up a quick Node server from a boilerplate repo of mine.
From there, I just had to strip out the HTML, add a tag in Tag Manager
<h1>Hello World from Tag Manager</h1>, and see
Low and behold, it worked.
2. A New Hope
Ok, so this is maybe possible! Next I had to formulate a plan. To really start thinking of Tag Manager as a CMS, setting up my site tag-by-tag. So what's in a website, anyway?
Basically, I'm thinking I can just add a
some CSS, my HTML, and some JS, and close everything out. What's that, 5
3. Down the Rabbit Hole
Naturally, the next step is to find a Bootstrap theme. I ended up settling on New Age from startbootstrap.com.
I was wrong. In fact, I was about to hit my first issue.
4. Concerning Separation of Concerns
As I added my
<head> element, things went well. The
problem came when I went to add my CSS. Turns out, Tag Manager has a
character limit for Tags. 102,400 characters, in fact.
So what are my options? I could split up the code, load from a CDN, try to extract just the CSS I need? Turned out a bit of everything.
I ended up loading the base Bootstrap CSS from a CDN, then splitting out
the third-party CSS and the theme-specific CSS and loading it all into
separate Tags using a
<style> element and a little
Cool. First problem: solved.
5. Finish What You Started
With the character limit out of the way, I went to publish my Tag
Manager changes only to find another issue. Turns out, Tag Manager
validates its HTML Tags. This wouldnt be a problem, except that I hoped
to load the CSS inside the
<head>, which meant I'd have
to close the
<head> element from a different Tag than
the one in which I opened it.
Ok, so I have to add in the CSS after the closing
</head> element. I don't think best practices were ever
in play here really.
6. Order Up
So I had my
<head> element and CSS set up. I added my
template's HTML content, published the Tag Manager changes, and loaded
up the page to see what we had so far.
And then I was reminded that Tag Manager has an option to sequence Tags.
Turns out, my
<head>, CSS and HTML were loading in
random orders at page load.
Simple, but tedious enough fix: sequence each Tag to wait for another, forming a Tag queue to load in the site.
7. Font Awesomeful
I actually love Font Awesome. It sure didn't work out here, but I blame myself for that one.
Basically, the Bootstrap theme I chose required some font awesome characters. I tried CDNs, changed up script and style loading order so Font Awesome loaded early, and pretty much everything here. Alas, no avail. PNGs it is. Again, I think we're pretty far off from best practices here.
8. Stitching Up Frankenstein
Ok, at this point I think I've got things ready to go. Time to stitch it all up and fire it all off.
The first noticeable thing is how long it takes Tag Manager to publish the changes. I think it's fair to say that's forgiveable considering the circumstances.
Time to open it up and see what happens...
Check it out and see for yourself.
9. Holy Cow
It actually worked. Just 8 steps and we have a website entirely based off of Tag Manager.
It's hard to say how I feel. I think it's somewhere between pride and shame. But hey, I'll take it.
It's also hard to say what, if anything, I can learn from this. Testing the limits of Tag Manager? Maybe. Improving my actual skills? Not likely.
But ultimately, it was fun, and I think I can say successful, and what more can you ask?