The amount of data that can be gleamed form your traffic is incredible. Includes active users and breaks this down per page. GA4 is not as easy reporting as UA but still amazing.
Use GA4 only instead of older version of UA as this becomes obsolete starting July 1, 2023.
Add multiple websites under one Gmail address or account (Each Analytics account can have up to 2,000 properties as of June 2023 and each property can have up to 25 views.).
Login to your account at analytics.google.com and got to Admin and “Create a new property” by answering some simple questions. You ultimately want to 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, Next.js, Typescript, etc. but all are fairly simple.
Do not 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 their own account and property name and either add the developer as a user or just forward the “gtag” along.
Most recent setup I followed the process described here and here.
For Typescript (and production-only tracking) I used this article here to solve some of the following TS warnings but this article proved to be a similar but implementation that did not require install a “@types/gtag.js package”:
1.) parameter “url” implicitly has “any” type
2.) property gtag does not exist on type “Window && typeof globalThis.”
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 “with-google analytics” example. There is a “with-google-tag-manager” example project as well.
In the README for the later it says “This example shows how to use Next.js along with Google Tag Manager. A “pages/_document.js” file is used to inject base code. The “pages/_app.js” file is used to track route changes and send page views to Google Tag Manager.
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.
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.
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.
What about a full stack app using Express with EJS templates? Just put the code in “Header template” and Google handles the rest? Can add events to buttons as well.
Read this article from heroku on application metrics
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:
By Analytics Mania here
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.
You can set up a filter to only get data from your domain.
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.