Appearance

Client A/B redirect ​

Sometimes you may want to run an experiment to determine which version of your landing page performs better. In such cases, Widged can help you run an A/B test.

In this article, we’ll build a widget for client-side A/B redirects that will:

  • detect when a user lands on the page;
  • assign the user to a group based on the defined distribution;
  • redirect them if they are in a test group.

INFO

This action of changing users' location is not a classic redirect (HTTP 3xx code) in the traditional sense. However, it can be a quick and effective solution for testing a hypothesis.

As always, we’ll start with an entrypoint node. Let’s add the standard UTM parameters and advertising parameters from various services.

image

Right after the entrypoint, we’ll add an A/B Testing node.

image

Configure the distribution to 30 / 70, where 30% of users are redirected to the new page and the remaining 70% stay on the current page.

Also enable the sticky option so users “stick to their group” (i.e., on subsequent visits they are assigned to the same group).

image

We can also add conditional redirects by inserting a condition node. For example, if we don’t want leads with certain UTM parameters to participate in the experiment at all. In that case, we would simply place a condition node right before the A/B Testing node — but we’ll leave that outside the scope of this recipe.

We could add a collect node right after the A/B Testing node to gather data, but caution is needed.

WARNING

In this setup, data would be collected for every visitor, which could quickly consume your operations quota.

In fact, in this case a collect node is probably unnecessary — since the redirect node will already generate an event. You can then use the Results tab in Studio or the API to track users and the groups they were assigned to via these events.

The sessions for the first group will look like this:

shown -> finished

The sessions for the second group will look like this:

shown -> redirected -> finished

For redirect we need to configure the redirect URL. For example, let’s include the test group parameter and the current page URL so that on the target page we can be sure where the user came from. We can use the 1.page_url context value for this, but it cannot be inserted directly into the URL because it contains characters that are not valid in a URL.

If we insert it directly, the URL would look like this:

https://page-redirect-to.com/?from_url=https://page-redirect-from.com

This may cause issues in browsers, so we need to use URL encoding. To do this, we’ll use a function node:

image

Now let’s add the required transformation:

image

And now our URL will look like this, and we can safely use it in the redirect URL:

https://page-redirect-to.com/?from_url=https%3A%2F%2Fpage-redirect-from.com

Now let’s add a redirect node.

image

And configure the URL for the redirect:

image

Let’s also enable replace location so that the user cannot navigate back to the page they originally landed on.

Done — we’ve built a fully functional A/B redirect for our page. 🎉 Note that this flow contains no operations, which means it will be free for you to run!

Since this script runs in the browser and doesn't have some UI, here are some recommendations to improve the user experience:

  • Place the <widged-element> as high as possible in the <body>.
  • Use the pixel option so the widget does not display the standard interface (loading / error);