Relative URLs for Your Variation Pages

Content Experiments allows you to test different variations of your test page (also called the original page). The variations can be defined as absolute URLs or as relative URLs (where the original page is the base for their resolution). For example:

Absolute URLs:

Original page: http://mysite.example.com/landing.html

Variation 1: http://mysite.example.com/var1.html

Variation 2: http://mysite.example.com/var2.html

Relative URLs:

Original page: http://mysite.example.com/landing.html

Variation 1: /var1.html

Variation 2: /var2.html

Absolute URLs create a rigid format: no matter what the original page is, the variations are always going to be exactly one of the URLs you defined (e.g., http://mysite.example.com/var1.html or http://mysite.example.com/var2.html, except for some limited URL parameter propagation as described here).

Relative URLs offer more flexibility in defining the location of the variations. Content Experiments takes the concept of relative URLs as used in hyperlinks since the early days of HTML and applies it to the definition of variations. This means the variations may inherit parts of the original URL (e.g. the domain, the domain and path, etc.).

Using relative URLs doesn’t conflict with parameter propagation. Any parameter not specified in the variation is copied over from the original page at runtime.

Next, we will see a few examples showing how relative URLs are used to solve some common issues like HTTP-HTTPS sites, Multiple domain sites, Single-Page experiments and Multiple original pages.

How Relative URLs Work in Single-Page Experiments

You can create an experiment in which the variations are identified on the original page by defining them with relative URLs:

For example:

var1: ?var=1

var2: ?var=2

or

var1: #var=1

var2: #var=2

allows the experiment to run solely within landing.html

In this case, if you set up your experiment on the original page landing.html, then when the browser opens http://mysite.example.com/landing.html, you can redirect to:

http://mysite.example.com/landing.html?var=1

or

http://mysite.example.com/landing.html?var=2

In the case where we define the variations beginning with a fragment (#), you can redirect to:

http://mysite.example.com/landing.html#var=1

or

http://mysite.example.com/landing.html#var=2

How Relative URLs Work with Multiple Original Pages

Taking the previous example one step further, we can see how the use of relative URLs lets you easily run an experiment on a set of different original pages, and test visual alternatives across that group of pages (e.g., the product pages in an e-commerce site).

Suppose all products are located under http://shop.example.com/products/, and each product has its own page: tv.html, radio.html, washer.html, dryer.html.

Because the original page may in fact be a set of pages, and you would therefore place the experiment code on multiple pages, the use of relative URLs ensures that the variation pages are always correctly identified; for example:

var1: ?var=show-large-photo

var2: ?var=show-small-photo

In this case, if the browser opens http://shop.example.com/products/tv.html, then you can redirect to:

http://shop.example.com/products/tv.html?var=show-large-photo

or

http://shop.example.com/products/tv.html?var=show-small-photo.

If the browser opens http://shop.example.com/products/radio.html, then you can redirect to:

http://shop.example.com/products/radio.html?var=show-large-photo

or

http://shop.example.com/products/radio.html?var=show-small-photo

How Relative URLs Work in Multiple-Domain Experiments

If your site runs on several domains (e.g. .com, .fr, .ca), you track them all in the same view, and you want to run your experiment on all of those domains, then you may prefer using relative URLs; for example:

Variation 1: /var1.html

Variation 2: /var2.html

Assuming the experiment code is installed on landing.html, a user to:

http://mysite.example.com/landing.html to be redirected to http://mysite.example.com/var1.html

http://mysite.example.fr/landing.html to be redirected to http://mysite.example.fr/var1.html

http://mysite.example.ca/landing.html to be redirected to http://mysite.example.ca/var1.html

How to use Relative URLs in sites that serve secure and nonsecure pages

By defining variations that don’t include the scheme section (http: or https:), an experiment will correctly serve both users seeing the secure and nonsecure pages of the site:

Variation 1: //mysite.example.com/var1.html

Variation 2: //mysite.example.com/var2.html

Assuming the experiment code is installed on landing.html, a user coming to:

http://mysite.example.com/landing.html will be redirected to http://mysite.example.com/var1.html

or

http://mysite.example.com/var2.html

accordingly, a user coming to:

https://mysite.example.com/landing.html will be redirected to https://mysite.example.com/var1.html