ElectronアプリにGoogle Analyticsを導入する

先日、Electron製のTwitterクライアントであるworcを公開した。

shibe97.hatenablog.com

せっかくなのでアクセス解析をしようと思い、Google Analyticsを導入したのだが、色々とハマりどころが多かったのでメモ。

Google Analyticsに登録

新規にアカウントを作ろうとすると上記のような画面が出る。

その際、ウェブサイトのURLを入力する欄があるが、Electron製のためURLがない。 ここは、example.comなど適当に入力しておく。

トラッキングコードを設定する

アカウントの作成が終わるとトラッキングコードが生成される。
しかし、このコードをそのままElectronアプリのHTMLに挿入してもうまく計測がされない。

Google Analyticsではcookieを用いてユニークユーザーの判定をしているが、Electronアプリはドメインがないためcookieの登録ができない。

そこで、electron-cookiesを用いる。

github.com

その名の通り、Electron上でcookieを擬似的に持たせることができる。

npm installを行なった後、これを用いて以下のようにトラッキングコードを設定する。

$ npm install @exponent/electron-cookies --save

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  (() => {
    'use strict';
    const ElectronCookies = require('@exponent/electron-cookies');
    ElectronCookies.enable({ origin: 'https://example.com' });
    ga('create', 'GOOGLE_ANALYTICS_ID', 'auto');
    ga('set', 'location', 'https://example.com/');
    ga('set', 'checkProtocolTask', null);
    ga('send', 'pageview');
  })();
</script>

node_modulesに注意

Electronアプリは容量が多いためWebpackなどでバンドル後、ビルド時にnode_modulesを除外しているパターンもあるだろう。
一見、Webpackでの依存解決でelectron-cookiesもbundle.jsに含まれそうだが、このトラッキングコードはindex.htmlに記述されているため、Webpackのバンドルの対象外だ。

よって、node_modules/electron-cookiesを含めた状態でアプリをパッケージングする必要がある。

これに気付くのにすごい時間かかった。。