How to add Google Tag Manager to a Hugo static website
In this article I will provide a step-by-step instruction and code samples on how to implement Google Tag Manager and a datalayer to your Hugo static website. As a digital analytics consultant I can appreciate the value a good Google Tag Manager (GTM) implementation can have for your business or even to optimize your user’s blog experience.
How to add the standard Google Tag Manager container to a Hugo website
To make sure that Google Tag Manager is enabled, we will have to include the Google Tag Manager container. This is a piece of standard javascript that allows us to start using Google Tag Manager on our website in the most basic sense. This javascript tracking code will be included in the head section of the website and a small iframe version of the snippet will be included right after the opening body tag. The iframe version allows us to enable basic Google Tag Manager functionalities on browsers that don’t have javascript enabled.
Read MoreHugo shortcode to serve images in next-gen formats
Hugo shortcode to serve images in next-gen formats
In my last blogpost I shared 10 ways to improve your Hugo website performance. My last tip was to serve images in next-gen formats. This could improve the performance of your website significantly. Eventhough there are multiple next-gen formats you can integrate, the best browser compatibility will come by using WebP, created by Google. Unfortunately, not all browsers support this format yet (looking at you, Safari!). To make sure you will serve an alternative, normal format like jpg or png instead for those non-compatible browsers, you need to update the way you serve your images and provide both formats.
Read More10 Ways to improve your (Hugo) website performance
10 Ways to improve your (Hugo) website performance
Website performance matters. Even if I would selfishly ignore all other human visitors to my website, I would be supporting Google’s mission to make the web faster and help myself climb the ranks of Google. In this article I describe 10 ways to make your Hugo website (or any other website) faster and give users a better experience.
These are the 10 tips I will be discussing:
Read MoreOptimizing the Youtube Shortcode for Hugo
How to optimize the Youtube Shortcode for Hugo
The Youtube embed shortcode for Hugo allows you to embed Youtube videos in your Hugo pages. Which is a pretty neat feature they provide to you out-of-the-box. The shortcode allows you to add two additional parameters that can be managed from the standard settings:
- Unique Youtube video ID
- allowfullscreen (which you can set to “true”, which allows users to show the video in full screen mode)
However, there are a ton of additional parameters you can include to customize your Youtube video embed. You can find a full list of all the embed parameters on the Youtube developers website.
Read MoreWhy I moved my personal blog from Wordpress to Hugo
Why I moved my personal blog from Wordpress to Hugo
It was one of those rare moments in my freelance career when I had some extra time on my hands. Eager to work on a website and tinker with some code. I was looking at my personal website (which you’re on right now). It was still built on Wordpress, with a basic theme and some useful features. In reality, I wasn’t using much of the power that Wordpress holds. I didn’t use many of the extensions and plugins available and hardly any of the other features that were running on my website. Despite me not using the features, the website was pretty heavy on css and javascript libraries. Just a waste of bandwith and performance.
Read More