Cloudflare

Setting up Traffic Splitting with Cloudflare

Setup

If you have a Cloudflare Pro plan or higher, the recommended way to implement traffic splitting is by using Cloudflare Snippets. Merchants on the Cloudflare Free plan can achieve the same by creating and deploying a Cloudflare Worker to route traffic between the Glopal Proxy and your service origin.

To use either a Worker or a Snippet rule, Cloudflare CDN must be enabled on the target domain. You can verify this by checking that the Proxied status (orange cloud icon) is active for your target site record under DNS settings. If your target domain is not currently proxied, please contact Glopal for further instructions.

When setting up traffic splitting with Cloudflare, the CDN will automatically be enabled in front of all Glopal localized sites. Depending on your setup, you may be asked to provide the True Origin of your current domain. Setting up traffic splitting using a Snippet or Worker does not require changing your site’s Encryption Mode in Cloudflare.

Snippet Rule (Cloudflare Pro and up)

Availability and pricing

If you are on Cloudflare’s Pro plan or greater for your target domain, traffic splitting can be implemented using a Cloudflare Snippets Rule. Compared to Workers, Snippets are lightway option to adjust CDN behavior. Snippets are included in your existing paid zone plan.

Create a Snippet

1. Log in to the Cloudflare dashboard and select your target domain.

2. Select Rules > Snippets, then click [Create Snippet] button.

This will open the editor where you can write and deploy your Snippet script. In the editor, you'll find a pre-filled script; delete it.

1. Enter the name of your snippet, e.g. "GlopalTrafficSplit".

2. Copy the following script and Paste it into the Snippet editor.

3. Make sure to replace GLOPAL_HOSTNAME placeholder with the value you receive from Glopal (for example store-1234.app.glopalstore.com) and that PATTERN is a regular expression describing list of in-scope paths you want to delegate to Glopal.

snippet.js

const GLOPAL_BACKEND_HOSTNAME = '';
const GLOPAL_PATHNAMES_REGEXP = new RegExp('^/()($|[:/?])');

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const isGlopalPath = GLOPAL_PATHNAMES_REGEXP.test(url.pathname);
    const isGlopalRequest = request.headers.has('X-Glopal');
    if (!isGlopalPath || isGlopalRequest) {
      return fetch(request);
    }

    const originalHost = url.hostname;
    url.hostname = GLOPAL_BACKEND_HOSTNAME;
    url.protocol = 'https:';

    const newRequest = new Request(url, request);
    newRequest.headers.set('X-Forwarded-Host', originalHost);

    return fetch(newRequest);
  },
};

1. Click [Snippet Rule] button to setup matching expression. As snippet code already includes condition in the code, you can apply it on all incomming requests, or setup specific condition to apply snippet for in-scope paths. When complete, click [Done] to close the sidebar panel.

   • If you have Cloudflare Business or Enterprise plan, use the same regular expression:

     

   • If you have Cloudflare Pro plan, enter condition as multiple OR wildcard prefix rules:

     

1. Click [Deploy] button to activate your new snippet.

Testing your rule

To ensure the rule works as expected, conduct a series of tests by visiting URLs that should be affected by the rule and confirming that they are rewritten correctly. If delegating path /de to Glopal, verify that /de (no slash), /de/ (with slash) and /de/something all display Glopal logo, while pages like /delivery do not show Glopal logo.

Worker (Cloudflare Free)

Availability and pricing

If you are on Cloudflare’s Free plan for your target domain, traffic splitting can be implemented using a Worker.

When configured for traffic splitting, the Worker will run for every resource request on paths delegated to Glopal. Depending on your site structure and browser caching, a single page view may generate anywhere from 1 to 100+ individual resource requests.

Cloudflare Workers are available as either a free or paid account add-on.

The Workers Free plan is suitable for initial testing but is limited to 100,000 requests per day, a limit that is quickly reached once multiple localized sites go live.

We recommend upgrading to the Workers Standard plan when setting up traffic splitting.

Create a Worker

1. Log in to the Cloudflare dashboard and select your account, not selecting any domain.

2. Select Compute (Workers) > Workers & Pages, then click [Create] button.

3. Select Hello World template

4. Enter the name of your worker (e.g. glopal-traffic-split) and click [Deploy] button.

Navigate to the newly created worker and click the [Edit Code] button. This will open the editor where you can write and deploy your Worker script. In the editor, you'll find a pre-filled Hello World script; delete it.

1. Copy the following script and Paste it into the Workers editor.

2. Make sure to replace GLOPAL_HOSTNAME placeholder with the value you receive from Glopal (for example store-1234.app.glopalstore.com) and that PATTERN is a regular expression describing list of in-scope paths you want to delegate to Glopal.

worker.js

const GLOPAL_BACKEND_HOSTNAME = '';
const GLOPAL_PATHNAMES_REGEXP = new RegExp('^/()($|[:/?])');

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const isGlopalPath = GLOPAL_PATHNAMES_REGEXP.test(url.pathname);
    const isGlopalRequest = request.headers.has('X-Glopal');
    if (!isGlopalPath || isGlopalRequest) {
      return fetch(request);
    }

    const originalHost = url.hostname;
    url.hostname = GLOPAL_BACKEND_HOSTNAME;
    url.protocol = 'https:';

    const newRequest = new Request(url, request);
    newRequest.headers.set('X-Forwarded-Host', originalHost);

    return fetch(newRequest);
  }
};

Setup Route

Under worker settings, navigate to Triggers > Routes > Add route.

Enter one or more routes that match the domains and paths to be delegated to Glopal. Make sure each route ends with a * character. Configure multiple routes for each delegated path, for example www.store.com/de* and www.store.com/fr*.

Alternatively, since the Worker code already checks for "in-scope paths," you can set up a broader route like www.store.com/* to run all requests through the Worker. However, this may increase the number of Worker requests and, consequently, the total cost.

Testing your rule

To ensure the rule works as expected, conduct a series of tests by visiting URLs that should be affected by the rule and confirming that they are rewritten correctly. If delegating path /de to Glopal, verify that /de (no slash), /de/ (with slash) and /de/something all display Glopal logo, while pages like /delivery do not show Glopal logo.