使用IPstack的地理位置按位置个性化您的UX

Which site is better? This is the age-long question that many website owners are still trying to answer so they can dominate their niche.

哪个网站更好? 这是一个长期存在的问题,许多网站所有者仍在尝试回答这些问题,以便他们可以控制自己的利基市场。

Take a look at Google Search — there's no denying that it is the most visited search engine/website in the world. It begs the question of why people keep going back to it and the answer is quite simple.

看一下Google搜索-无可否认,它是世界上访问量最大的搜索引擎/网站。 这就引出了为什么人们会继续使用它的问题,答案很简单。

They are not just good at what they do, they also care about their users (well...to an extent).

他们不仅擅长于自己的工作,而且还关心自己的用户(在某种程度上……)。

Google's search uses a ranking system that decides the result for a user's search. This system uses their location, speed of websites with search query content and a quadrillion other factors and does this in real-time too. The search the user asked for is now "personalized."

Google的搜索使用一种排名系统来确定用户搜索的结果。 该系统使用其位置,具有搜索查询内容的网站的速度以及四千万个其他因素,并且也实时地执行此操作。 用户要求的搜索现在已“个性化”。

什么是个性化 ( What is Personalization )

Personalization is a means of meeting the customer's needs more effectively and efficiently, making interactions faster and easier and, consequently, increasing customer satisfaction and the likelihood of repeat visits

个性化是一种更有效,更有效地满足客户需求,使交互变得更快,更轻松,从而提高客户满意度和再次访问的可能性的方式。

☝☝ That's the boring definition

definition 那是无聊的定义

Personalization simply means building a website that's unique to a user.

个性化只是意味着建立一个用户唯一的网站。

This article with show you how to use the user's location using IPstack's geolocation service.

本文将向您展示如何使用IPstack的地理位置服务来使用用户的位置。

什么是IPstack ( What is IPstack )

Ipstack.com is a provider of real-time geolocation data. The API is used by developers, SMBs and even large corporations all around the world in various implementations. The API covers more 2 million unique locations in more than 200.000 cities around the world and provides up-to-date data based on rock-solid sources.

Ipstack.com是实时地理位置数据的提供商。 全球各地的开发人员,中小型企业甚至大型公司都使用该API的各种实现。 该API覆盖了全球20万多个城市中的200万个唯一位置,并基于可靠的数据源提供了最新数据。

I think that the fact that companies like Samsung, Airbnb, Microsoft and many other big names like this use their service speaks volumes of their reliability.

我认为,像三星,Airbnb,微软和许多其他类似大公司这样的公司都在使用他们的服务这一事实说明了它们的可靠性。

It is also free to use for up to ten thousand lookups monthly no credit card required.

每月最多可免费使用多达一万次查询,而无需信用卡。

The thing is, there's so much you could do if you have a user's location. You could decide to use a language specific to that users' location, give them results based on their surroundings, even the little things like congratulating them on a yearly festival only in their region. There's so much more, but, let's not get crazy.

关键是,如果您拥有用户的位置,则可以做很多事情。 您可以决定使用一种特定于该用户所在位置的语言,根据他们的周围环境给他们提供结果,即使是一些小事情,例如只祝贺他们所在地区的年度节日。 还有更多,但是,让我们不要发疯。

Another common use of geolocation in personalizing a user's experience is location restriction. Take Netflix for example, they are not allowed to show certain movies in some countries, so this is where geolcation helps them out.

地理位置定位在个性化用户体验中的另一种常见用法是位置限制。 以Netflix为例,不允许它们在某些国家/地区放映某些电影,因此地理定位可以帮助他们摆脱困境。

入门 ( Getting started )

The first thing you need to do to get started using IPStack is to head over to the website and create a free account (no credit card required).

开始使用IPStack所需做的第一件事就是前往网站并创建一个免费帐户(无需信用卡)。

After creating a free account, you can find the API key on the dashboard. It looks like an MD5 string or a bunch of hexadecimal characters, this is mine:

创建免费帐户后,您可以在信息中心上找到API密钥。 它看起来像MD5字符串或一堆十六进制字符,这是我的:

d89c9f9821b1972eeb19ca7fa1c5d656

Don't worry, this key above won't work as it is now deactivated

别担心,上面的这个键现在无法使用,因此无法使用

To check the data behind an IP, just make an HTTP request to:

要检查IP背后的数据,只需发出HTTP请求即可:

http://api.ipstack.com/134.201.250.155?access_key=YOUR_API_KEY_HERE

You can literally post it in the browser and get a response.

您可以从字面上将其发布在浏览器中并获得响应。

如何在JavaScript(浏览器)中获取用户的IP地址 ( How to get a user's IP address in JavaScript (browser) )

It's almost impossible to get a users' IP address in the browser. There are ways around it, but it involves you making multiple HTTP requests.

在浏览器中获取用户的IP地址几乎是不可能的。 有很多解决方法,但是涉及到您发出多个HTTP请求。

How I did it for an old project

我是如何做旧项目的

  1. Make a request to ICANHAZIP

    ICANHAZIP请求
  2. Pass the IP address to the IP service.

    将IP地址传递给IP服务。

We can say this works, but it introduces latency and according to our article on Improving JavaScript application performance we learnt that less requests means faster apps.

可以说这是可行的,但是它引入了延迟,并且根据有关改善JavaScript应用程序性能的文章,我们了解到,更少的请求意味着更快的应用程序。

How to do it with IPstack

如何使用IPstack做到这一点

With IPstack, all you need to do is change the process above to:

使用IPstack,您所需要做的就是将上述过程更改为:

http://api.ipstack.com/check?access_key=YOUR_API_KEY_HERE

We are no longer passing the IP address to IPstack. They'll help get the users' IP address and give you the location of the user.

我们不再将IP地址传递给IPstack。 他们将帮助获取用户的IP地址,并为您提供用户的位置。

响应 ( The response )

When you run the request, you might get a response similar to this.

运行请求时,您可能会收到类似的响应。

{
  "ip": "134.201.250.155",
  "hostname": "134.201.250.155",
  "type": "ipv4",
  "continent_code": "NA",
  "continent_name": "North America",
  "country_code": "US",
  "country_name": "United States",
  "region_code": "CA",
  "region_name": "California",
  "city": "Los Angeles",
  "zip": "90013",
  "latitude": 34.0453,
  "longitude": -118.2413,
  "location": {
    "geoname_id": 5368361,
    "capital": "Washington D.C.",
    "languages": [
        {
          "code": "en",
          "name": "English",
          "native": "English"
        }
    ],
    "country_flag": "https://assets.ipstack.com/images/assets/flags_svg/us.svg",
    "country_flag_emoji": "??",
    "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
    "calling_code": "1",
    "is_eu": false
  },
  "time_zone": {
    "id": "America/Los_Angeles",
    "current_time": "2018-03-29T07:35:08-07:00",
    "gmt_offset": -25200,
    "code": "PDT",
    "is_daylight_saving": true
  },
  "currency": {
    "code": "USD",
    "name": "US Dollar",
    "plural": "US dollars",
    "symbol": "$",
    "symbol_native": "$"
  },
  "connection": {
    "asn": 25876,
    "isp": "Los Angeles Department of Water & Power"
  }
  "security": {
    "is_proxy": false,
    "proxy_type": null,
    "is_crawler": false,
    "crawler_name": null,
    "crawler_type": null,
    "is_tor": false,
    "threat_level": "low",
    "threat_types": null
  }
}

As you can see from the response above, you can see that IPstack returns a lot of information that we can use to enhance our user's experience.

从上面的响应中可以看到,您可以看到IPstack返回了很多信息,我们可以使用这些信息来增强用户的体验。

符合GDPR ( GDPR compliance )

If you haven't heard of GDPR, chances are that you might either fall into their trap or don't need it.

如果您还没有听说过GDPR ,那么您可能会陷入他们的陷阱或不需要它。

GDPR (General Data Protection Regulation) is a law that aims to protect the privacy of users in the European Union.

GDPR( 通用数据保护条例 )是旨在保护欧盟用户隐私的法律。

GDPR essentially prevents companies like Cambridge Analytica from gaining access to your data.

GDPR实质上阻止了诸如Cambridge Analytica之类的公司访问您的数据。

I asked an IPstack representative and they are GDPR compliant, so no worries there.

我问了一个IPstack代表,他们是GDPR兼容的,所以在那里不用担心。

结论 ( Conclusion )

If you are concerned with speed, I did a bunch of tests on IPstack's response time and it happens in an average of 82ms on a slow network. For simplicity and scale, IPstack is a no brainer.

如果您担心速度,我对IPstack的响应时间进行了一系列测试,在慢速网络中,平均响应时间为82ms。 为了简化和扩展,IPstack毫不费力。

One more thing before ending this article, you should probably put your IPstack API behind a server. What I mean is you instead of making a direct request from the browser to IPstack, make a request to your own route — thus, safe-guarding your API key on your own server.

在结束本文之前,还有一件事,您可能应该将IPstack API放在服务器后面。 我的意思是,您不是从浏览器直接向IPstack发出请求,而是向您自己的路由发出请求-因此,可以安全地保护自己服务器上的API密钥。

I talked to their reps and there's no way to handle that at the moment, but, they gave assurances that they'll get it done.

我与他们的代表交谈,目前尚无办法解决,但是,他们保证会完成。

The UX enhancements knowing a users' location allows is near-infinite, so go build something awesome.

知道用户位置允许的UX增强功能几乎是无限的,因此请构建一些很棒的东西。

翻译自: https://scotch.io/tutorials/personalize-your-ux-by-location-using-ipstacks-geolocation

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值