Measuring Traffic with Google Analytics


Hosting/Deployment

Updated Aug 24th, 2021

Two major options UA (previous version) and the newer GA4. If creating a new site mind as well go with GA4.

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 accounts under one Gmail address (The max number of properties looks like it’s about 100 as of August 2021).

Link here from Google on installing using gtag immediately after the “head” tag on every page of your site.

Accounts and Properties

Create a new account for each website? I prefer one main account and each website is a new property inside that account. Issues here on changing later or selling one of these sites down the road?

Next.js

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” Channel

Go to analytics.google.com and create an account for every new website. 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. You can invite a client to the Google Analytics Account in Account->User Management.

Note: Given the max site list of 20 and the easy transfer for future client breakup you probably want the client to set this up and add you as a user.

From wpbeginner video:

WordPress has 3 options, 1.) Use a plugin (like their own “optinmonster”), 2.) Use a header/footer plugin, and 3.) put in the theme files (no-plugin). If you put in the header using option 2 or 3 does Google just handle the rest?

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.


Top