How To Use Netlify Split Testing Based on a Condition?

Hello everyone, newbie here

I started using Netlify to host a static website and I really like the performance.

I’m not a techy guy, I was just using the manual deployment but I will see how to use the automatic deployment from GitHub. And maybe I will use Hugo as it seems a little bit easier for me.

What I need to try now is the split testing feature, I read that we can split the traffic randomly on multiple GitHub branches (I have never used GitHub :disappointed_relieved: ).

But what I need to do is instead of splitting the traffic randomly on different versions, I want to split the traffic based on conditions. for example, users coming from Facebook will see the site color in blue, users from Pinterest will see the site in red, and other users (who didn’t meet any condition) will see the default version (maybe based on document.referrer?).

Is this can be done with Netlify split testing? Or is there another way of doing this?

Thank you.

1 Like

Hi @Jawad,

Thanks for reaching out! Welcome to the Netlify Support Forums.

I found this article that may help with setting up Split Testing based on the users nf_ab.

Information about the nf_ab cookie can be found here in our docs:

We set a cookie called nf_ab to ensure that the same visitor always gets the same branch. By default, the value of the cookie is a random number between zero and one and is configured out of the box to ensure that your site visitors have a consistent experience. If you’d like your visitors to manually opt in to a split test, you can also use client-side JavaScript to manually set the value of the nf_ab cookie to a branch name, which Netlify’s CDN will read and serve accordingly.

Let us know if you have any questions.

1 Like

Hi @Melvin, thank you for your reply.

I read the article and what I understood is that the nf_ab cookie is used to serve the same branch that has been visited the first time by the users.

I saw the first option about opt-in beta and it looks great, but unfortunately, it’s not useful for my case.

What I want is to serve different content to users but based on document.referrer and Netlify will use the nf_ab cookie to serve the same branch whenever they come back.

Is it possible to determine which branch to serve based on document.referrer, instead of it served randomly?

I’m sorry I don’t know the correct vocabulary for this, I hope you get what I mean.

Thank you.

No, it’s not possible to use referrer. You can use Edge Functions to achieve what you need and write custom code to get this done.

2 Likes

Thank you @hrishikesh for the reply.

I took a look at Edge Functions docs and this video from the Netlify channel and what I understood is that Edge Functions are making modifications to the HTML based on request headers (I think ).

I also looked in the rewrite with Edge Functions demo, but instead of serving the content from another URL, is it possible to rewrite the content from another branch? of course only when the traffic source condition is met.

I looked online for a similar use case as mine and didn’t find any.

Isn’t there any simple way to set a condition in order to serve the branch for specific users using Netlify Edge Functions?

For example, a user from Facebook will see branch A, and others will see branch B.

I know I didn’t give the best example, sorry for that.

What do you mean by simple @Jawad??

Edge Functions support the Fetch API (among many other Web APIs) so you could fetch another branch and serve it dependant on the referrer header or some other condition.

1 Like

I meant something reaaaaally simple like copying a code to a file and that’s it, because I don’t know javascript or programming in general :frowning:. Maybe it’s time for me to learn coding.

At least I’m happy that it’s possible, maybe I will see a freelancer from Upwork to do this for me later.

Thank you all for the replies.

Unfortunately (for you) that isn’t really an option in this case.

Sounds like a good avenue.

Even if you can find someone else to set things up, they will need tweaking, changing, maintaining over time. Better to have the ability to do these things yourself.

It’s not 100% guaranteed possible. I did a little testing, and got mixed results. But then, I rarely use Facebook and have never used Pinterest.

2 Likes

Hi @coelmay, thank you for making the test to see if this is working.

I just want to ask about what you meant by mixed results, do you mean like the traffic is served the wrong branch even if the condition is met? Or maybe getting the right branch but after the first page they getting the other branch?

Or maybe it’s something else? I just want to understand.

Thank you.

1 Like

I mean that locally things seemed to work okay, but in production the functions failed due (if I recall correctly) a recursion error. (I have deleted the test site I created.)

1 Like

Thanks for all the info you have shared, @coelmay :netliconfetti:

@Jawad, good luck in your coding journey :raised_hands:

2 Likes