JavaScript だけで無料で IP アドレスを取得する方法

2020-05-242020-05-24

HTML

ツール

Google Adsense のアドセンス狩りなどの被害から自分のウェブサイトを守るために、

容疑者の IP アドレスを特定することが必要になります。

しかし、サーバがないに等しい静的サイトではサーバサイドの言語である PHP を使用することができません。

今回は、

PHP を使わずに JavaScript と外部 API を用いて、無料で IP アドレスを取得する方法
取得した IP アドレスを Google Analytics 画面に表示させる方法

をご紹介します。

関連記事Google Adsense 広告のクリックには注意しよう

IP アドレスを取得する

ipinfo.io というサービスを利用します。

scriptタグを JavaScript で動的に生成して、src属性にhttps://ipinfo.io?callback=callbackを指定します。

このscriptタグを、headタグの末尾に追加すると、API から JSONP 形式のデータがcallback関数を通して取得できます。

1<script>
2    var script = document.createElement('script');
3    script.src='https://ipinfo.io?callback=callback'
4    document.head.appendChild(script);
5
6    function callback(data) {
7        console.log(data.ip);
8    };
9    // またはアロー関数を使って
10    // callback = data => console.log(data.ip);
11</script>

これでコンソールに IP アドレスが表示されるようになります。

アロー関数について

コールバック関数外部から参照する

data.ipという値はcallback関数の外部から参照できないので、次のように書くことはできません。

1<script>
2    var script = document.createElement('script');
3    script.src='https://ipinfo.io?callback=callback'
4    document.head.appendChild(script);
5
6    function callback(data) {
7        const ip_adress = data.ip;
8    };
9    
10    console.log(ip_adress);
11</script>

-> ip_adress is not defined

これを解消するために、WeakMapを使用します。

WeakMapは連想配列の強化版で、のようなものです。

これを使えば、関数の外部からも関数内の値を参照できるようになります。

1<script>
2    var wm = new WeakMap;
3    var obj = {};
4    callback = data => wm.set(obj, data.ip);
5
6    var script = document.createElement('script');
7    script.src='https://ipinfo.io?callback=callback'
8    document.head.appendChild(script);
9
10    console.log(wm.get(obj));
11</script>

ところが、これだけではまだコンソールに表示されません。

これは、行動フローとしてこのscriptタグの処理（console.log(wm.get(obj));まで）がすべて終わった後に、

新たに生成されたscriptタグが IP アドレスを取得しているからです。

つまり、

IP アドレスを取得するためのscriptタグを生成
console.log()
新たに生成されたscriptタグが IP アドレスを取得

という流れになってしまっています。

window.onloadを使って、HTML の読み込みが完了してからconsole.log()を実行させます。

1<script>
2    var wm = new WeakMap;
3    var obj = {};
4    callback = data => wm.set(obj, data.ip);
5
6    var script = document.createElement('script');
7    script.src='https://ipinfo.io?callback=callback'
8    document.head.appendChild(script);
9
10    window.onload = () => console.log(wm.get(obj));
11</script>

Google Analytics と連携させる

Google Analyticsの画面から、

管理 > カスタム定義 > カスタムディメンションを選択します。

「新しいカスタムディメンション」をクリックし、内容を入力します。

「名前」は任意で、「範囲」を「ヒット」、「アクティブ」はチェックをします。

保存を押したあと、サンプルコードが出てきて、'dimension1'などと書かれた部分があるのですが、

その数字は後ほど使います。

さて、コードを編集します。

Google Analytics のトラッキングコードに gtag.js を使っているなら、

次のようなコードがheadタグの間に挿入されていると思います。

1<!-- Global site tag (gtag.js) - Google Analytics -->
2<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>
3<script>
4    window.dataLayer = window.dataLayer || [];
5    function gtag(){dataLayer.push(arguments);}
6    gtag('js', new Date());
7
8    gtag('config', 'UA-000000000-0');
9</script>

カスタムディメンションを使用するために、次のように編集します。

1<!-- Global site tag (gtag.js) - Google Analytics -->
2<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>
3<script>
4    window.dataLayer = window.dataLayer || [];
5    function gtag(){dataLayer.push(arguments);}
6    gtag('js', new Date());
7
8    gtag('config', 'UA-000000000-0', {
9        'custom_map': {
10            'dimension1': 'ip'
11        },
12        'ip': wm.get(obj)
13    });
14</script>

これをさきほどのコードとあわせます。

1<!-- Global site tag (gtag.js) - Google Analytics -->
2<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>
3<script>
4    var wm = new WeakMap;
5    var obj = {};
6    callback = data => wm.set(obj, data.ip);
7
8    var script = document.createElement('script');
9    script.src='https://ipinfo.io?callback=callback'
10    document.head.appendChild(script);
11
12    window.onload = () => {
13        window.dataLayer = window.dataLayer || [];
14        function gtag(){dataLayer.push(arguments);}
15        gtag('js', new Date());
16
17        gtag('config', 'UA-000000000-0', {
18            'custom_map': {
19                'dimension1': 'ip'
20            },
21            'ip': wm.get(obj)
22        });
23    };
24</script>

これで取得した IP アドレスが Google Analytics に認識されるようになります。

Google Analytics から確認できるようにする

Google Analytics の画面から、

カスタム > カスタムレポート > 新しいカスタムレポートを選択します。

ディメンションの詳細 > ディメンションの追加から、さきほど設定したカスタムディメンションを選択します。

例えば、IP という名前にしていれば、IP と検索すれば出てきます。

他の項目を設定して保存すれば、カスタムレポートから IP アドレスを確認することができるようになります。

お役に立てれば幸いです。

では