Edge Developer Platform
  • Edge Functions
    • Overview
    • Getting Started
    • Operation Guide
      • Function Management
      • Web Debugging
      • Function Trigger
      • Environment Variable
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • Sample Functions
      • Example Overview
      • 301 Redirect
      • Obtaining Client URL Information
      • Customization Based on Client Geo Location
      • Obtaining Client Geo Location Information
      • Batch Redirect
      • Returning an HTML Page
      • Returning a JSON Object
      • Fetch Remote Resources
      • Authenticating a Request Header
      • Modifying a Response Header
      • Performing an A/B Test
      • Setting Cookies
      • Performing Redirect Based on the Request Location
      • Using the Cache API
      • Caching POST Requests
      • Responding in Streaming Mode
      • Merging Resources and Responding in Streaming Mode
      • Protecting Data from Tampering
      • Rewriting a m3u8 File and Configuring Authentication
      • Adaptive Image Resize
      • Image Adaptive WebP
      • Customize Referer restriction rules
      • Remote Authentication
      • HMAC Digital Signature
      • Naming a Downloaded File
      • Obtaining Client IP Address
    • Best Practices
      • Adaptive Image Format Conversion via Edge Functions

Customization Based on Client Geo Location

This example captures incoming HTTP requests and provides customized welcome messages and geo location (latitude and longitude) information based on the country where the client is located. It can be used for offering global personalized customization experience to users.

Sample Code

// Add a fetch event listener, which is triggered when a request is incoming. It uses the handleRequest function to handle requests and return responses.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
function handleRequest(request) {
// Get the country code provided by EdgeOne.
const countryCode = request.eo.geo.countryCodeAlpha2;
// Select the corresponding language and welcome message based on the country code.
let responseText;
switch (countryCode) {
case 'CN': // China
responseText =`Hello user from China! Your latitude and longitude are ${request.eo.geo.latitude},${request.eo.geo.longitude}`;
break;
case 'KR': // South Korea
responseText = `한국의 사용자님 반갑습니다! 당신의 위도와 경도는 ${request.eo.geo.latitude}와 ${request.eo.geo.longitude}입니다.`;
break;
case 'DE': // Germany
responseText = `Willkommen in Deutschland! Ihre Breiten- und Längengrad sind ${request.eo.geo.latitude} und ${request.eo.geo.longitude}.`;
break;
case 'US': // USA
responseText = `Hello from the USA! Your latitude and longitude are ${request.eo.geo.latitude} and ${request.eo.geo.longitude}.`;
break;
default: // Respond in English by default in other cases.
responseText = `Welcome to our service! Your latitude and longitude are ${request.eo.geo.latitude} and ${request.eo.geo.longitude}.`;
break;
}
// Return a response.
return new Response(responseText, {
headers: {
'Content-Type': 'text/plain;charset=UTF-8'
}
})
}

Sample Preview

In the address bar of the browser, enter a URL that matches a triggering rule of the edge function to preview the effect of the sample code. If the client of the current request URL is located in China, the browser will respond with the welcome page for China, as well as the latitude and longitude of the client geo location.


Related References