Worker that detects city of visitor e.g. St. Louis and replaces <span> tag value


#1

Hello,

I had a simple use case. I wanted to detect the city of the visitor’s IP (e.g. New York, London, St. Louis, etc.) - for a specific URL only i.e. our homepage - and either add/to replace the value within a tag identified with a unique ID on that URL’s payload.

Example:

13,000 businesses worldwide are eliminating chaos in their business processes (including London).

That last bit would be:

<span id="unique_city_here">(including yours)</span>

How would I achieve this via a CF worker?

Thanks,
Amit


#2

Put simply you would have to get the client’s IP from the headers (there should be an example in the documentation), do a lookup on a geoIP service or database and then do a string replace on the HTML response.


#3

The smallest city-level GeoIP databases I’m aware of don’t come anywhere close to fitting in a worker, so you’d have to call to an external service like @matteo suggested, with the requestor IP from the header.

That’ll need to be done in a way that blocks you from streaming the response through to the browser, since you’re looking to replace that span value. If you’re not going to otherwise use the value, you might consider doing this in client-side JS (asynchronously, fetched early in the page.)