いよいよ来月末ですね。GDPRについては、ジェトロのハンドブックがQ&A付きでわかりやすいのでぜひ一読ください。

EUからのアクセスが来る可能性がある以上、日本語でやってるからって対策しないわけにはいかないでしょう。知り合いがWordCamp EUやJAWS-UG オランダ支部に参加した際に、「GDPR対策できてないから返ってくるまでうちのサイト見ないで」って言うわけにもいかないですし。

ただあまりにも実装に関する記事が見当たらないので、半泣きになりながらいろいろ試してみました。（2018/04/20時点ではこのサイトはGDPR未対応です。）

Cookie利用の同意

最近webサイトを訪問すると、こういう表示がでてくることが増えました。

これはGDPRの中で「個人データを利用するためには同意が必要」という記述があるためです。上記のサンプルはCookieBotというサービスを利用されている様子です。

ただしページ数やドメイン数の制限を超えると有料プランで契約する必要があるため、本格的にEUでビジネスをしたい人でなければちょっと悩ましい出費になるかもしれません。

React SPAにCookie利用の同意を組み込む

Cookie Concentというオープンソースのライブラリがありましたので、今回はこちらを使っていきます。そしてこれの素敵なところは、Reactでラッピングしたライブラリ（react-cookie-consent）もあることです。

ということで早速使っていきましょう。

$ create-react-app cookie-consent-react-sample
$ cd cookie-consent-react-sample
$ yarn add react-cookie-consent cookie

あとはsrc/App.jsを以下のように編集します。

import React, { Component } from 'react';
import CookieConsent from "react-cookie-consent"
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <CookieConsent>
            This website uses cookies to enhance the user experience.
        </CookieConsent>
      </div>
    );
  }
}

export default App;

CookieConsentというタグを使うことで、同意バナーを表示できます。

動作画面

yarn startすると下のような表示になります。

I understandをクリックすると、以下のように表示が変わります。

CookieConsentというcookieが付与されて、それを元にバナーの表示を切り分けしている様子です。

LogRocketのトラッキング制御と連携してみる

Google Analyticsとかは誰かがやってくれそうなので、あえてニッチなところで試してみます。gtag覚えるのめんどかったとかでは決してありません。

LogRocketのトラッキングは、src/index.jsで以下のようにして開始しています。

import React from 'react';
import ReactDOM from 'react-dom';
import LogRocket from 'logrocket';
import App from './App';

if (process.env.NODE_ENV === 'production') {
  LogRocket.init('hode/fuga');
}
ReactDOM.render(<App />, document.getElementById('root'));

ここで上記のcookieがtrueになっている場合のみ、トラッキングを実行するようにしましょう。

まず以下のようなsrc/cookie.jsを用意して、欲しいCookieだけとれる関数を用意します。

import cookie from 'cookie';

export function getCookieByName(name = 'CookieConsent') {
  const cookies = cookie.parse(document.cookie)
  return cookies[name] ? true : false
}

続いてsrc/index.jsを次のように変えます。

import React from 'react';
import ReactDOM from 'react-dom';
import LogRocket from 'logrocket';
import App from './App';

import { getCookieByName } from './cookie'

// productionビルドかつcookie利用に同意している場合のみLogRocketをinitする
if (process.env.NODE_ENV === 'production' && getCookieByName() ) {
  LogRocket.init('hode/fuga');
}
ReactDOM.render(<App />, document.getElementById('root'));

これで明示的に許可された場合のみトラッキングを行うようにすることができます。

しかしこれだけでは、同意ボタンを押した時のアクセスはトラッキングできません。なのでボタンクリック時にリロードするようにしましょう。

import React, { Component } from 'react';
import CookieConsent from "react-cookie-consent"
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <CookieConsent onAccept={() => window.location.reload()}>
            This website uses cookies to enhance the user experience.
        </CookieConsent>
      </div>
    );
  }
}

export default App;

ただし実際に利用する際は、本当にトラッキングが意図したタイミングのみで時刻で来ているかなどを確認した上でリリースしましょう。

取り急ぎ、「どうやって対応すればええねん・・・」という気持ちからようやく一歩進めたので、記録します。

このブログも施行前には対応する予定ですので、その際にまた何かTipsが出てきたら記事にします。