Using geolocation in your website

geolocation
The Geolocation API lets you discover, with the user's consent, the user's location. You can use this functionality for things like guiding a user to their destination and geo-tagging user-created content; for example, marking where a photo was taken.

The Geolocation API also lets you see where the user is and keep tabs on them as they move around, always with the user's consent (and only while the page is open). This creates a lot of interesting use cases, such as integrating with backend systems to prepare an order for collection if the user is close by.

You need to be aware of many things when using the Geolocation API. This guide walks you through the common use cases and solutions.
TL;DR
Use geolocation when it benefits the user.
Ask for permission as a clear response to a user gesture.
Use feature detection in case a user's browser doesn't support geolocation.
Don't just learn how to implement geolocation; learn the best way to use geolocation.
Test geolocation with your site.
When to use geolocation
Find where the user is closest to a specific physical location to tailor the user experience.
Tailor information (such as news) to the user's location.
Show the position of a user on a map.
Tag data created inside your application with the user's location (that is, geo-tag a picture).
Ask permission responsibly
Recent user studies have shown that users are distrustful of sites that simply prompt the user to give away their position on page load. So what are the best practices?

Assume users will not give you their location
Many of your users won't want to give you their location, so you need to adopt a defensive development style.

Handle all errors out of the geolocation API so that you can adapt your site to this condition.
Be clear and explicit about your need for the location.
Use a fallback solution if needed.
Use a fallback if geolocation is required
We recommend that your site or application not require access to the user's current location. However, if your site or application requires the user's current location, there are third-party solutions that allow you to obtain a best guess of where the person currently is.

These solutions often work by looking at the user's IP address and mapping that to the physical addresses registered with the RIPE database. These locations are often not very accurate, normally giving you the position of the telecommunications hub or cell phone tower that is nearest to the user. In many cases, they might not even be that accurate, especially if the user is on VPN or some other proxy service.

Always request access to location on a user gesture
Make sure that users understand why you’re asking for their location, and what the benefit to them will be. Asking for it immediately on the homepage as the site loads results in a poor user experience.
Instead, give the user a clear call to action or an indication that an operation will require access to their location. The user can then more easily associate the system prompt for access with the action just initiated.

Give a clear indication that an action will request their location
In a study by the Google Ads team, when a user was asked to book a hotel room in Boston for an upcoming conference on one particular hotels site, they were prompted to share their GPS location immediately after tapping the "Find and Book" call to action on the homepage.

In some cases, the user became frustrated because they didn't understand why they were being shown hotels in San Francisco when they wanted to book a room in Boston.

A better experience is to make sure users understand why you’re asking them for their location. Add a well-known signifier that is common across devices, such as a range finder, or an explicit call to action such as “Find Near Me.”
Watching the user's location
The Geolocation API allows you to obtain the user's location (with user consent) with a single call to getCurrentPosition().

If you want to continually monitor the user's location, use the Geolocation API method, watchPosition(). It operates in a similar way to getCurrentPosition(), but it fires multiple times as the positioning software:

Gets a more accurate lock on the user.
Determines that the user's position is changing.

var watchId = navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; });

When to use geolocation to watch the user's location
You want to obtain a more precise lock on the user location.
Your application needs to update the user interface based on new location information.
Your application needs to update business logic when the user enters a certain defined zone.
Best practices when using geolocation
Always clear up and conserve battery
Watching for changes to a geolocation is not a free operation. While operating systems might be introducing platform features to let applications hook in to the geo subsystem, you, as a web developer, have no idea what support the user's device has for monitoring the user's location, and, while you're watching a position, you are engaging the device in a lot of extra processing.

After you no longer need to track the user's position, call clearWatch to turn off the geolocation systems.

A useful website for BtoB

btob
1. A Defined Goal
The first step of creating or re-designing any website is defining its goal. That goal should be both qualitative and quantitative and will help you ensure you have a clear foundation and direction for the site.

There are two categories of goals to keep in mind: company goals and user goals.

What KPIs is your company working toward? What’s your ultimate revenue goal and what targets do you have for SQLs, MQLs and site visitors? 

On top of that, when a user visits your site, what do you want them to walk away knowing about your company? What should they be able to communicate about your organization to their coworker, manager or CEO? 

Those goals will help guide your content strategy, which in turn informs your information architecture.

2. Intentional Information Architecture
Information architecture is most commonly associated with your navigation and footer, but it’s more than that. It’s the folder structure your website is built on, the hierarchical organization of the content within the site.

Effective information architecture requires a deep understanding of your audience because they’re the ones your website is for. Buyer persona documentation including pain points and the ways your company addresses them provides a great guide. 

As you develop your information architecture, we recommend giving users at least two pathways through your website. 

For example, if you talk about products and solutions by name in your navigation, also provide a user-centric path, like role and industry, so users can choose their own adventure to find the content most relevant to them based on how they identify.

Additionally, avoid using internal lingo in your page names and instead use plain text that makes it clear what content a user will find on that site page.

3. High-Quality Content
Content is the most important thing on a website. It doesn’t matter how beautiful your site is, if the content is weak, it won’t achieve its objective of educating users and providing them with the necessary information to make a strategic decision about purchasing your solution.

The voice and tone of your content should be targeted toward your users, and you should use language your audience is familiar with. Clear communication won’t just help you reach users — it’ll also help you rank in search results.

Download our free e-book to learn the 10 essential elements of a successful website redesign.
Some content your website should contain include:

Homepage: The goal of the homepage is to introduce your company at a high-level, answer “what does this company do?” and then get users to the content that’s relevant for them as quickly as possible. You don’t want your homepage to be just a navigation resource, but it should be the starting point for users to begin their journey through your website.
About section: This is where you can present your company narrative. It’s the one part of your website that focuses on you. Studies show that users remember stories more than anything else, so presenting your company’s narrative can help visitors connect with your brand.
Solution pages: Highlight the ways users can benefit from your product or service and explain how your company addresses prospects’ pain points. These pages should also include an intentional next step that enables prospects to learn more about product offerings or key features.
Proof points: Don’t just tell users how great you are; show them. You can do that by leveraging case studies, testimonials, customer logos, awards and accolades. These resources become especially powerful when it’s tied with your marketing copy so you’re combining your showing and telling.
On website pages, we recommend leveraging the inverted pyramid style of writing in which you start with the most important details. For blog posts and longer-form content, that’s not always the best format, but for site pages, users spend such little time browsing that they typically skim instead of reading in-depth. Presenting the most important information at the top of the page makes it most likely that visitors will find what they’re looking for.

Also, keep in mind that content is more than just written copy. Imagery and video are also content, and those visualizations are just as important as the written words. If possible, vary the content types you use because you don’t know what’s going to resonate best with the user.

4. A Strategic Next Step on Every Page
For every page on your website, ask yourself, “if a user was only to visit this site page, what’s the one thing we want them to walk away knowing?” then consider what you want the primary call-to-action on that page to be.

That goal and next step are the center of your content strategy so you can make sure you’re not trying to stuff too much information into a page.

The reason you want to give a next-step is twofold. You want to educate users. So in order to empower them to dive deeper into a category you need to have content that goes beyond site pages, like blogs, webinars and guides. Additionally, to capture leads and nurture them down the funnel, you need conversion paths and conversion opportunities.

5. Contextual Conversion Opportunities
Once a user wants to learn more about a topic or get in touch with a sales rep, you need to be able to capture their information through forms and chatbots. The information you collect will give your marketing and sales teams a deeper understanding of what the prospect is interested in so they can provide contextually-relevant follow-up.

Form strategy and lead scoring are both major components of conversion opportunities, even though they aren’t things users will necessarily be aware of. 

Your landing pages don’t exist just to look good. You need to ask the right questions on forms and have the backend set up so you can act upon the information provided.

6. Continuity with Your Brand Off-Site 
Prospects who enter the sales process after converting on your website should have a consistent experience across their buyer’s journey.

Your sales team should be aware of the experience your website creates and the actions individual prospects took so that their efforts contribute toward the overall experience prospects have with your company. Your marketing team should make sure your website content aligns with the messaging of your sales and service teams as well. 

At the end of the day, your website is just one way that prospects can engage with your company. The way your brand is presented across your website needs to match how it’s represented in every other communication. Whether a prospect is learning from a pillar page on your website, attending a webinar with your product team or on a call with a sales rep, your company should be providing them with value and a cohesive experience.