Geo Content

Personalize page content based on visitor location

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

GeoSwap uses a managed content approach. You define content rules in the GeoSwap dashboard, and the geoswap.js script swaps the content client-side after determining the visitor's location.

Define content rules in the dashboard

Navigate to Content in the dashboard. Create a rule that targets specific HTML elements on your page using CSS selectors.

Set country-specific content

For each country or group of countries, define the replacement content. This can be text, HTML, or a visibility toggle (show/hide).

Content swaps at the edge

When a visitor loads your page, the geoswap.js script queries the GeoSwap edge network, receives the matching content rule, and applies it to the DOM. The swap is near-instant.

Content Actions

Each content rule specifies a CSS selector (to identify the target element) and an action (what to do).

Replace text

Most common

Replace the text content of the matched element. HTML inside the element is preserved if you use the HTML replacement mode.

Replace HTML

Replace the entire inner HTML of the matched element. Useful for swapping banners, images, or complex markup.

Show / Hide

Toggle the visibility of an element. Use this to show a country-specific banner or hide content that is not relevant to certain regions.

Replace attribute

Change an attribute value (e.g., swap an image src or a link href) without touching the rest of the element.

Using CSS Selectors

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

CSS selector examplescss

/* 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.

Recommended: data-geoswap attributeshtml

<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:

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Store</title>
  <script
    src="https://cdn.geoswap.co/geoswap.js"
    data-account="YOUR_ACCOUNT_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 content rules targeting each data-geoswap attribute with country-specific replacements. 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. The personalized content is applied after the page loads, so the default is visible briefly.

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).

Next up

Learn about SEO best practices when using geo-targeting.

SEO Guide →