Google Analyticsで何でもカウント

ある特定の操作をした人が何人いるのか知りたい。その操作が行われた時に自分の書いたJavaScriptプログラムから直接Google Analyticsを呼び出してイベントを記録することができる。

この機能はいろいろ凝った使い方ができるが、シンプルに回数をカウントするならこれだけでいい ts

window.gtag("event", "harvest");

harvestの部分は自分がつけたわかりやすいイベントの名前
JavaScriptの人はwindow.がなくても動くと思う
これがGoogle AnalyticsのEngagementのページにこう表示される
そこからたどっていくと、いつどれくらい使われたかがわかる

詳しい話

このgtagって関数は最初にGoogle Analyticsの設定をした時にHTMLに貼り付けるように指示されたコードの中で定義されている
dataLayerってリストに追加しているだけ
たぶんこのリストの中身を定期的にチェックしてサーバに送る仕組みになってるのだろう html

 <script async src="https://www.googletagmanager.com/gtag/js?id=G-GBX75RXXXX"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag() { dataLayer.push(arguments); }
   gtag('js', new Date());

   gtag('config', 'G-GBX75RXXXX');
 </script>

マニュアルの記述

3つ目の引数で色々追加の情報を送れるようだ
何かを適切に設定しないといけないのかと思って混乱したが、回数をカウントするだけなら省略して良い
Google アナリティクスのイベントを測定する | ウェブ向けユニバーサルアナリティクス（gtag.js） js

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

gtag.js API リファレンス | グローバルサイトタグ（gtag.js） | Google Developers js

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

プロパティ追加について

プロパティって「属性」かと思って混乱したが、Google Analytics用語としてはアカウントの直下に複数個持つことができる情報をまとめる単位のようだ
- 新しいウェブサービスを作ったらプロパティも追加する、というイメージか

TypeScriptではgtagの型が不明だとエラーになるので下記のように宣言する index.ts

declare global {
  interface Window {
    gtag: (
      a: string,
      b: string,
      c?: { event_category?: string; event_label?: string; value?: number }
    ) => unknown;
  }
}

イベントの設定をしないといけないのかと混乱したが、しなくていいようだ

(C)NISHIO Hirokazu / Converted from Markdown (ja)
Source: [GitHub] / [Scrapbox]