DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to capture website visitor's IP address on Google Analytics using Google Tag Manager?
deep
deep

Posted on

How to capture website visitor's IP address on Google Analytics using Google Tag Manager?

An IP address is more than just an address of your client device, it reveals other important aspect about the connection that can help your business access the authenticity of the end user. Unfortunately, the most popular web analytics tool in the world, Google Analytics, doesn't provide that information due to privacy concern.

However, there are many ways to retrieve an IP address of your website visitor by implementing IP geolocation APIs or other native functions to access an IP address of the client.

But it could be so much better, if you could see an IP address on Google Analytics and tie that with your events so that you can check if the event was triggered from an authentic connection or not.

For example, I often receive a newsletter submission on my website and its difficult to access if the subscription was a spam or a genuine user. If I could use some advance IP geolocation to detect if the connection was proxy/VPN then it would add a lot of value to my web analytics.

In this article, I will only try to address the first aspect of problem - how to push IP address of website visitors to your Google Analytics dashboard. You need to have some understanding of how Google Tags work.

Creating a Tag on Google Tag Manager

Step 1

Login to your Google Tag Manager and create a new Tag.

Screen Shot 2021-08-04 at 10.32.19 am

Step 2

Change the Tag Type to Custom HTML Tag and set the Triggering option to All Pages.

Screen Shot 2021-08-04 at 10.34.42 am

Set the Tag firing options to Once per event.
Screen Shot 2021-08-04 at 10.42.20 am

Step 3

In the HTML Section, paste the following Javascript Code.

<script id="bdc-ipaddress-push" type="text/javascript">

  var hBDC = new XMLHttpRequest();
  var bdcApi = "https://api.bigdatacloud.net/data/client-ip";
  var outputBDC = {};
  hBDC.open("GET", bdcApi);
  hBDC.send();
  hBDC.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
    outputBDC = JSON.parse(this.responseText);
  console.log(outputBDC.ipString);
      dataLayer.push({'bdc-ipaddress': outputBDC.ipString});
    }
  };

</script>
Enter fullscreen mode Exit fullscreen mode

The following code uses free Client-IP api from BigDataCloud. It is a simple API to retrieve your website visitor's IP address. The API also detects if the connection is proxy or note and return other values. For now, we will only focus on IP address.

More about the API here:
BigDataCloud's free Client Info API

Sample of the output of the API:

{
"ipString": "⬛⬛⬛⬛⬛⬛⬛⬛",
"ipNumeric": ⬛⬛⬛⬛⬛⬛⬛⬛,
"ipType": "IPv4",
"isBehindProxy": true,
"device": "Mac",
"os": "Mac OS X 10.15.7",
"userAgent": "Chrome 92.0.4515",
"family": "Chrome",
"versionMajor": "92",
"versionMinor": "0",
"versionPatch": "4515",
"isSpider": false,
"isMobile": false,
"userAgentDisplay": "Mac OS X 10.15.7 Mac Chrome 92.0.4515",
"userAgentRaw": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36",
-"userLanguages": [
"en-GB",
"en-US",
"en"
]
}
Enter fullscreen mode Exit fullscreen mode

The javascript code simply calls the API and pushes the IP address to Google Tag's internal dataLayer using the function:
dataLayer.push({'bdc-ipaddress': outputBDC.ipString});

This Tag will now fire on every pages and will push the website visitor's IP address to Google Tag's dataLayer. The name of the variable will be - bdc-ipaddress

Retrieving the IP address value from the dataLayer

Step 1

Create a new Variable under variable Tab.

Screen Shot 2021-08-04 at 10.43.48 am

Step 2

Set the Variable Type to Data Layer Variable and the Data Layer Variable Name to bdc-ipaddress

Then give a name to your variable - IP Address

Screen Shot 2021-08-04 at 10.45.12 am

Step 3

Once you have saved your variable, now you should be able to see your variable under customer variables.

Screen Shot 2021-08-04 at 10.47.30 am

Pushing the Variable data to Google Analytics.

In my Google Tag, I have created a trigger that fires when someone submits a form on my website. You could have a different triggers.

Creating a Form Submission Tag

Now create a new Tag which is going to register a new event and push to your Event dashboard on Google Analytics.

Name of tag : GA Newsletter Form (You can put any other name)
Tag Type: Google Analytics: Universal Analytics
Track Type: Event
Category: Sign_Up (You can put any other name)
Action: Sign_Up (You can put any other name)
Label: {{IP Address}} 
Enter fullscreen mode Exit fullscreen mode

In the label we put the variable which we defined earlier. Please note that you could have put this variable in Category and Action too. I prefer to put on Label.

Screen Shot 2021-08-04 at 10.56.45 am

The other settings are:

Value : {{Form Classes}}
Non-Interaction Hit : False
Google Analytics Settings : {{Google Analytics UA}} 
Enter fullscreen mode Exit fullscreen mode

The above settings are standard. Please refer to Google Tag Manager's document for more.

Form Classess is a standard variable available on Google Tags. This allows Tags to access to CSS classes used on the Form element on your website. Useful for triggering form submission trigger. I believe, this is optional and can be ignored. Please test and let me know.

The Google Analytics Settings UA variable is another customer variable that holds the Google Analytics tracking ID.

For Reference:
Screen Shot 2021-08-04 at 11.07.04 am

Then on the Triggering Section, choose the trigger which you have created. In my case, I will use Newsletter Form trigger.

Screen Shot 2021-08-04 at 11.22.47 am

And it is done. Now test your Tag and take it live.

Final Result of the Implementation

After running this on my website, I captured few form submission events. And yes, now I can see an IP address of the user who have submitted the form.

Screen Shot 2021-08-04 at 11.11.38 am

When when I check this IP address against BigDataCloud's Ip geolocation tool, I can see that this form was submitted by the user using Tor server, therefore it is very likely that the information shared by the user on form is highly unreliable.

IP Geolocation Data for 192.42.116.17

Closing thoughts

Now you can use this steps to further enhance your data on your Google Analytics and get a better insights into who is visiting your website and their authenticity by connecting with a more advanced IP geolocation APIs.

Top comments (0)

🌚 Life is too short to browse without dark mode