Outline#

• Setup GA on Google

• Hook GA into NextJS

• Google Search Console

• Adding a sitemap

• Google Tags

Set Up#

Ideally you have already setup the DNS on your website and have https:// set up on your website. You want this done before you start building a sitemap and telling google to index your website. You don't want to repeat the sitemap building and index just for the addition of https. It can take upto 24 hours for DNS changes to propogate.

So to begin: create a new google analytics account for your website. It is going to ask you for an account name and a property name. I use:

Account Name: name-of-website
Property Name: basic

Once you've created your google analytics account and inserted the url of your website you should arrive at a page that has a stream URL and a MeasurementID

GA-Measurement ID looks something like this G-FHQWHGADS123. Copy the Measurement ID because we are going to need it to hook into our Website.

Hook GA into NextJS#

Google provides you with the code to insert into your website. If you are creating your website with vanilla HTML and JS you would just stick this script at the top of your Headers.

If you are using NextJS you are going to want to stick this at the top of your headers in your _document file.

This insures that GA is hooked up to every page in NextJS, before the NextJS _app even renders.

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

  gtag('config', 'G-FHQWHGADS123');
</script>

If you are using our Web-Skeleton Boilerplate we already have this tag injected into the top of the __document.tsx All you have to do is add into your .env.local like so.

GA_ID='G-FHQWHGADS123'

Don't forget to set up your environment variables on Netlify/Vercel/your choice of hosting service.

Google Search Console#

Google Search Console is where you go to check if your webpages are being indexed or not. Generally Google will eventually index all of the pages of your website naturally via web crawlers, however if they haven't indexed your website you can tell them to do so manually.

Adding a sitemap#

If you want to jump start the process I recommend adding a sitemap to your website. You can have your sitemap generated externally or generate your own. You should make sure that the Canonical URLS you define in your website match the URLS in the sitemap.

There is a bit of an art to sitemaps as well. For NextJS Applications I generally keep the sitemap.xml in the /public folder, along with the robots.txt

Canonical URLS#

Canonical URLs are what tells google which URL is the source of a page. I.E. http:// vs https://. Or blog/post?setting-up-ga vs blog/setting-up-ga.

You can pick whichever you like, just make sure they match with your sitemap.

Google Tags#

What's the difference between google tags and Google Analytics? Well Google Analytics is a type of tag, one of many. And Google Tags is a Tag Manager, used for managing many different metrics. Google Analytics 4 is one such bundle of metrics.

I refuse to get into it with Google Tags right now, it is a deep rabbit hole. Simo Ahava currently maintains the golden standard of GTM and Web Core Vitals If you are so incined, his website has a 50+ page long manuscript of how to do GTM properly.