Connect with us

Marketing Tips

Google Tag Manager Geolocation Tracking

Published

on

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.

Geo-localized JavaScript  from geoPlugin 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.

Opening a custom HTML tag on Google Tag Manager

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>
Implementing code for Tag Configuration on Google Tag Manager

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

All Pages trigger in Google Tag Manager

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. 

JavaScript functions to send data back from geoPlugin

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

Opening JavaScript Console to execute functions from geoPlugin

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

Executing function geoplugin_city()

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

geoplugin_city() function returns the actual city

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

Executing function geoplugin_countryCode()

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

geoplugin_countryCode() returns the Country Code

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.

Building a custom Listener function in Google Tag Manager

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.

Executing the functions, putting them  in variables, and pushing them to the Data Layer

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.

Adding Trigger in Google Tag Manager

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.

Deploying data to Data Layer

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.

Creating a New User-Defined Variable

This will be a Data Layer Variable for the country.

Creating a Data Layer Variable for Country in Google Tag Manager

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

Choosing variable type as Data Layer Variable in Google Tag Manager

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

Adding Data Layer Variable Name

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.

Value of the Variable under Variables menu is updated

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.

Adding a New Trigger in Google Tag Manager

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.

Order of different events that fire in Google Tag Manager

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

Choosing Custom Event trigger type

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

Configuring Custom Event Trigger in Google Tag Manager

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.

Choosing a trigger for one of the Tags on Google Tag Manager

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

Event tag fires when the condition for Variable is met

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

Connecting a VPN with location United States

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.

Summary of Tags Fired & Tags Not Fired on the page

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

Tag didn’t fire because the value of Variable is changed

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

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *