How to use location-based personalization on your website

Let's assume you run a retail business in the US. Your website is entirely in English and priced in Dollar. One day, a person from Tokyo goes to your website and is interested in one of your products. They get frustrated because they don’t know the prices in Yen or can't understand what's written in product descriptions or delivery recommendations.

One could argue that it is not a relevant problem. Nowadays, many websites offer their content in more than one language option, or the user could use a translator pluginas a last resource. But what about opportunities that overcome language concerns?

New technologies aim to minimize the cultural distances between countries, products, and information, thus providing many opportunities for your business to go beyond geographic borders.

Creating geomarketing strategies to impact new audiences in a globalized context is necessary. Next, you'll learn how to implement content according to the user's location. We’ll also discuss APIs and other alternatives.

PlaybookMeet a new alternative to IP location APIs

Forget about implementing and deploying multiple APIs and services. We have an easier path for you.

Learn more

What is geomarketing?

Geomarketing, or marketing by geography, means considering users' geolocation in planning and implementing marketing initiatives. The most common use of geomarketing is offering different content depending on the user's location, which we call localized content.

For example: Geomarketing can be used in any aspect of the marketing mix — you can localize the product offer, price, or communication strategy.

Benefits of location-based personalization

The main benefit of localized content is dynamically offering discounts and pricing plans for specific regions and displaying prices in the users' local currencies. Users can also see personalized banners and culturally-related hero images.

It also facilitates the business' internationalization and helps you save the time and effort required in managing different domains or different versions of pages for each country, state, or city you want to target specifically.

Delivering personalized experiences means offering products and services that your customers need. In another blog post, personalization has proven to be a strong ally in building unique experiences for achieving high ROI. A McKinsey study shows that personalization could reduce CAC by up to 50%, increase revenue from 5% to 15%, and improve marketing efficiency from 10% to 30%.

Geo redirect vs. geo content

There are two practical alternatives when discussing localized content: geo redirect and geo content.

You should use geo redirect when your website has multiple versions of the same page, one for each previously determined location. All you need to do is configure your CDN server to redirect the HTTP request to the right page.

On the other hand, using geo content requires dynamically modifying your page's content. You can use an API or a CMS compatible with personalization. That would enable you to capture the location data and implement the content directly in the source code. Either way, you would have a unique URL, and users would see different content.

This post focuses on geo content strategies since it is more powerful and opens up more significant opportunities.

Why you shouldn't use an IP geolocation API

Using the user's IP address to discover their geolocation is not new. Plenty of free and paid services in the market can help you with that.

This strategy uses the IP address to map the geographic location from where the device is connecting to the internet. If further fine-tuned, it can provide the user's device location details such as country, state, city, latitude/longitude, zip code, time zone, and even street name. Some services also provide more detailed information, such as the organization name, ISP, local currency, etc.

The usual request response for a JSON is like this:

1234567891011121314151617181920212223242526272829303132
{
    "ip": "8.8.8.8",
    "hostname": "dns.example",
    "continent_code": "NA",
    "continent_name": "North America",
    "country_code2": "US",
    "country_code3": "USA",
    "country_name": "United States",
    "country_capital": "Washington, D.C.",
    "state_prov": "California",
    "district": "Santa Clara",
    "city": "Mountain View",
    "zipcode": "00000-0000",
    "latitude": "37.42240",
    "longitude": "-122.08421",
    "geoname_id": "0000000",
    "isp": "Google LLC",
    "organization": "Google LLC",
    "currency": {
        "code": "USD",
        "name": "US Dollar",
        "symbol": "$"
    },
    "time_zone": {
        "name": "America/Los_Angeles",
        "offset": -8,
        "current_time": "2022-01-01 01:02:03.456-0800",
        "current_time_unix": 0000000000.000,
        "is_dst": false,
        "dst_savings": 1
    }
}

The drawbacks of IP geolocation APIs

Using IP geolocation APIs can be an excellent solution to specific problems. However, it is not a silver bullet, and you should consider some technical matters when using it. Depending on your goal, we suggest evaluating other alternatives.

Imprecision

The first issue is imprecision. The user's IP address location may not always detect the exact location but within a 60 km to 80 km precision radius.

Let's take the examples of Jersey City and New York City, or Tokyo and Yokohama. These cities are all very close to each other, so the result for users browsing from metropolitan regions can be mistakenly displayed.

Not knowing the exact user's location is desirable since it guarantees their privacy. However, you should evaluate if this goes for or against the company's marketing strategy.

Limited growth speed

Using IP geolocation APIs means that marketing teams need to rely on developers testing small changes on copies and images. That, of course, may limit the growth speed. Besides, it keeps developers from exploiting their full potential by working on technology backlogs filled with unchallenging demands.

Imagine receiving weekly requests to change the content of a page for a given city instead of focusing on more critical projects. Chances are they will either delay the project delivery or take longer to implement content. There are definitely other alternatives to help you manage situations like this.

Alternatives for IP geolocation APIs

There are no alternatives for solving the localization inaccuracy problem when working on IP addresses. But if you don't want your marketing team to depend entirely on devs, you should rely on a CMS serving personalized content. At Croct, we've developed the Personalization Management System (PMS).

It allows marketers to provide dynamic content to predefined slots on websites without depending on you for frequent changes. Once you integrate it into your page, you'll make sure dev sprints are dedicated to critical projects, while marketers can easily tweak the content for each location independently.

We currently use the user's IP address to estimate the user's location, but we'll soon release a new segmentation feature that will rely on GPS coordinates. The best news is that our customers won't need to change a single line of code: the PMS implementation does not change at all.

Using the PMS for location-based personalization

The following example shows you how to use the PMS to provide different content based on the user's location. There are two possible versions for the following banner: one for users from a known city and one for users from an unknown city.

The following steps guide you on installing the library and integrating it into your application

Installation

We currently provide SDKs for Javascript, React and Next.js applications. In this post, we focus on the React implementation. If you wish to test this in a local environment, you can do so by creating your free account and using your app ID.

Slot

A slot represents a personalizable element of the interface.

When the content changes too often, slot components allow your team to change personalization rules whenever needed without touching the code.

To render a slot, you only need to provide its ID. Based on the slot's personalization rules and the user's location, the component will decide which content to show that user.

Let's say you have a slot with ID homepage-hero that follows this structure:

In this case, this would be the schema for our hero slot:

12345678
type HeroContent = {
    title: string,
    subtitle: string,
    cta: {
        label: string,
        link: string,
    }
};

To render the content of the slot, you could use the useContent hook (check out our documentation for further details):

123456789101112131415161718192021222324252627282930
// src/HomeBanner.tsx
import React from 'react';
import {useContent} from '@croct/plug-react';

export function HomeBanner() {
  const content = useContent('homepage-hero', {
    // Omit this property if you want your component to suspend
    initial: null,
   // It is a good practice to define a fallback to make your
   // application resilient to external errors.
    fallback: {
      title: 'Your static title',
      subtitle: 'Your static subtitle',
      cta: 'Your static CTA',
    },
  });

  if (content === null) {
    // Render a loading state
    return (<div>🪄 Personalizing...</div>);
  }

  return (
    <div id="hero-banner">
      <h1>{content.title}</h1>
      <p className="subtitle">{content.subtitle}</p>
      <a className="cta" href={content.link}>{content.cta}</a>
    </div>
  );
}

Notice that there's no logic on the client side, meaning that your marketing team can freely change the slot content as needed without requiring an update to your React app.

One of our most outstanding advantages is the time it takes for the entire team to benefit from our tools. We work hard to improve our product daily and make it as user-friendly as possible.

Our codes and documentation are open, so you can read more about our plug features and APIs here :)

Wrapping up

Here is a summary of what we discussed:

• Geomarketing can be used in any aspect of the marketing mix
• There are two practical alternatives when discussing localized content: geo redirect and geo content. Geo redirect consists of having several versions of the same page to redirect users to its corresponding version. On the other hand, the geo content consists of a single page where different changes occur dynamically for each user
• There are some drawbacks to IP geolocation APIs you must consider
• The imprecision of user's location is a common issue in all tools using IP for this purpose
• Using APIs usually means developers must spend time testing modifications instead of dedicating their time to other projects. The PMS is a great alternative for that.

We hope this blog post was useful to you. If you want to personalize the user experience based on their location, create a free account in our platform and start today!