Let’s say you would like to dynamically change the phone number on a landing page depending on where a user is located. For example, if the person is in California you would like to show them the phone number for your California office on your landing page, but if they are in Japan you would like to show them the phone number for the Japanese office.
One way to implement this is using JavaScript and the HTML5 Geolocation API. The benefit of this approach is we can create one landing page and dynamically change it based on a user’s location, instead of multiple static landing pages.
Here is a demo of a landing page, where we show the phone number for the closest Marketo office to the user. We’ll walk through the technical implementation details below.
We create an object for office locations with latitude and longitude coordinates, and a second object with office phone numbers. In production, it would be a better practice to combine these two objects into a single object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//Coordinates for Marketo offices var officeLocations = { "San Mateo": {latitude: 37.5596465, longitude: -122.2870142}, "Atlanta": {latitude: 33.8547013, longitude: -84.35552349999999}, "Tokyo": {latitude: 35.6895, longitude: 139.6917}, "Dublin": {latitude: 53.3478, longitude: -6.2603097}, "Sydney": {latitude: -33.873651, longitude: 151.2068896}, "Portland": {latitude: 45.512089, longitude: -122.6763367}, "Tel Aviv": {latitude: 32.0852999, longitude: 34.78176759999999} } //Phone numbers for Marketo offices var officePhoneNumbers = { "San Mateo": "+1-650-376-2300", "Atlanta": "+1-877-260-6586", "Tokyo": "+81-03-6759-8280", "Dublin": "+353-1-242-3000", "Sydney": "+61-2-9045-2711", "Portland": "+1-877-260-6586", "Tel Aviv": "+1-877-260-6586" } |
We create a method to request a user’s location. To handle errors, if the user’s location is not accessible, we will default to Marketo’s headquarters and its phone number.
|
1 2 3 4 5 6 7 8 9 |
//Method to get user's current location. Returns a position object with user's geo coordinates function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(findNearestOffice); } else { x.innerHTML = "Marketo Location: San Mateo Marketo Phone Number: +1-877-260-6586"; } } |
Lastly, we’ll create a method to find the closest office to the user’s location, and then return the phone number for the closest office on the page. This method uses the findNearest method from Geolib, which is JavaScript library that provides geospatial operations.
|
1 2 3 4 5 6 |
//Find nearest Marketo office to user's location function findNearestOffice(position) { var nearestOffice = geolib.findNearest({latitude: position.coords.latitude, longitude: position.coords.longitude}, officeLocations); x.innerHTML = "Marketo Location: " + nearestOffice.key + " Marketo Phone Number: " + officePhoneNumbers[nearestOffice.key]; } |
Here’s the full implementation. We trigger the getLocation method when the user clicks the button on the page.
This GitHub repo has files needed to set up this demo.