How to use the user's location to implement personalized content
Let's assume you run a retail business in the US, and, for that reason, your store's website is completely in English with product prices in dollars. Then, one day, a person from Tokyo goes to your website and is interested in one of your products. He gets frustrated because he doesn'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 plugin to translate the page content as a last resort. But what about opportunities that overcome language concerns?
Due to the rise of new technologies, the cultural distances between countries, products, and information have decreased, 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 see how to implement different content according to the user's location and learn about using APIs and other alternatives.
What is geomarketing?
Geomarketing, or marketing 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, and this is what we call localized content.
Geomarketing can be used in any aspect of the marketing mix — you can localize the product offer, the price, or the communication strategy.
What are the benefits of localized content?
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 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.
It would be best to use geo redirect when your website has multiple versions of the same web page, one for each previously determined location. All you need to do is configure your CDN server to redirect the HTTP request from the source to the right page.
On the other hand, using geo content requires modifying the content on your page dynamically. 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. There are plenty of free and paid services in the market to 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:
1{2 "ip": "8.8.8.8",3 "hostname": "dns.example",4 "continent_code": "NA",5 "continent_name": "North America",6 "country_code2": "US",7 "country_code3": "USA",8 "country_name": "United States",9 "country_capital": "Washington, D.C.",10 "state_prov": "California",11 "district": "Santa Clara",12 "city": "Mountain View",13 "zipcode": "00000-0000",14 "latitude": "37.42240",15 "longitude": "-122.08421",16 "geoname_id": "0000000",17 "isp": "Google LLC",18 "organization": "Google LLC",19 "currency": {20 "code": "USD",21 "name": "US Dollar",22 "symbol": "$"23 },24 "time_zone": {25 "name": "America/Los_Angeles",26 "offset": -8,27 "current_time": "2022-01-01 01:02:03.456-0800",28 "current_time_unix": 0000000000.000,29 "is_dst": false,30 "dst_savings": 131 }32}
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.
Sometimes, not knowing the exact user's location is desirable since it guarantees their privacy. Therefore, you should evaluate if this is something that 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 always filled with unchallenging demands.
Imagine receiving weekly requests to change the content of a page for a given city instead of focusing on more important projects. Either you delay the delivery of projects or take longer to change the requested 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 the devs, you should rely on a CMS serving personalized content. At Croct, we've developed what we call Personalization Management System.
PMS allows marketers to provide dynamic content to predefined slots on your website without depending on you for frequent changes. Once you integrate it to your page, you'll have more time to dedicate to critical projects, while marketers and growth hackers can easily tweak the content for each location independently.
We currently also 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.
How to use the PMS for localized content?
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 two SDKs: one for Javascript implementation and another for React applications. We'll focus on the React implementation in this post, but you can also check the Javascript example here.
If you wish to test this in a local environment, you can do so by using our sandbox app ID, which is 00000000-0000-0000-0000-000000000000.
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, all you need is to provide the id you configured in your Croct workspace. Based on the slot's personalization rules and the user's location, the component will decide which content to show that user.
We have already defined a slot with id location-banner in the sandbox workspace with the following structure:
1type HomeBannerContent = {2 title: string,3 subtitle: string,4 cta: {5 label: string,6 link: string,7 }8};
To render the content of the slot, you should use the <Slot /> component. The code snippet below shows how to use it, but you can also use the useContent hook (see our documentation for further details).
1import {ReactElement, Suspense} from 'react';2import {Slot} from '@croct/plug-react';34type HomeBannerContent = {5 title: string,6 subtitle: string,7 cta: {8 label: string,9 link: string,10 }11};1213export default function OnboardingPage(): ReactElement {14 return (15 <Suspense fallback="✨ Personalizing content...">16 <Slot id="home-banner">17 {({title, subtitle, cta}: HomeBannerContent) => (18 <div>19 <strong>{title}</strong>20 <p>{subtitle}</p>21 <a href={cta.link}>{cta.label}</a>22 </div>23 )}24 </Slot>25 </Suspense>26 )27}
To avoid suspending the component while loading, you can provide an initial state to be rendered and a value for the fallback property instead. Please refer to the API documentation for a complete list of the available options.
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 every day 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 and even contribute to it if you like :)
Wrapping up
Here is a summary of what we talked about:
- 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 in the 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, and the PMS is a great alternative for that.