I get ask “How do you install Google Analytics using Google Tag Manager” a lot (and by a lot, I mean, I have literally I never been asked that question before, but for the sake of this article, I’m going to pretend my inbox is flooded with this exact question).
Nonetheless I have never particular liked using a plugin to setup Google Analytics (interchangeably referred to as “GA” in this blog). I have done it. In fact, I have done it on almost every one of the hundred or so sites I’ve built mostly using the Monster Insights plugin or the Google Analytics plugin by ShareThis. And they both work fine. That is, they install, they have never broken one of my sites, they are pretty easy to use, but still, I always felt kinda…guilty for using them because inside I knew there had to be a better and arguably more professional way to do it (and by that I do not mean simply pasting the GA tracking codes manually. That is, after all, what the plugins do).
Pasting the GA code, too, while straightforward, still felt clunky because it didn’t seem like it offered anything really Google-y or Gordon Ramsay-ish to take not just improve the GA deployment options, but to actually double in stepping up my analytics game. And it’s that latter pursuit, of stepping up my analytics game, which led me to purchase and read Google Analytics Breakthrough : From Zero to Business Impact (not an affiliate link, just a good old fashioned +1 for a book I really do recommend) where the authors did something I had never heard of – they pushed the GA tracking code down via another Google product called Tag Manager (interchangeably referred to as “GTM” in this blog).
So alongside drooling over their play by play chapter, I googled it and watched a few videos and knew I’d finally found something I had actually been missing and did not know it. Because getting your hands in the GTM game can change the way you deliver your service and open opportunities to easily tie value driven metrics into the hands of those paying you for it. Like the 10 listed in this Medium article from 2014 (…ugh…I feel so empty inside that I’m just now discovering this…)
What is Google Tag Manager?
“Google Tag Manager is a tag management system that allows you to quickly and easily update tags and code snippets on your website or mobile app, such as those intended for traffic analysis and marketing optimization…”
..you know, I get that writing a lengthy intro about what GTM is helps with SEO and boosting this page, but, c’mon, man….ain’t nobody got time for that. You know who reads my blog posts? Techies. So here is a the official Google Tag Manager page link : https://support.google.com/tagmanager/answer/6102821?hl=en where you can read the rest of the intro sentence I copied from that page…
How Do You Get Started with Google Tag Manager
Step 1 – Build a website using WordPress and Divi. (While neither are in any way requirements for using GA or GTM, the section later when I show how I paste the GTM codes into the site will be the Divi Integrations area so…yea…)
Step 2 – Create an analytics account using https://analytics.google.com/analytics/web/
Step 3 – Create a tag manager account for the website using https://tagmanager.google.com
Step 4 – Create a tag
Step 5 – Test (optional, but recommended)
A Little More Detail on Setting up GTM Please
I’m gonna skip Step 1 and Step 2 and jump straight into some screen shots and ghetto analogies for Step 3, using GTM itself.
In this case, the site I built and was adding the tracking code was a non profit organization in San Antonio that heavily uses data to guide their efforts in helping students from Kinder to adulthood: P16 Plus of Greater Bexar County (https://p16plus.org/). I disclaim that here for two reasons: its less I have to hide in these screen grabs and my site is a DA30 so throwing in their link gives them a little SEO loving.
So I went to tagmanager.google and created what GTM refers to as a Workspace and after doing so, it prompted an overlay with (2) pieces of code that must be put on the site (similar to installing GA manually). One in the head and one in the body.
Install Google Tag Manager on Your Site
Which I went over to Divi’s Theme Options area and clicked the Integration tab and pasted verbatim and respectively:
And that’s it for getting GTM and your Divi site communicating and is where ghetto analogy one comes in. by adding these two pieces of code to your site, you’ve effectively created a tunnel between your site and your Google Tag Manager account from which you can send (push) down tags (or code snippets) to your site from one location. At this point you have effectively centralized where you can add code to your site. Even if you never ever push another piece of code, you can memorize this next sentence and use it at parties to be a techie baller.
“Oh, yea, I use GTM’s centralized triggering framework to fire code snippets down from the magical cloud to track and measure pretty much anything on my client’s sites.”
Then pull some wadded up cash out of your pocket and you’re guaranteed to win all the ladies over.
Create the GA Tag
Ok, so once that’s done, you have to setup the actual tag. Here is an image of what it looks like with the tag in place (what yours will look like when done):
Next create a tag (click on Tags in the left and then the uniquely red new button) and you’ll be presented with an overlay screen that looks like this:
I generally give the tag the name of the site + GA so in this case P16Plus GA, which tells me this tag is pushing the GA tracking code down to the site.
Next click the Tag Configuration box (the entire thing is a button…Google is so thoughtful like that) and another overlay will show up and from it select Universal Analytics.
Leave the default Page View in the first drop down then check the ‘Enable overriding settings in this tag’ box and key in the Tracking ID from your Google Analytics Profile. If you don’t know how to do that, hover over the question mark and Google will have a link to this page (because they are thoughtful like that).
When done, you’ll have something that looks like this:
Technically, I haven’t discussed the Triggering section, so let’s do that now…
Similar to the Tag Configuration box, the Triggering box is one big button. Click it and you’ll get an overlay and in this case there is only one Trigger option – All Pages. Click it.
And then click the blue Save button in the top right.
Boom. You just (almost) leveled up your analytics game by pushing the GA code down via GTM.
Next step is to either Preview or Publish. The preview feature is pretty gangster, though, so if this is your first time, I highly recommend it. Press it and Google does some magic with your browser and you can view your site and see what tags fire.
Here is how my screen looks in Preview mode:
Then if I visit the site I’m working on in a new window (or refresh a current one) something similar to the developer console area of Chrome automatically opens and you can see if your tag fired. If it did, all that is left is to Publish your changes!
Here is an unordered list of thing to recap this blog:
- Reputable Analytics plugins by and large work fine
- Google Tag Manager is a big step forward in centralizing code snippets
- GTM can be used to push down GA tracking code which means no need for a plugin
- GTM knowledge (and lots of cash) can up your social life (mostly cash, though…)
Until next time, level up.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Mate, this is a good read. And thanks for adding gifs, you are so thoughtful like that : )
haha! Thanks! Me and Google. 🙂 Made my day that someone actually read my stuff! 🙂
Thank you for this!
Logan, the body tag code is constantly breaking my site!! I had to remove it, which I’m sure will affect my Google Analytics integration. Any reason why the body tag would break Divi?
Hmmm…I haven’t had this happen on a site, yet. Running a child theme? Latest version of everything? To answer your question, sadly I don’t know of a reason, but my best guess is it’s breaking because of a syntax issue, an extra parentheses or bracket or something, that may be coming from something in your child theme(?) assuming your running one.
Dude, congrats…an article about Google Tag Manager had me spraying milk-through-nostrils laughing. Thanks for the info and love the gifs. (Especially the math one.) I doff my hat to you, fine sir.