Vue.jsでGoogle AnalyticsとGDPR対応？

はじめに

Vue.jsで作ったサイトにGoogle Analytics（以下GA）を入れようとしたらなんかGDPRに対応しろとかなんとか小難しいこと言われた……。
よくわかんないけど、とりあえずGAのcookieを導入するかどうか、訪問者さんに決めてもらおう。
というわけで、これで本当にGDPRに対応したことになるかどうかはわかりませんが、GAによるトラッキングを受け入れるかどうかを訪問者さんに決めてもらう機能を実装しました。
ツッコミどころは多分満載なのでツッコミ大歓迎です。

大まかな流れ

vue-analyticsとvue-cookie-accept-declineを導入し、前者を後者で制御します。

まず読むべき

Google Analytics、GDPR、Vuejsを熟読しましょう。
vue-analyticsプラグインを使ってGAのcookieを受け入れるかどうかを実装する方法が載っています。
重要なところとしては、Opt-in and opt-out on the flyにある、this.$ga.enable()とthis.$ga.disable()です。これを使えばGAを有効にするか無効にするか簡単に実装できるらしいです。

vue-analyticsの導入

プロジェクトのルートディレクトリに移動して、以下のコマンドを叩きましょう。

npm install vue-analytics

次にmain.jsを編集します。

main.js

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  // もしrouterを使っていたら以下を追加
  router
})

idの所には自分のGAトラッキングコードを入力します。
routerを使っていない場合は、どこかで

this.$ga.page('/')

を投げるみたいです。すみません、router利用者なので細かいところまでわかりません……。

vue-cookie-accept-declineの導入

npmでインストールします。yarnも使えるらしいです。

npm i vue-cookie-accept-decline

そしてmain.jsに追記

main.js

import VueCookieAcceptDecline from 'vue-cookie-accept-decline'
Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline)

それから、App.vue内の<template>の適当な所に以下のコードを追加します。<div id="app">の外側には置けませんよ。

App.vue

<vue-cookie-accept-decline
    :debug="false"
    :position="'bottom'"
    :disableDecline="false"
    :transitionName="'slideFromBottom'"
    @status="cookieStatus"
    @clickedAccept="cookieClickedAccept"
    @clickedDecline="cookieClickedDecline">

    <!-- Optional -->
    <div slot="message">
        We use cookies to ensure you get the best experience on our website. <a href="https://cookiesandyou.com/" target="_blank">Learn More...</a>
    </div>

    <!-- Optional -->
    <div slot="declineContent">
        Opt Out
    </div>

    <!-- Optional -->
    <div slot="acceptContent">
        Got It!
    </div>
</vue-cookie-accept-decline>

見ればわかると思いますが、<div slot="*">タグの内側は書き換えられます。

そして<script>のmethodsには以下を追加。

App.vue

 methods: {
   cookieStatus (status) {
        // サイトをロードした時の挙動
        // デフォルトはGA無効にしている
        // console.log('status: ' + status)
        this.status = status
        if(this.status == 'accept'){
          this.$ga.enable()
        }else{
          this.$ga.disable()
        }
    },
    cookieClickedAccept () {
        // console.log('here in accept')
        this.status = 'accept'
        this.$ga.enable()

        // GAを有効にした時、現在のページをリロードする
        // そうするとGAを有効にしたページからトラッキングを始められる
        // もしこれがなかったら、トラッキングはacceptボタンを押した次のページから
        // 開始される（たぶん）
        this.$router.go({path: this.$router.path})
    },
    cookieClickedDecline () {
        // console.log('here in decline')
        this.status = 'decline'
        this.$ga.disable()
    },
 }

そして、これを検証するためにGoogle Analytics Debuggerを導入しましょう。
使い方はよくわかってませんが、disableにした時はCookieの書き込みが拒否されたというエラーメッセージが出て、enableにした時はそれが出ないので、たぶんちゃんと動いているのでしょう。

という訳で

ざっくりしたVue.jsでのGA利用時のGDPR対応？を行いました。
でも多分法的には正確じゃないので、導入には十分に注意を払ってください。
これが動いている私のポートフォリオサイトは以下になります。どう動いているか気になるな、という時は、訪ねてみてください。
https://rotelstift-site.firebaseapp.com/