見出し画像
Photo by featurecompass

【データ分析】アクセス解析を自作・可視化する

hideyuki.takase

少し前，僕のTwitterのタイムラインがGoogleアナリティクスのGA4への移行のツイートで多かった．大変なんだろうなと思いつつもWebの関係者はこういうお祭り好きな人が多いから（勝手なイメージ）なんだかんだで楽しいイベントって感じなのかなと思った．

僕，個人的にはアクセス解析ツールはそろそろ企業ごとに自作した方が良いんじゃないのかなと思う．そしてGoogle Analyticsを打倒して欲しい．

そう考える理由

・移行が大変
　Googleの仕様変更により，サイトの回収や指標の定義の理解・変更などあったら毎回結構面倒なような．また，組織全体でGoogle環境にどっぷりであればいいけど，そうでないと環境によっては微妙に痒いところに手が届かないってことがあるのかなと．
・マシンの性能、技術が向上している
　マシンの性能も使いやすさもどんどん向上しているし，人の技術も向上しているのでやってみたら意外とサクッと出来ちゃうんじゃないかと思う．
・個人情報の問題
　GDPRなどあんまり詳しいことはわからないが，わざわざGoogleにデータを渡す必要はないのかなと．企業ごとに発行している会員IDベースでの集計・分析が主なような気がするので．

なによりもそろそろGoogleを打倒したいですよね．

今回やったこと

・GASとスプレッドシート環境でWebサイト構築
・アクセスログを取得・スプレッドシートに格納
・Plotly.jsを使用して可視化
用意する環境としては，スプレッドシート(GAS)だけである．
※具体的なGASの記述は別の記事にまとめる予定．大分GASでの集計に苦労した．

イメージ図

Webサイトの構築(GAS + HTML)

これは説明しているサイトが多くあるので（多分）そちらを参考にしてほしい．１点，Plotly.jsでグラフを描画がする際にデータを配列で渡す必要があり少し戸惑ったのでGAS（サーバー）からHTMLへの配列の受け渡しだけ以下に記載．(他に正しい方法があったら教えてください)

＜GAS側の記述(簡易)＞

var hoge = [10, 20]
var htmlOutput= HtmlService.createTemplateFromFile("index");
htmlOutput.hoge = hoge;
return htmlOutput.evaluate()
＜HTML側の記述＞
 
<?=hoge ?>.split(",") // "10,20"という文字列なので,(カンマ)でsplitする
// ちなみに以下だと数値で渡されるため上手くいかない
<!?=hoge ?> // 1020 という数値になる

アクセスログの取得(GAS + スプレッドシート)

ローカルストレージとセッションストレージを使用してユーザーにデータを保持させ，それを利用して，スプレッドシートにアクセスログを記録していく．
ローカルストレージ・・・意図的に破棄しない限り残る
セッションストレージ・・・ブラウザ、タブを閉じると消える

ログテーブル

本当はリファラーも取得したかったのだがGASサイトだと上手く取得できなかったので断念．ただし，クエリのパラメーターは取得できるので箱を用意しておけばキャンペーンなどのリファラーは集計可能．
上記のデータを取得しておけば，リファラーの集計を除く基本的な集計はできるのかなと思う．意外と取得するデータは少なくてよいということがわかる．

Plotly.jsでの可視化(HTML + Plotly.js)

実は僕は前から有料のBIツール導入をあまり参戦していない．使いこなせていない場合が多いし（ぼくがまったく使えないのでひがんでいるだけ），アカウント数や権限の問題から面倒だな感じることが多かったため．（結局はライセンス数を増やすなどお金で解決しかないのだが）
あとは単純に作った方が面白いし自由度が高い．前述したように色々なハードルが下がってきているので単純な可視化だけで有れば問題ないのかなと思う．
Plotly.jsに関しては公式サイトを見ることをオススメする．
参考までに簡単なHTML + Plotlyの記述
GAS側から配列でデータを渡し，円グラフを描画している．(ほぼ公式のサンプル通り)

  </head>
  <body>
    <h1>可視化のテスト</h1>
    <div id="myDiv"><!-- ここにグラフを表示する --></div>
    
    <script>
      var data = [{
        values: <?=arr ?>.split(","),
        labels: ['Residential', 'Non-Residential', 'Utility'],
        type: 'pie'
      }];
      var layout = {
        height: 400,
        width: 500
      };
      Plotly.newPlot('myDiv', data, layout);
    </script>

  </body>
</html>

実際にできたサイト

実際のサイトは以下になる．
テストサイト

サイトのキャプチャ

タイミングによっては改修しており動かないかもしれない．また，スプレッドシートへのログの記録タイミングなどからデータの反映がワンテンポずれる．このあたりは本気で作りこもうと思えばどうにでもなると思っているので今回は特に気にしていない．　

終わりに

一旦やりたいことは達成できた．割と大規模な企業やWebの事業がメインな企業はもう自作でいいんじゃないかと勝手に思っている．

最近，Googleの検索結果が情報の薄いアフィリエイトサイトばかりで嫌になる（自分の検索内容がくだらないことも要因ではあるが）
そろそろ誰か検索としてのGoogleにも引導を渡して欲しい．ちなみに僕はクラウドサービスとしてのGoogleは大好き．次は検索エンジンに挑戦．

臨港パーク@横浜

だいたい毎日書こうと思っていたのだが，久々の更新になってしまった．
僕も人の子だったようで父親が入院するとわかってから心が動揺して記事を書く気になれなかった．盛者必衰，老いには勝てないものである．

梅雨目前の5月晴れの横浜より．

PCとスマホ，wifiだけを持って全国をのんびり旅したい．