Geo Content

What is Geo Content Personalization?

Geo Content lets you change specific elements on a page based on where the visitor is located, without building separate pages or using redirects. You keep a single URL and a single page, but the content adapts to the visitor's country.

Common use cases include showing local phone numbers, displaying region-specific promotions, adjusting currency symbols, showing local shipping information, or swapping hero banners by market.

How It Works

You define content rules in the GeoSwap dashboard, and the geoswap.js script changes the page in the browser once it knows where the visitor is.

Create a content rule

Navigate to Geo Content in the sidebar and click New Rule. Choose the pages it runs on, a Content Mode, and a Target CSS Selector for the element you want to personalize.

Add a rule for each region

Under Rules, pick a segment and set what those visitors see: replacement HTML, or which elements to show and hide. Each rule can also target a device type (all devices, desktop, mobile, or tablet) and run an A/B split. Rules are checked from top to bottom, and the first match wins.

The script applies it

When a visitor loads your page, the geoswap.js script asks the GeoSwap edge network which rules match, then updates the page. If several content rules match the same page (say, one for the headline and one for the phone number), they all apply.

Page targeting works the same as in other products: all pages, specific URLs, or a URL pattern. Patterns are regular expressions, checked against both the full address and the path, so ^/products(/.*)?$ matches your whole products section. See page targeting.

Content Modes

Each content rule has one Target CSS Selector (the wrapper element on your page) and one of two content modes.

<div class="pricing-block">
  <div class="pricing-default">$99/mo</div>
  <div class="pricing-eu geoswap-hide" data-geoswap-persist>€89/mo (VAT included)</div>
</div>

<!-- Target CSS Selector: .pricing-block
     EU rule: Show Selector .pricing-eu, Hide Selector .pricing-default -->

Add geoswap-hide to anything that should start hidden. If no rule matches, or GeoSwap doesn't answer within 3 seconds, hidden elements are revealed so visitors never get stuck with a blank spot. Add data-geoswap-persist to keep an element hidden unless a rule explicitly shows it, like the EU price above.

Using CSS Selectors

You target elements on your page using standard CSS selectors. Here are some common examples:

/* By ID — most specific, recommended */
#hero-headline
#shipping-info

/* By class */
.promo-banner
.pricing-cta

/* By data attribute — great for GeoSwap-specific targeting */
[data-geoswap="phone-number"]
[data-geoswap="currency-symbol"]

/* Nested selectors */
.hero-section h1
#footer .phone-number

For the most reliable targeting, add data-geoswap attributes to elements you plan to personalize. This prevents content rules from breaking when your page design changes. Each content rule targets one selector, and each rule needs its own. New rules start with a generated class like .geoswap-content-a1b2c3 that you can paste straight into your HTML.

<span data-geoswap="phone-number">+1 (555) 123-4567</span>
<div data-geoswap="shipping-banner">Free shipping in the US</div>

Google Ads Compatibility

Designed for ad compliance

Geo Content keeps the same URL for all visitors, which is what Google Ads requires. The page content personalizes client-side, but the URL and server response remain identical. This means your landing page URL passes Google Ads review while still showing localized content.

Unlike geo redirects (which change the URL), Geo Content modifies the page in-place. This makes it the right choice for paid traffic where the destination URL must remain constant.

Full Example

Here is a complete example showing a page with elements that GeoSwap will personalize based on visitor location:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Store</title>
  <script>window.geoswap=window.geoswap||{q:[],track:function(){this.q.push(arguments)}};</script>
  <script
    src="https://cdn.geoswap.co/geoswap.js"
    data-project="YOUR_PROJECT_ID"
    defer
  ></script>
</head>
<body>
  <header>
    <h1 data-geoswap="headline">Welcome to Our Store</h1>
    <p data-geoswap="subheadline">
      Shop the latest products with free shipping.
    </p>
  </header>

  <section data-geoswap="promo-banner">
    <p>Summer sale: 20% off everything!</p>
  </section>

  <footer>
    <span data-geoswap="phone-number">+1 (555) 123-4567</span>
  </footer>
</body>
</html>

In the GeoSwap dashboard, you would create one managed content rule per element, with a Target CSS Selector like [data-geoswap="headline"], and add a rule for each region. For example, visitors from Germany would see "Willkommen in unserem Shop" and a German phone number.

Best Practices

Use data-geoswap attributes for stable element targeting that survives design changes.

Always provide default content in the HTML. It's what search engines and unmatched visitors see. If you don't want visitors to glimpse it before the swap, add the geoswap-hide class to the element.

Keep content swaps lightweight. Replace text and small HTML blocks, not entire page sections.

Use Geo Content (not Geo Redirects) for paid ad landing pages to maintain a consistent URL.

Test your rules using the Simulate Rules tool in your dashboard — pick a country and page to see which rule fires.

Use segments to group countries with the same content (e.g., a "DACH" segment for DE, AT, CH).