Creating Geo-Targeted Experiences with Cloudflare’s Redirect Rules and WordPress

World Map

We recently faced a challenge that many web developers encounter: the need to display different content to visitors depending on their geographical location.

While several very good plugins are available to handle this task, we found that they slowed down our site due to their lack of support for caching pages with variable content. To overcome this problem, we decided to use Cloudflare’s Redirect Rules to redirect URLs based on the visitor’s country.

This approach allowed us to redirect pages and serve the default CSS file to users in the United States and an alternative override CSS file to users outside the US. This enabled us to customize menu items, and present different pages for these users – all while maintaining blazing-fast site performance.

And if you redirect 5 or fewer pages then its completely free.

Why Cloudflare?

Cloudflare is a popular Content Delivery Network (CDN) and security service that offers a range of features, such as caching, DDoS protection, and SSL/TLS support.

One powerful feature is its ability to redirect URLs based on the visitor’s geographic location using Redirect Rules.

By utilizing this functionality, we were able to serve different content to users in different countries without the need for a plugin that would limit caching and slow down our site.

Set up a Cloudflare account and configure Your Domain

If you don’t have an account, sign up for a free Cloudflare account and add your domain. Follow the instructions to update your domain’s nameservers. You can set it up as simply or as completely as you wish. There are a lot of features to configure if you want a performance bump, but for our purposes we only need geo-tagging.

Enabling Geo-Tagging in Cloudflare

Geo-Tagging is a feature that allows you to access information about your visitors’ locations, such as their country, and use that data to create more personalized experiences. When IP Geolocation is enabled, Cloudflare acts a header to the https transfer with the country code in it.

To enable Geo-Tagging in Cloudflare, follow these steps:

  1. Log in to your Cloudflare account and navigate to your domain’s dashboard.
  2. Select the “Network” tab.
  3. Scroll down to the “IP Geolocation” section and toggle the switch to enable it. This will append a “CF-IPCountry” header to each request, which contains the visitor’s two-letter country code.

The header is available to your server, but we won’t be using that feature. We’re going to do this entirely at Cloudflare’s edge servers.

Implement Geo-Targeting with Redirect Rules

To implement Cloudflare’s geo-targeting functionality using Redirect Rules, we followed these steps:

  1. Create a Redirect Rule: In the Cloudflare dashboard, navigate to the “Rules” tab and click “Create Rule.” Configure the rule with a source URL that matches the default CSS file path and set the target URL to the alternative CSS file path. In our implementation we created a folder in /wp-content/uploads called css and created default.css and ous.css. We chose the uploads folder since that never gets overwritten by updates.
  2. Add a country-based condition: In the “Conditions” section of the rule, add a “Country” condition. Set it to “is not” and choose “United States” as the country. This condition will ensure that the redirect occurs only for visitors located outside the US.
  3. Save and deploy the rule: After configuring the rule, click “Save” to deploy it. Cloudflare will automatically apply the redirect for all incoming requests that match the specified conditions.
  4. Test and verify: To ensure that the correct CSS file was being served, we tested our site using a VPN service to simulate different geographical locations.

Customizing Menu Items for US and Non-US Visitors

In addition to serving different CSS files for visitors in the United States and those outside the US, we also wanted to customize the menu items displayed on our website. To achieve this, we used the CSS class ous-hidden to mark the menu items that we wanted to show only to visitors in the US. We then used CSS to hide those menu items for users located outside the US.

Enabling CSS Class Option in WordPress Menus

By default, WordPress might not show the option to add a CSS class to menu items. To enable this feature, follow these steps:

  1. Log in to your WordPress admin dashboard.
  2. Navigate to Appearance > Menus.
  3. In the top right corner of the screen, click “Screen Options.”
  4. Check the “CSS Classes” option under “Show advanced menu properties.”

After enabling the CSS Classes option, you can now add a custom CSS class to each menu item in the “Menu Structure” section.

Adding the ous-hidden Class to Menu Items:In the “Menu Structure” section, click the dropdown arrow on the right side of the menu item you want to customize.

  1. In the “CSS Classes” field, add the ous-hidden class.
  2. Click “Save Menu

Hiding Menu Items with CSS:

Once you have added the ous-hidden class to the desired menu items, you can use the following CSS code in your alternative CSS file to hide those menu items for visitors outside the US:

.ous-hidden { display: none; }

By using this CSS rule, menu items with the ous-hidden class will be hidden for visitors located outside the United States.

Displaying Different Home Pages for US and Non-US Visitors

To further enhance the user experience for visitors from different locations, we wanted to present different home pages for users in the United States and those outside the US.

To accomplish this, we created a new Redirect Rule in Cloudflare:

  1. In the Cloudflare dashboard, navigate to the “Rules” tab and click “Create Rule.”
  2. Configure the rule with a source URL that matches the root path of your website (e.g., https://example.com/) and set the target URL to the path of the alternative home page for non-US visitors (e.g., https://example.com/ous/).
  3. Add a country-based condition as before, setting it to “is not” and choosing “United States” as the country.
  4. Save and deploy the rule.

This new Redirect Rule will redirect non-US visitors to the alternative home page, allowing you to display targeted content for different geographical locations.

Conclusion

By leveraging Cloudflare’s Redirect Rules, we were able to serve different content to our visitors based on their geographical location without impacting our site’s performance. This serverless solution allowed us to bypass the need for a plugin, maintain fast load times, and deliver a personalized experience to our users worldwide. Using these techniques, we customized the CSS files, menu items, and home pages for visitors in the United States and those outside the US, catering to the specific needs of different audiences.