Measuring Traffic with Google Analytics


Hosting/Deployment

Updated Jun 2nd, 2022

GA4 only instead of older version (UA was previous version)

Seems very powerful given all of the reporting and the ability to use on events as well as pages, (For example: analytics on a button click). Add multiple websites under one Gmail address or account (The max number of properties looks like it’s about 100 as of August 2021).

Essentially generate a new property and get the “gtag” which goes into the “head” tag on every page of your site. There are some slight variations to the implementation whether using WordPress, NextJS, Typescript, etc. but fairly simple.

Accounts and Properties

Don’t create a new account for each website, I prefer one main account and each website is a new property inside that account. Not sure if any issues here on changing later or selling one of these sites down the road? For client work, It is best for them to set up an account and property name and either add the developer as a user or just forward the “gtag” along.

Next.js

most recent setup I followed the process described here and here. For Typescript (and production-only tracking) I used this article here solves the TS warnings: 1.) parameter “url” implicitly has “any” type and 2.) property gtag does not exist on type “Window && typeof globalThis.” I still had a TS warning though so used this article to solve for ‘the argument of type “config” is not assignable to the type “consent”‘ warning. The variable needed to be an empty string instead of undefined. From the article:

“Next, create a root lib directory and an analytics.ts file therein. It is important to handle your measurement id environmental variable as a conditionally undefined string (process.env.* values always resolve to string | undefined)”

Here is for Next and as a bonus shows how to add Google Adsense.

Go to Vercel GitHub and take a look at the google analytics example project. Note there is a tag-manager option as well. In the readme it says you essentially just use a custom _document is used to inject tracking snippet and track pageviews and event.

Use this as a guide but here are the basic steps.

Create a GA property. He creates a UA property and not a GA4 property. Uses the Tracking ID and not the listed the gtag code. He uses the code from the repo instead. You do this for three files, a “gtag.js” file (in a lib folder), and in the “_document.js” file and the “_app.js” file, both in the pages directory. The “_document.js” file is what already contains the code from the GA page. So we create a variable in “lib/gtag.js” and it is imported and used in these other two files. Should we use ENV variables?

To set up AdSense we only need to add one line, a script tag just inside the “Head” in the “_document.js” file which is loaded for every page.

Here is another video that also uses the repo above but also shows how to add a custom event. Also uses a GA4 ID so it’s good to see the process is the same for each property method.

To create the event create a simple button on a page in the JSX. Define an event handler for it. Import the “lib/gtag.js” file. Call the event function on “gtag” and pass it an object with a few properties as seen in the “gtag.js” file.

This is awesome!

Note: Next also has it’s own Next.js analytics. Lee Robinson video here. Has nice UI and has per-page data for core web vitals to get a “real-experience” score that gauges overall site health and tracks over time. Largest contentful paint, Cumulative layout shift, etc. Can we use this Analytics features if we are deploying to non-vercel server? Yes, as long as you’re on a paid Vercel plan. Revisit this concept later.

React.js

In create-react-app it sounds like you need a bit more configuration since it is a SPA. I saw a “react-ga” library being used in which you use the tracking ID inside a “useEffect.”

// install react-ga --save
import ReactGA from "react-ga"
import { useEffect } from "react"
// inside of component
useEffect(() => {
  ReactGa.initialize('TRACKING_ID_#_HERE')
    ReactGA.pageview('/')
}, [])
// when using router instead of "/" in the code above use:
(window.location.pathname + window.location.search)

There was also a look at gathering analytics data for a button click using the events abilities to see data in the events page.

// import ReactGa
// in the click handler function something like:
ReactGa.event({
  category: 'Button',
  action: 'Click the button from the first page'
})

Configuring With WP

From “livingwithpixels” here.

Note: For developers/designers/agencies, even though the max-site list is ~100, for a simpler transfer for a future client breakup/exit/departure, you probably want the client to set this up and add you as a user. Probably a good time to set up re-captcha too (separate post on that here) and google search console.

Go to analytics.google.com and create an account, or log in to an existing GA account, then create a new GA4 property for your site. The URL of your site (without the https://www prefix is fine). Use your personal email for site. There is a tracking ID and a Global Site Tag Script (which contains the tracking id). Alternatively we could use google tag manager but I’ll leave that aside for now.

We ultimately want to copy the “gtag” code and paste this into the “head” section of our html.

Before leaving the google analytics site be sure to add the developer as a user, or just send them the code snippet.

Adding the “gtag” code snippet to a WordPress site you have three options

1.) Use a plugin (like their own “optinmonster”) 2.) Use a header/footer code plugin, and 3.) Manually put in the theme files (no-plugin). If you put the code in the header using option 2 or 3 Google just magically handles the rest.

And that’s that. You can then visit the google analytics dashboard to get all the data you could ever want. They have a mobile app which is cool. You can also install a WordPress plugin to display a summary right in your dashboard, which is a simple way for a WordPress admin to quickly see stats.

Server Side Heroku

What about Node with EJS templates? Just put in Header template and Google handles the rest? Can add events to buttons as well.

Read this article from heroku on application metrics

Loves Data Video

Watch it here.

Add account name after business name.

Add a property. A GA4 property is the latest version of GA. The other is universal analytics which is the previous version.

Property name is the name of your particular website with no URL. (Loves Data Website). Still a good idea to create a Universal Analytics UA property.

Add name of website URL with www.prefix

Keep “create both” radio button selected and “enable enhance measurement” checked.

Enhanced measurement will track a range of important actions taking place on your website. People scrolling, clicking outbound links, downloading files, watching embedded YouTube videos, site search, etc.

In the admin dashboard we have a top level folder and the property on the right hand side. There is a dropdown for each type, GA4 and UA.

The data stream is very important for GA4 properties. This is the tracking code that we add to our website.

measurement id – unique ID for data stream

stream id – not discussed

Two options to add GA to your site, the Global Site Tag or the Google Tag Manager.

Global site tag (gtag.js) Use this if you’re using a website builder or CMS-hosted site

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_ID_HERE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_TAG_HERE');
</script>

Google Tag Manager: From their website:

Google Tag ManagerAdd and maintain tags through a web interface to send data to Google Analytics, as well as other Google and non-Google tools.

Our free tool Google Tag Manager can help you add tags to your site if you have many analytics and marketing tags.

Consider using Google Tag Manager if you:

Reports within GA4 versus UA

There are less standard reports but more customizable reporting opportunities. There’s a heavier influence from machine learning. There’s a map UI for real-time data and you can track random users as traveling through your website. This is borderline creepy.

UA Reporting

You have things like live data revenue details analytics intelligence geographic and time of day data devices used page visited This is all on the home report.

In real time reports you’ve got an overview which is always a good example with email campaigns You can see which pages users are coming in and leaving there’s also a content section which is useful for troubleshooting tracking within Google analytics So when a page shows up here you’re good and data’s being collected appropriately.

Under the audience section you’ve got an audience overview where you can see trends top-level details use a date range feature there’s also a behavior section which is pretty good.

Acquisition you have top-level statistics you also see how people are finding your site there’s also a search console which is kind of separate but you can see which Google searches people are using to find your site.

It’s also a behavior section which you can see what people are doing on your site which side content which landing pages etc.

UA Reporting

So there’s broad level topics like life cycle user reporting events explore configure.

In the event section there it’s totally different from UA. There is a different data model.

In the analytics section this is where you can visualize and report and create your own customer reports.

The audience section is where you can create your own audience.

Also in the configure section are custom definitions which is where you can you know register custom events This is a more advanced feature but I’m pretty sure as a developer this is where we’re talking about handling button click events.

There is a debug feature where you can kind of ensure all your setup is correct.

Google Tag Manager

This seems more like it’s its own beast It can be accessed at tag manager.google.com. It sounds like you can you know quickly add different tags to one main tag that disseminates these tags. Again sounds like a whole nother can of worms and we’re not getting into it now.

Some Thoughts

The amount of data that can be gleamed form your traffic is incredible. Includes active users and breaks this down per page. Amazing. The enhanced measurement is also just an incredible amount of data.

Here is Video on GA4 Reporting

See it here.

Protecting your Google Analytics ID

Since the ID is in your source code anybody can grab it and if anybody grabs it and puts it on a different property it will totally distort your data and there’s nothing you can do about it.

I need to find a way to protect this. Apparently you can set up a filter but I think this is for UA and I’m sure there is some sort of process for this in GA4.

What About Subdomains

Check out this article

I have two Next.js projects statically built using “next export” with one being a subdomain of the other. Do I just repeat the Next.js code in the subdomain?

Don’t create new property just go through same process related to the actual website files for subdomain as main domain.

Cookie Domain is a thing. Want the cookies in chrome dev tools application tab to show the subdomain. Seeing conflicting messages on this.

Configure/check the settings of cookieDomain parameter (set it to auto).

 You will need to add your main domain to the GA referral exclusion list. Go to GA Admin > Property Column > Tracking Info > Referral Exclusion List > Add Referral Exclusion. Enter your top domain there (if it isn’t there already).

Going to want to add a filter to modify the reports (optional). Implement the Show Full URL filter in the GA view. This way, you will see both the Domain and the Page Path in your reports.