ある特定の操作をした人が何人いるのか知りたい。 その操作が行われた時に自分の書いた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('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;
}
}
イベントの設定をしないといけないのかと混乱したが、しなくていいようだ