Geolocation with Netlify Edge Functions

We’ve covered geolocation in a few other services, but this will really tie everything together.

If you’d like to see the updated code repository, you can check that out here on Github.

We will be:

1. Creating an edge function service to return Geolocation information from a user.
2. Adding an mu-plugin to our site to take advantage of that geolocation information via shortcodes

You will need a Netlify account, which is free, so get signed up and come on back, y’all!

… you back?… ok…

Let’s get started… 🤓

Setting up the Netlify service

First, to setup you’re service, you can go to the Github repository and click the “deploy to netlify button, or click it here:

This will take you through a quick set up, but ultimately allow you to deploy the service to Netlify with one click.

Nice 😎.

After that is deployed, you’ll be able to get the URL for the app, it will be something like https://easy-peasy-geolocation.netlify.app. Take that URL, open a new tab in your browser, and add geolocation to the end, so https://easy-peasy-geolocation.netlify.app/geolocation. You should see JSON returned, with your location: country and city information.

Remember that URL, because we’ll need it soon.

Setting up the mu-plugin

Next, in the Github repo, you’ll see a folder labeled mu-plugins. You can move the contents of this folder to your mu-plugins plugins folder on Strattic via SFTP.

Once you’ve done that, add in the Netlify geolocation app URL from above once you have it in the mu-plugins/strattic-geoip-customizations/strattic-geoip-script.js file around line 33 in the getGeoIpLocation method.

It should look something like this:

    getGeoIpLocation : async () => {
        const response = await fetch('https://easy-peasy-geolocation.netlify.app/geolocation');
        stratticGeoIpHandler.userGeo = await response.json();
        // Set the cookie for one day.
        stratticGeoIpHandler.setGeoCookie('geoIpInfo', JSON.stringify(stratticGeoIpHandler.userGeo), 1)
    },

Once you’ve done that, you’re ready to start using the service on your site.

Using the geoip-content shortcode

We’ve adopted the [geoip-content] shortcode used by other plugins. This way, if you’ve been using a plugin with that shortcode, you don’t need to remove it from your site, this should just work.

You will however need to deactivate the plugin you’ve been using, as two shortcode rules for the same shortcode is never a good thing.

If you’d like to see how this works, you can add the following HTML code block to a post to test it out:

<div>The local price is: [geoip-content country="AD,AT,BE,CY,EE,FI,FR,DE,GR,IE,IT,XK,LU,MT,MC,ME,NL,PT,SM,SK,SI,ES,VA"]
€50
[/geoip-content]
[geoip-content not_country="AD,AT,BE,CY,EE,FI,FR,DE,GR,IE,IT,XK,LU,MT,MC,ME,NL,PT,SM,SK,SI,ES,VA,UK,GB"]
$59
[/geoip-content]
[geoip-content country="UK,GB"]
£49
[/geoip-content]</div>

You can see that you have two possible parameters to use in the shortcode:

• country: if the geolocation service returns this country, it will display the content in that block
• not_country: if the returned country in the geolocation information is not included in this list, then the content will display.

Next steps

This is just the beginning, and remember, this is open source, so you’re free to edit how the shortcode and JavaScript work.

You can if you want, you can add a city or subdivision parameter as well, and then add that functionality. We’ll probably do that in the future, so stay tuned.

You also do not need to use the shortcode, if you’re comfortable with editing the JS yourself and targeting your own elements, that’s fine too 🙂.

Any questions with this implementation, feel free to ping our support, and we’ll see what we can do to help.