feat(*): introduce Google Analytics

Author: kubosho

chapters/_layouts/website/page.html

@@ -6,6 +6,38 @@
 <meta name="theme-color" content="#d0ab6b">
 <link rel="preload" href="/assets/styles/page.css" as="style">
 <link rel="stylesheet" href="/assets/styles/page.css">
+<script>
+    window.__gaId__ = 'UA-25380313-6';
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.querySelector('#optout-button');
+        const output = document.querySelector('#optout-status');
+
+        const optoutEnabledText = 'オプトアウトは有効になっています。';
+        const optoutDisabledText = 'オプトアウトは無効になっています。';
+
+        gaOptout.gaId = window.__gaId__;
+
+        if (gaOptout.enabled()) {
+            gaOptout.enable();
+            output.textContent = optoutEnabledText;
+        } else {
+            output.textContent = optoutDisabledText;
+        }
+
+        button.addEventListener('click', event => {
+            if (gaOptout.enabled()) {
+                gaOptout.disable();
+                output.textContent = optoutDisabledText;
+            } else {
+                gaOptout.enable();
+                output.textContent = optoutEnabledText;
+            }
+        });
+    });
+</script>
+<script src="https://www.googletagmanager.com/gtag/js?id=UA-25380313-6" defer></script>
+<script src="/assets/scripts/gaInitialize.js" type="module"></script>
 {% endblock %}
 
 {% block body %}

chapters/assets/scripts/gaInitialize.js

@@ -11,13 +11,13 @@ function gaInitialize() {
   const optout = new GAOptout(storage);
 
   window.gaOptout = optout || {};
+  const gaId = window.__gaId__ || '';
 
   if (optout.enabled()) {
     optout.gaId = gaId;
     optout.enable();
   }
 
-  const gaId = window.__gaId__ || '';
   gtag('js', new Date());
   gtag('config', gaId);
 }

chapters/assets/scripts/gaOptout.js

@@ -35,9 +35,7 @@ export class GAOptout {
   }
 
   enabled() {
-    return (
-      window[this.gaOptoutKey] || this._storage.getKey() !== null || this._isDoNotTrackEnabled()
-    );
+    return window[this.gaOptoutKey] || this._storage.getKey() !== null || this._isDoNotTrackEnabled();
   }
 
   _isDoNotTrackEnabled() {

chapters/assets/styles/page.css

@@ -63,3 +63,10 @@ body,
 .navigation {
   top: calc(50px + 1em + 8px * 2);
 }
+
+.optout-status {
+  display: block;
+  padding: 8px;
+  border: 1px solid #000;
+  margin-bottom: 1px;
+}

chapters/index.md

@@ -24,3 +24,15 @@ Steins;Gitは「Gitの使い方を、Steins;Gateの世界観を使って説明
 
 - Steins;Gateのアニメを全話見た、もしくはゲームで全てのエンディングを見た人
 - Gitを触れたことがない、もしくは、Gitを触り始めたばかりの人
+
+## Google Analyticsについて
+
+当サイトでは内容の改善などを目的として[Google アナリティクス](https://marketingplatform.google.com/intl/ja/about/analytics/)を使っています。
+
+アクセス情報は匿名のトラフィックデータという形で収集・解析しています。
+
+データ収集の状態を変更したい場合は以下のボタンから変更する事ができます。
+
+<!-- textlint-disable  web-plus-db -->
+{% include "./static/optout.html" %}
+<!-- textlint-enable  web-plus-db -->

chapters/static/optout.html

@@ -0,0 +1,2 @@
+<button type="button" id="optout-button">アクセス解析の状態を変更する</button>
+<output name="optout-status" id="optout-status" class="optout-status" for="optout-button">オプトアウトは有効になっています。</output>