Landing page AB testing with Hugo

Hi,

We are currently evaluating our options to run AB testing with Hugo (test two versions of the landing page at the same time, so we can directly compare the efficiency of the two designs).

Has anybody done it with a Hugo site? If yes, do you have any tips for us?

So, that’s a “no?”

This is usually handled outside of hugo-land. For example, say your host is netlify, then they offer “split testing”, which let’s you divide your site traffic to different deploys. Each deploy would correspond to a git branch, presumably.

1 Like

That’s interesting. Thanks. I’m on Forestry.io now, but that may be useful enough to switch.

You don’t need to leave Forestry. Netlify and Netlify CMS are two different services.

Now the branching is problematic as your content will have to be commited to one branch and not both. So anything edited from branch A will not be added to Branch B so you’ll have your Site A and B potentially displaying a different content.
I would create an extra html output format for the home page with a dedicated layout.

Now you have /index.html and /index.b.html On the same branch.

You would still have to find Way to split visitors between default file and b file. But Netlify being an intermediary iam sure there is a way to rewrite Permalink for some.

I’m trying to understand what you mean by this. What would keep him from having two branches, one with A changes and one with B changes?

(I’m running under the assumption that his whole site is in git)

In the context of a client editor using Forestry or another cms (Forestry has been mentioned).

Client’s Forestry is hooked to one branch and one chanch only. How to make sure clients edits are committed to both branches.

Ah I see what you mean now. Yeah guess it depends on tech saviness of user(s)

This is one of the considerations I was hoping to get some advice on. I can see a few different ways of presenting multiple versions of the same content - but how do I do that without repeating myself, and while still keeping the content the same.

I guess my single.html template can access any range of content, regardless of which actual directory it’s under.

I tested the AB feature in Netlify some time ago on the gohugo.io site.

It was really easy to use. What I struggled with was how to get it to play ball with Google Analytics. Because you will typically create one or more additional branches with some variations, and then let them run for a while. But then you want to compare the results, typically by comparing some click numbers in GA. To cut a long story short, here is a GA tag that works nicely with Netlify:

To end that story: Me and @budparr tested out a variant of the sponsor banners on the front page. I let it run for a week, but both variants had almost the same amount of clicks – so we kept the prettiest…

2 Likes

Google Optimize is the best A/B testing solution for Hugo sites in my opinion. I had the same concerns so I did some research.

If the GA tracking code is already installed on your site, all you need to do is create an Optimize account, add the Optimize tracking code to your <head>, and link it to your GA property.

Or you can use Google Tag Manager if you don’t want to install an additional tracking code.

All your testing variants are created in the GO visual editor so you don’t need to worry about duplicate code, branching or any kind of server-side A/B testing. Plus it passes your data to Google Analytics.

It’s all done client-side with JS via Optimize.

1 Like