GeoIp - how to define a visitor's city on the site

5/51 rating

Greetings to the distinguished visitor of our site. I'm sorry that I have not written anything new here for quite some time, there were just a lot of cases.

Today I have found some free time, and I want to publish here a new note on the possibility of displaying the user's data on my site. In other words, a note on how to display on your website the country, city and region of the visitor who came to your site on your site.

The geolocation function on the site is used by webmasters for many purposes, for example: if you have ready-made online store then it is possible for your visitors for each region, to show contact information specifically your branch in its city, or to display the terms of delivery of orders that relate to its region, I often use the possibilities of geolocation with writing unique texts on the site, it's a little but gives some uniqueness to the written texts.

If properly configured, geolocation on the site can also help you improve the conversion in the online store. Using the geo-location for the site, you can redirect your visitors to other subdomains that are specifically configured for the visitor's region, but there are a lot of things for which you can use this function. All examples do not make sense, everyone who is looking for how to implement the site on the site, I think the geolocation already knows for what he needs it and for what purposes.

In order to determine the visitor's cities and show them on the pages of your site, there are many different ways, there are complex methods for determining the city by the user's IP, there are simpler methods for implementing and displaying the city's name on the site, and the output of the visitor's country and city on your site, namely, consider the simple implementation that Yandex provides to us, as well as the slightly more complicated way of Sypex Geo from the creators of the wonderful product Sypex Dumper.

Each of these methods has its pros and cons, so let's consider both options in more detail. I will not delve into the jungle, but I will describe the simplest options and quick connection to your site of the methods described above for displaying the user's location on the site, so I think that any new Webmaster will cope with this task, and so let's get down to business and make a definition city by IP for the site.

Determining the visitor's city using the Yandex API.

The most important advantage of this method is its ease of installation on your site, all you need to do is insert the ready code of the city definition on your site. The city definition script works flawlessly, although in some small settlements it can certainly not accurately determine the city and indicate not your city but the location of your Internet provider, but basically the script is very convenient and easy to install.

But in this method there is a serious drawback, which, in essence, forced me to look for other alternatives for defining the city on the site, both on my projects and under development of websites for clients with the main audience from Ukraine. As you probably already know in Ukraine Yandex is banned and all requests to it are blocked by Internet providers, in connection with this, we can not use this implementation in Ukraine at least now.

Well, I will not torture you with all this scribbling and start to implement, install on the site geolocation from Yandex, which will bring the country, region and city of the visitor to your site.

First, check that you have a jquery library on your site, in most sites it is already connected, but if not then add to your site between the <head> </head> the following code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

If you already have a library, you can skip this item. The next step is to connect the visitor location determination script, namely between the same <head> </head> add the following script:

<script src="//api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
  window.onload = function () {
      jQuery("#user-city").text(ymaps.geolocation.city);
      jQuery("#user-region").text(ymaps.geolocation.region);
      jQuery("#user-country").text(ymaps.geolocation.country);	  
  }
</script>

window.onload = function () {

jQuery("#user-city").text(ymaps.geolocation.city);

jQuery("#user-region").text(ymaps.geolocation.region);

jQuery("#user-country").text(ymaps.geolocation.country);

}

</script>

I think everything in the script is understandable and it is not necessary to describe it. And so, we connected the Yandex API call script, now in the desired place on your site, where you want to bring the city add the following code:

<div><b>Your country:</b> <span id="user-country"></span></div>
<div><b>Your region:</b> <span id="user-region"></span></div>
<div><b>Your city:</b> <span id="user-city"></span></div>

<div><b>Your country:</b> <span id="user-country"></span></div>

<div><b>Your region:</b> <span id="user-region"></span></div>

That's all, now on your site will be displayed the country, region and city of the visitor specified Yandex API.

Now let's look at a small example of how to use this geolocation script in the case. For example, if you need to display some text on your site that should be shown only for a specific city, use the following code:

<script type="text/javascript"> 
  window.onload = function () {
   var city = ymaps.geolocation.city;
    if(city == 'Хмельницкий'){
       jQuery("#user-city").text('Free delivery in Khmelnitsky');
     } else {
       jQuery("#user-city").text('Delivery by New Mail');
   }
}
</script>

window.onload = function () {

var city = ymaps.geolocation.city;

if(city == 'Хмельницкий'){

jQuery("#user-city").text('Free delivery in Khmelnitsky');

} else {

jQuery("#user-city").text('Delivery by New Mail');

}

</script>

What does this example do? - As you may have guessed, we show the text "Delivery by New Mail" for all regions, but if a user from the city of Khmelnitsky enters the site, instead of the text specified, the text "Free delivery via Khmelnitsky" will be displayed, according to this principle you can add any dynamic information, addresses, telephones, some kind of information for a certain city.

That's actually all I wanted to write about the possibility of displaying the city using Yandex API, below you can see an example of this option.

View an example

Definition of the country and city of the visitor by IP.

Next step we will have another alternative way of geolocation on the site, which works very quickly, and by the parameters the accuracy of the city definition is probably even better than the definition of the city by Yandex, well, plus no restrictions and locks. And so, in this example we will use the Sypex Geo library and the regular php features.

To describe how much the Sypex Geo library is cool, fast and multifunctional, I will not, about this you can find information on the Internet and yourself, I will say simply - Sypex Geo is a quick definition of a city by the visitor's IP.

Well, let's define the IP, the country, the user's city in PHP and Sypex Geo, and we'll look at the connection instruction. Below, under the article, you will be able to download a ready-made script for determining the city of the user on the site, here we will consider how to connect all this.

An example of the work can be seen below:

We have determined your location as follows:

Your country: United States
Your region: Ohio
You are now in city Columbus
Your IP Address: 18.221.173.72
Your country code: US
Your country number: 225

And so, download the Sypex Geo script to your computer, and unpack the downloaded archive, get the SxGeo folder downloaded to the root of your site, after there are two options for connecting:

The first is the easiest, in the output location you need, we add the following code:

<?php include "SxGeo/index.php"; ?>

1	<?php include "SxGeo/index.php"; ?>

Thus, we just displayed on the site the display of information from the SxGeo/index.php file, in which you can change the information in a way you need, if you want.

The second way is also not complicated, as well as in the first method you need to place where you want to display the visitor's city and other information to add the following code:

<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');
$city = $SxGeo->getCity($ip); // returns with brief information, without the name of the region and time zone
$countryid = $SxGeo->getCountryId($ip); //returns country number
$country = $SxGeo->getCountry($ip); // returns a two-digit ISO country code
$region = $SxGeo->getCityFull($ip); // returns Province

// Displayed data beginning
echo "<b>Your country:</b> ";
echo ($region['country']['name_ru']); // Country
echo "<br>";
echo "<b>Your region:</b> ";
echo ($region['region']['name_ru']); // Region
echo "<br>";
echo "<b>You are now in";
echo " ";
echo "city </b>";
echo " ";
echo ($city['city']['name_ru']); // City
echo "<br>";
echo "<b>Your IP Address:</b> ";
echo $_SERVER['REMOTE_ADDR']; // IP Address
echo "<br>";
echo "<b>Your country code:</b> ";
echo ($country); // Code of the country
echo "<br>";
echo "<b>Your country number:</b> ";
echo ($countryid); // Country number
echo "<br>";
// Display data end
?>

<?php

$ip = $_SERVER['REMOTE_ADDR'];

include("SxGeo.php");

$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');

$city = $SxGeo->getCity($ip); // returns with brief information, without the name of the region and time zone

$countryid = $SxGeo->getCountryId($ip); //returns country number

$country = $SxGeo->getCountry($ip); // returns a two-digit ISO country code

$region = $SxGeo->getCityFull($ip); // returns Province

// Displayed data beginning

echo "<b>Your country:</b> ";

echo ($region['country']['name_ru']); // Country

echo "<br>";

echo "<b>Your region:</b> ";

echo ($region['region']['name_ru']); // Region

echo "<br>";

echo "<b>You are now in";

echo " ";

echo "city </b>";

echo " ";

echo ($city['city']['name_ru']); // City

echo "<br>";

echo "<b>Your IP Address:</b> ";

echo $_SERVER['REMOTE_ADDR']; // IP Address

echo "<br>";

echo "<b>Your country code:</b> ";

echo ($country); // Code of the country

echo "<br>";

echo "<b>Your country number:</b> ";

echo ($countryid); // Country number

echo "<br>";

// Display data end

And in it to make changes and the required information output. Also do not forget about the paths in the third and fourth line, they must match your site. That's actually all we had to do so that the site showed the exact location of the visitor.

How to connect this geolocation script in the online store Opencart?

If you want to connect this script in the online store to sms opencart, in this case the connection is drastically changed, because if you connect according to the instructions described above, you get an error and nothing will work. Therefore, I want to describe here immediately the method of connecting the definition of a visitor's city in the online store opencart.

First of all, in order to add the user's city script to the online store, you again need to download the script below, unpack it and upload the SxGeo folder to the root of your site.

The next step is to open the index.php file located at the root of your online store and find the line:

$registry->set('request', $request);

1	$registry->set('request', $request);

After that we add the following:

// new SxGeo
require_once(DIR_SYSTEM . 'library/SxGeo.php');
$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');
$registry->set('SxGeo', $SxGeo);

// new SxGeo

require_once(DIR_SYSTEM . 'library/SxGeo.php');

$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');

$registry->set('SxGeo', $SxGeo);

Note! In case you have a Geo IP module installed in the store, but you still want to connect this script (there are different situations), then you need to add a slightly different code, namely:

// new SxGeo
//require_once(DIR_SYSTEM . 'library/SxGeo.php');
$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');
$registry->set('SxGeo', $SxGeo);

// new SxGeo

//require_once(DIR_SYSTEM . 'library/SxGeo.php');

$SxGeo = new SxGeo('SxGeo/SxGeoCity.dat');

$registry->set('SxGeo', $SxGeo);

That is, everything is the same, just comment the first line, because otherwise you will get an output error, a class conflict that is already present in the Geo IP module.

Also, pay attention to the paths in the first and second line, if you copy the folder not to the root but to another place, the paths must match your store structure.

After opening the file index.php which is in the SxGeo folder and changing all its contents to this code:

<?php 
$ip = $this->request->server['REMOTE_ADDR'];
$city = $this->SxGeo->getCity($ip); // returns with brief information, without the name of the region and time zone
$countryid = $this->SxGeo->getCountryId($ip); //returns country number
$country = $this->SxGeo->getCountry($ip); // returns a two-digit ISO country code
$region = $this->SxGeo->getCityFull($ip); // returns Province

// Displayed data beginning
echo "My country: ";
echo ($region['country']['name_ru']); // Country
echo "<br>";
echo "My region: ";
echo ($region['region']['name_ru']); // Region
echo "<br>";
echo "I live in";
echo " ";
echo "City.";
echo " ";
echo ($city['city']['name_ru']); // City
echo "<br>";
echo "My IP Address: ";
echo $this->request->server['REMOTE_ADDR']; // IP Address
echo "<br>";
// Display data end
?>

<?php

$ip = $this->request->server['REMOTE_ADDR'];

$city = $this->SxGeo->getCity($ip); // returns with brief information, without the name of the region and time zone

$countryid = $this->SxGeo->getCountryId($ip); //returns country number

$country = $this->SxGeo->getCountry($ip); // returns a two-digit ISO country code

$region = $this->SxGeo->getCityFull($ip); // returns Province

// Displayed data beginning

echo "My country: ";

echo ($region['country']['name_ru']); // Country

echo "<br>";

echo "My region: ";

echo ($region['region']['name_ru']); // Region

echo "<br>";

echo "I live in";

echo " ";

echo "City.";

echo " ";

echo ($city['city']['name_ru']); // City

echo "<br>";

echo "My IP Address: ";

echo $this->request->server['REMOTE_ADDR']; // IP Address

echo "<br>";

// Display data end

And the most recent item is the output of the city on the pages of our store, for this, at any place in your template where you want to display the information, add the following:

<?php include 'SxGeo/index.php'; ?>

1	<?php include 'SxGeo/index.php'; ?>

That's all, now on the pages of your online store, will flaunt information about the location of your buyer.

DOWNLOAD READY-SCRIPT SYPEX GEO YOU CAN BELOW

DOWNLOAD SCRIPT SYPEX GEO

The location of the user on the map.

Well, in the end, a small bonus from Google Map, the user's location on the Google map. A simple script showing the map with a mark of the current position of the visitor, below you can look at an example, maybe someone will come in handy.

Your location on Google Maps:

To add a map to your Google site with a visitor's city definition, paste the following code anywhere on your website:

<section id="wrapper">
 <script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?key=[google_key]">
 </script>
<article>
</article>
<script>
function success(position) {
 var mapcanvas = document.createElement('div');
 mapcanvas.id = 'mapcontainer';
 mapcanvas.style.height = '400px';
 mapcanvas.style.width = '600px';
 document.querySelector('article').appendChild(mapcanvas);
 var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 var options = {
 zoom: 15,
 center: coords,
 mapTypeControl: false,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 },
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
 var marker = new google.maps.Marker({
 position: coords,
 map: map,
 title:"Are you here!"
 });
}
if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(success);
} else {
 error('Geolocation not supported');
}
</script>
</section>

src="https://maps.googleapis.com/maps/api/js?key=[google_key]">

</script>

</article>

function success(position) {

var mapcanvas = document.createElement('div');

mapcanvas.id = 'mapcontainer';

mapcanvas.style.height = '400px';

mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = {

zoom: 15,

center: coords,

mapTypeControl: false,

navigationControlOptions: {

style: google.maps.NavigationControlStyle.SMALL

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({

position: coords,

map: map,

title:"Are you here!"

});

}

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(success);

} else {

error('Geolocation not supported');

}

</script>

</section>

Where [google_key] replace with your own key that you must get from Google for your site. That's all, use it on health, there will be questions or recommendations, write in the comments. Good luck to you!