HTML 5 Geolocation

THIS ARTICLE WILL HELP YOU:

• Overview
• Advantage
• Disadvantage
• Example Implementation Instructions

Overview

Although Convert provides IP Geolocation, it may happen in some cases in which be more appropriate to use the browser-based HTML 5 Geolocation. 

Convert recommends that the IP Geolocation is preferably used and that HTML 5.0 Geolocation is only used when the previous does not fill your requirements.

Advantage

HTML 5 is more accurate as it does not rely on IP network databases for determining location. These databases might be outdated in some cases, and IP's may be shared across geographical regions. However, some browser might also use IP based geolocation in certain cases.

Disadvantage

HTML 5 browser-based geolocation needs user authorization. When implemented, the visitor browser will ask for the visitor permission to share its location. At the same time, the Original page will be shown, until the visitor grants permission.

This might not be always ideal for some types of experiences.

Example Implementation Instructions

The following example allows geolocation by the country of Mexico. You will need to modify the current code to segment by a different country, or other address levels, such as region (state).

1. Fist get a Google Maps API key and install on the pages where you want to use the HTML 5.0 Geolocation and install it before the Convert tracking code, so Convert can read the geolocation variables. Find the instructions on how to this here.

2. Insert the following code in the Global Project Javascript.

   
   

   convertData.geo.html5country = null;
   
   console.log('Global Project Javascript');
   
   convertData.geo.html5country = null;
   
   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function (position) {
   
           //GET USER CURRENT LOCATION
           var locCurrent = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   
           //INSERT COUNTRY ON NEW VARIABLE
           var geocoder = new google.maps.Geocoder();
               geocoder.geocode({ 'latLng': locCurrent }, function (results, status) {
                   var locItemCount = results.length;
                   var locCountryNameCount = locItemCount - 1;
                   var locRegionNameCount = locItemCount - 2;
                   convertData.geo.html5country = results[locCountryNameCount].formatted_address;
                   convertData.geo.html5region = results[locRegionNameCount].formatted_address;
   
           });
       });
   }

   
   
   

3. Edit your Experience audience and create a new one. Add the following code as a JS Condition.

   (function() { if ( !convertData.geo.html5country ) {      convert_recheck_experiment();   }    else  {     return ( convertData.geo.html5country == 'Mexico');   } })()

4. Your experience should be now ready to only be triggered with the set geolocation.