Disclaimer: I’m a Hugo, Analytics and Blogging n00b

Being the Hugo and Analytics n00b that I am, I found that hooking up my site to Google Analytics took a bit more work than I expected. The last iteration of my blog, powered by WordPress and hosted by Bluehost enabled me to easily associate a Google Analytics (3) tracking ID with my site. All I had to do was sign up for a Google Analytics account, add my domain to the service and - via a WordPress plugin like MonsterInsights - add my tracking ID so that visitor traffic was tracked on each page of my blog.

WordPress Plugins made it easy, but Hugo is much more lighter-weight and I found myself scratching my head how to track traffic on this new site.

First things first - finding my tracking ID

After I had registered my stevebrown.io domain and had the blog hosted on Azure, I immediately turned to Google Analytics to hook up my new domain to my Google Analytics account. I used the new Google Analytics 4 (GA4) platform because I assumed it would provide me a better experience in the long-run and enable me to leverage new capabilities within the platform as soon as it was available.

However, Google Analytics 4 doesn’t provide tracking IDs anymore. Thankfully, the folks over at analyticshelp.io provided an awesome write-up on how to use Measurement IDs in Data Streams. This article pointed me in the direction of my Measurement ID, which I thought was going to function similar to the old GA-XXXXXXXXX IDs. The theme that I am using for my blog enables users to define a Google Analytics (3) tracking ID in the site’s config file. I thought “cool, I’ll put the measurement ID there and should be all set”.

Wrong.

Adding the Global Script Tag in GA4 to my Pages

After a few hours I still wasn’t seeing any traffic flow into Google Analytics. I dug back into the “Data Streams” portion of Google Analytics and now noticed the “Tagging Instructions” section. I don’t know if it wasn’t there or if I just glossed over it previously, but it clearly provides instructions on how to embed the GA global script tag into your page(s).

The code looks like so:

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

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

You’d obviously replace “G-XXXXXXXXXX” with your Measurement ID value.

The way that my blog’s theme is configured (maybe all Hugo sites are this way… again, I’m a n00b), the site layouts are comprised of a number of “partials” that are used to construct each page. Knowing the global script needed to be rendered as part of each page, I navigated to my “header” partial and added the code block to the bottom.

Voila!

Each page’s traffic began flowing into Google Analytics, and I was proud myself :)

One “Gotchya” So Far

One thing I have noticed thus far is that Google Analytics appears to be counting my personal views on my local server. For example, ahead of posting this blog publically, I viewed the page a few times on my local server. When I published the blog to my website, I noticed that the page view count was already at 4 (roughly the number of times I refreshed the page locally).

I’ll have to dig into this. I guess it makes sense that the script in the tag is still sending data to Google Analytics even if the post is being rendered via localhost. How to avoid that from happening and scewing my metrics though…

Better / More Efficient Approaches?

If you know of any techniques or approaches that are more efficient then what I described, I’d love to know! This site is not only a way for me to share my findings and opinions, but it’s also a chance for me to learn a new technology. Please don’t hesistate to reach out via Twitter or email if you have suggestions. Thanks!