Google Tag Manager Geolocation Tracking

Original post published here https://measureschool.com/geolocation-google-tag-manager/ by Julian Juenemann

Using A Geolocation API

The only way we could do this is through outside help from either your server, where you could install a script that sends it back to the page or to use a geolocation API. One of those is geoPlugin. It’s a free API service that you can install on your website. 

This geoPlugin is free to use unless your site gets a certain volume of visitors, so I recommend reading through their user policy to see if you need premium access.

You don’t have to sign up for anything, but if you want to use the geoPlugin with your SSL site so you have https at the front of your domain, then you need to pay for access. It’s quite affordable at around $12 per year. For that, you would then also need your API key to attach to the script here.

So how would we install this? All you would need is this JavaScript here that you can simply copy from their website.

Now, we’ll install this with Google Tag Manager. 

In Google Tag Manager, go to Tags and click New. Click in the Tag Configuration field to choose a Tag type. We’ll select Custom HTML and name this GEO for now.

Now, let’s implement the code. Paste the following script from geoPlugin’s website into the HTML field:

<script language="JavaScript" src="https://www.geoplugin.net/javascript.gp" type="text/javascript"></script>

Then let’s attach a trigger. I’ll just go with the All Pages trigger and save this.

Refresh our preview and debug mode, refresh our page, and this is now deployed on our website.

This code requests information from the geoPlugin. Then, geoPlugin will send the data back and give us some information in the form of some JavaScript functions. 

To execute these functions, go to View → Developer Tools → JavaScript Console.

You can then type in one of these commands. So, for example, let’s go with geoplugin_city().

It will give us back the actual city where the plugin located us.

Let’s go into geoplugin_countryCode(), now assuming we are in Berlin. 

 We should get DE for Germany (“Deutschland”). 

A host of other functions are available here that you could execute. Some are more useful than others but you could use these in your Google Tag Manager account. 

Building Custom Listener In Google Tag Manager

I’d recommend building a custom listener function out of this. So I’ve done this right here, where you load the geoPlugin.

We execute these functions, put them in variables, and then push them to the Data Layer so that we’ll have them available in Google Tag Manager as well.

So how do we do this? In this case, the code for the listener Tag starts with

<script>
  (function()  {

Then, each line of code after that creates a GTM variable out of the geoPlugin functions. The variable is created and named after the geoPlugin functions (i.e., geoPlugin function geofunction_city becomes var city inline 4). After variables are attached to geoPlugin functions, the next part sends these variables to the Data Layer:

dataLayer.push({

The first line associates these variables with the event Tag that we named GEO earlier in the tutorial. Then, each line after that instructs GTM how to present each variable in the data layer. Then, the code just needs the closing tags.

Now, let’s add this to our page. For this, we just need to add our trigger. Unpause the trigger if it is Paused, save it, and refresh the page.

And this code should then deploy our data to the Data Layer. We can see here our geo event. Let’s look into the Data Layer. We have these Data Layer information now available, i.e. country name, country code, currency code, the city, and the region. 

There’s also more data available in the API. We haven’t pushed all of the data here. You can look through the documentation to find more relevant data for you.

Building A Data Layer Variable

Now, what can you do with this information once it’s in the data layer? You can build a Data Layer Variable. 

Let’s say we wanted to pull out the country name from the Data Layer. How would we do that? You can go over to Google Tag Manager → Variables → New User-Defined Variables.

This will be a Data Layer Variable for the country.

The next step is to Choose variable type. We’ll choose Data Layer Variable here.

Now, enter the key, which in our case, is the countryName.

Alright, let’s save this and refresh our page. We should now see in our Variables menu i.e if you go to geo, that our dlv – Country is Germany.

Use Geolocation In Google Tag Manager Triggers

But, you’d probably be more interested to use this in our triggers. So, let’s add a new trigger.

For triggers, it is equally easy to add this. We could also build a country trigger for Germany and use our preferred trigger here.

However, we need to be very careful when this information is actually available. Because if we look into our waterfall of the different events that fire, we see that the geo information in the data layers is only available after the PageView. 

Sometimes it is available before the DOM Ready, and sometimes after the DOM Ready. This will depend on your website, how fast it loads and how many Tags are there in your Google Tag Manager account. 

Now if we wanted to use this in a trigger that fires normally on DOM Ready or Window Loaded, this would be fine. But any information or any event that you would use previous to the geo event would not fire because the event data is not there yet. This is one thing you should be aware of.

 Now, go to Custom Event since we already have a geo event in our Data Layer.

Your custom event is geo and the trigger will be fired only when the condition dlv – Country equals Germany is met.

Let’s save this and then we could attach this to one of our Tags. For this, click on Tags → GA – Event – Click and Choose a trigger that we had created earlier named geo – country Germany.

Save this and refresh our page. We will see that the geo Event Tag has fired because our Variable dlv – Country was Germany.

Now to test this out, let us open up a VPN and select United States. Then, refresh the page.

You will see a different page because mine is actually running on the local host. But, note that the Listener – Geo Tag fired, and the GA – Event – Click didn’t fire.

 This is because our geolocation will now be the country ‘United States’.

This works as expected. I hope you now understand how you can use this geolocation plug-in for your purposes to deploy Tags.