我如何知道我的用户是否来自欧盟国家？

Question

因为欧盟对广告出版商有着特殊的法律。我想为我的用户显示cookie同意。但我只是在互联网上找不到任何好的框架来判断用户是否来自欧盟国家。

我有办法做到这一点吗？

希望能得到一些细节上的答案。

谢谢

Answer 1

如果我正确理解了您的问题，您可以很容易地通过确定用户的本地时区来做到这一点。做这件事有几种方法。

Moment.js

力矩时区有一个函数来猜测用户的时区。如果您使用的是最新版本，这是相当准确的。

示例：

<div id="guess"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data-2012-2022.min.js"></script>
<script>
  document.getElementById('guess').innerText = moment.tz.guess();
</script>

Moment.js使用Intl，这是一个内置的JavaScript国际化API。它还拥有自己的数据库，它根据Intl API的结果来提供更准确的信息。它还要求您在Moment.js开始工作之前包含它。

Jstz包

杰斯特斯是一个简单的更轻的包，用于检测时区。它还利用了Intl API，因此您可以对其结果充满信心。要使用该包，您可以获取CDN，如下所示：

<div id="guess"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.6/jstz.min.js"></script>
<script>
  document.getElementById('guess').innerText = jstz.determine().name();
</script>

Intl API本身

您可以直接使用Intl API！

Intl对象是ECMAScript国际化API的命名空间，它提供语言敏感的字符串比较、数字格式以及日期和时间格式。Intl对象提供对几个构造函数的访问，以及国际化构造函数和其他语言敏感函数所共有的功能。

示例用法：

<div id="guess"></div>
<script>
  document.getElementById('guess').innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
</script>

您可以从用于检测时区的这些库中注意到的是，它们不需要来自您端的任何网络调用。这意味着，如果您只打算选择用户时区，则可能不需要进行IP查找。

然后，您只需将时区与特定的EU时区匹配，并确定您的用户是否来自欧盟内部。

如果要对用户进行实际/准确的定位，则必须使用GeoLocation。下面是一个简单的脚本，它可以做到这一点：location.js。

您可能需要检查的其他API(任何适合您的API)：

• http://ip-api.com/json
• https://ipinfo.io/
• https://geoip-db.com

Answer 2

除了公认的答案外，我还做了所有艰苦的工作，以确定哪些时区受“探地雷达法”的制约。我使用了dayjs包，它类似于momentjs。

const EU_TIMEZONES = [
  'Europe/Vienna',
  'Europe/Brussels',
  'Europe/Sofia',
  'Europe/Zagreb':
  'Asia/Famagusta',
  'Asia/Nicosia',
  'Europe/Prague',
  'Europe/Copenhagen',
  'Europe/Tallinn',
  'Europe/Helsinki',
  'Europe/Paris',
  'Europe/Berlin',
  'Europe/Busingen',
  'Europe/Athens',
  'Europe/Budapest',
  'Europe/Dublin',
  'Europe/Rome',
  'Europe/Riga',
  'Europe/Vilnius',
  'Europe/Luxembourg',
  'Europe/Malta',
  'Europe/Amsterdam',
  'Europe/Warsaw',
  'Atlantic/Azores',
  'Atlantic/Madeira',
  'Europe/Lisbon',
  'Europe/Bucharest',
  'Europe/Bratislava',
  'Europe/Ljubljana',
  'Africa/Ceuta',
  'Atlantic/Canary',
  'Europe/Madrid',
  'Europe/Stockholm'
];

const isConsentRequired = () => {
  dayjs.extend(timezone);
  return EU_TIMEZONES.includes(dayjs.tz.guess());
}

Answer 3

这是基于@Andrew Samole答案的，但适用于vanilla：

function determineIfCookieConsentRequired() {
    const EU_TIMEZONES = [
        'Europe/Vienna',
        'Europe/Brussels',
        'Europe/Sofia',
        'Europe/Zagreb',
        'Asia/Famagusta',
        'Asia/Nicosia',
        'Europe/Prague',
        'Europe/Copenhagen',
        'Europe/Tallinn',
        'Europe/Helsinki',
        'Europe/Paris',
        'Europe/Berlin',
        'Europe/Busingen',
        'Europe/Athens',
        'Europe/Budapest',
        'Europe/Dublin',
        'Europe/Rome',
        'Europe/Riga',
        'Europe/Vilnius',
        'Europe/Luxembourg',
        'Europe/Malta',
        'Europe/Amsterdam',
        'Europe/Warsaw',
        'Atlantic/Azores',
        'Atlantic/Madeira',
        'Europe/Lisbon',
        'Europe/Bucharest',
        'Europe/Bratislava',
        'Europe/Ljubljana',
        'Africa/Ceuta',
        'Atlantic/Canary',
        'Europe/Madrid',
        'Europe/Stockholm'
      ];

    var dayjs_script = document.createElement('script');
    var dayjs_tz_script = document.createElement('script');

    dayjs_script.onload = function(e) {
        document.head.appendChild(dayjs_tz_script);
    }
    dayjs_tz_script.onload = function () {
        dayjs.extend(dayjs_plugin_timezone);
        var tz = dayjs.tz.guess();
        if(EU_TIMEZONES.includes(tz)) {
            checkIfAcceptedCookies();
        } else {
            onAcceptedCookies();
        }
    };
    dayjs_script.onerror = function() {
        checkIfAcceptedCookies();
    }
    dayjs_tz_script.onerror = function() {
        checkIfAcceptedCookies();
    }

    dayjs_tz_script.src = 'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.6/plugin/timezone.min.js';
    dayjs_script.src = 'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.6/dayjs.min.js';
    document.head.appendChild(dayjs_script);
}

只需运行determineIfCookieConsentRequired()来检查是否需要同意。

然后您需要创建两个函数：

• checkIfAcceptedCookies()，它应该检查用户是否已经同意或者显示了一个横幅，要求他们
• 一旦曲奇被同意(或者如果不是必需的话)，onAcceptedCookies()可以做你想做的任何事情。