Here are the tools you’re going to need to perform the task. It’s essentially the same set of tools for any HTML / CSS / jS front end work coupled with some Google properties. If your website requires an FTP uploader, GitHub, or the like, you’ll need that as well.
Requirements
- Your Google account
- Place to store the passwords for yourself
- Place to store the passwords for the client
- Logins to the website
- Client info for backup & recovery: email, phone. I’d use this new Google Account for it, and forward the Gmail to your webmaster account :-). PS: Use your webmaster email as the backup email, but you probably knew that already.
- Text documents / code editor to store copies of the Google Analytics UA number and a copy of the Google Tag Manager container code. Keeps the code cleaned of markup shit.
- Google Tag Assistant extension in Google Chrome
The tasklist for today’s best practices to add Google Analytics to a website. Probably.
- Set up a Google Account for the web property
- Log into Google Analytics with web property’s Google Account
- Set up a Google Analytics profile for the web property
- Set up a Duplicate Google Analytics view for the profile. Best practice: always leave a raw, unfiltered copy of the profile running in case someone messes something up. Data only flows in one direction.. You don’t want to lose it.
- Copy the Google Analytics profile’s UA number in a separate text doc / code editor.
- Make a copy of the standard view for Google Analytics. It will serve as the raw data backup for the profile.
- Log into Google Tag Manager with the new web property’s Google Account
- Set up a Container for the Web Property. Place a copy of the container code in a separate text document
- Make a Google Analytics tag
- Make backups of the Web Property where the work is to be performed (header.php file (WordPress), or accompanying template / layout.
“What about a Google Tag Manager WordPress plugin?”
Well, if you can find one that an author keeps updated, go for it. Otherwise, get ready to get a little code-messy. (Trust me. I’m hoping the moment I publish this I find out Yoast updated their Google Analytics plugin to accommodate this. Until then).
- Copy the Google Tag Manager Container code and place it on the website just after the opening body tag.
- Upload the files and perform a view source of the site in a web browser to confirm the container code is directly below the opening body tag and is not breaking shit.
- Check Google Tag Assistant in Google Chrome to make sure the container and tag are operating properly. If there is an issue, the Tag Assistant will tell you what it is.
- Cross browser test: Check the site in IE, Chrome, FireFox, and Safari at desktop, tablet, and mobile widths (Google Chrome Dev Tools is great for this) to make sure nothing is broken.
- Take a bow.
When I normally have to do this…
When I have to set up Google Analytics codes, I typically set it up as a third party on behalf of another: an agency for a client / customer, agency on behalf of another agency for a client / customer. When I write this task, I do so as someone who has to look into the future, the deep future, and consider the full life cycle of the tools.
The task’s explanation vomit for stuff that isn’t easily explained by Google when you set up.
Using best practices set up a Google Analytics code.
Assumptions
I write this assuming that Google Tag Manager has not yet been installed on the site. If it is, then you can skip a few of the “backup” steps and go straight to set-up Google Analytics UA number in Google Tag Manager.
Hope for WordPressers
As previously stated, I hope that Yoast decides to go ahead an make a plugin for this, because they’ll at least keep the plugin updated. No one else is right now.
Setup Phase in detail
- Set up a Google account profile for the client / website: Within this you’ll also want to set up the following for use later on in this task:
- Google Tag Manager: You’ll be installing this into the web property – unless it is already installed on the website. If so, you’ll need access to this account.
- Google Voice: You’ll be wanting to use this as the default phone number
- Gmail: you’ll want to forward this email to the Webmaster account, still
“Why do we need another Google account? “
It’s typically considered a best practice to set a Google account for every web property, even though Google Analytics account can set up to 100 profiles. Initially, 100 properties sounds like a lot, but once a company starts conducting tests and experiments, those 100 properties start to get used up quickly.
The other reason is that while the client plans on having their property indefinitely, the truth is that properties get bought and sold, either as an asset or as part of mergers. You’re going to want to be able to pass off the data seamlessly. There are less headaches this way.
Don’t worry. While a Google account can set up to 100 profiles, it can be given profile permissions to an infinite amount of profiles from other Google accounts. This means you can set up a Google account specifically for the profile and then add your profile as an admin, and put in as many profiles over 100 as you’ll need.
- Make a backup of the website : Any time you’re going to access / upload / append / manipulate website code, you want to first make a backup of the files you’re going to work on. This way, if you jack something up and break the site, you can install the backups. Yes, yes. WordPress has version, as does managed WordPress systems such as Pagely, WP Engine…Make a backup all the same, even with daily websites. You never know who did what on the website – even if it was the hosting company doing code updates.
- Make a backup of the files you’re going to work on: It beats having to upload and download the whole website every time you make and test a change.
Installations (assuming Google Tag Manager is not installed)
Back in the day, the best practice was to place Google Analytics directly onto the code. It used to be below the closing body tag. Then it was directly above the opening body tag.
Now, they want you to use Google Tag Manager, placing the Google Tag Manager code directly after the tag. It’s cool because then you can place all the javaScript codes you need in there and place them wherever you want in the site and never have to touch the code again. It’s perfect for that one intern that’s destined to fuck it up because his uncle is CTO and will never punish him.
- Set Google Tag Manager directly underneath the opening body tag on the website.
- Set a Google Analytics Tag in Google Tag Manager, using the web property’s UA number.
Make a backup of the Web Property
Possibly speaking from experience, you don’t want to be the the developers track down and decide you’re the one who shut down a couple hundred sites because you accidentally dragged a folder into another folder. Make backups so if you jack this up, you’ll be able to at least quickly get everything back to where it was before you started it.
Questions? Let me know.
If it’s website specific, message me.