こんにちは。
クローバの門屋です。
今回は、kintoneでタグマネージャーを利用して、kintoneのログインユーザーごとのアクセス解析と、発生した各種イベントのトラッキングを行う方法について書いてみたいと思います。

Googleタグマネージャとは、GoogleアナリティクスやGoogle Adwordsなど、複数のサービスのタグを一元管理するためのツールです。
タグマネージャを導入すると、アナリティクス単体では難しかったイベントのトラッキングがより柔軟に行えます。

詳しい機能については、 タグマネージャの公式サイト をごらんください。

１. アカウントの作成

Googleタグマネージャの公式サイト から、アカウントを作成します。

２. コードの確認

ダイアログにタグマネージャをインストールするコードが表示されます。
1のコードはあとで使用しますので、どこかにコピーして保存しておきます（あとで設定画面から参照もできます）。

アナリティクスでkintoneのアクセス解析用に、新しいプロパティを作成します。

Googleアナリティクス公式サイト

作成すると、測定ID（例：G-XXXXXXXXXX）が生成されます。
測定IDはあとで使用しますので、どこかにメモしておいてください。

ふたたびタグマネージャに戻って設定します。

「変数」メニューから、ユーザー定義変数を新規作成します。

この設定の変数名を「データレイヤーの変数」として保存します。

次に、タグを新規作成します。
以下のように設定してください。

項目	値
タグの種類	Googleアナリティクス:GA4 イベント
測定ID	G-から始まるアナリティクスで作成したID（例：G-XXXXXXXXXX） Google タグがない場合、「タグを作成」をクリックして作成してください。設定方法は次のページを参考してください。 タグ マネージャーで Google アナリティクス 4 イベントを設定する
イベントパタメーター	任意の値 今回はloginUserを指定します
（イベントパタメーターの）値	変数の作成 で設定した変数名を指定します。 変数を指定するには、右の「＋」アイコンをクリックして指定します。
トリガー/配信トリガー	All Pages

測定IDは、Googleアナリティクスのホーム画面左下の歯車アイコンを押して、「データの収集と修正」>「データストリーム」> 設定したWebサイトを選択することで確認できます。

次に、カスタムディメンションを追加します。

この記事では、kintoneが「おすすめのアプリ」として提供している、「日報」というアプリを使用します。
日報
以下のサンプルプログラムを参考にJavaScriptファイルを作成し、kintoneのJavaScriptカスタマイズからアップロードします。
GTM-XXXXの部分は自分のタグマネージャのものに置き換えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  loginUser: kintone.getLoginUser().code
});
(function(w, d, s, l, i) {
  w[l] = w[l] || []; w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
  const f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l !== 'dataLayer' ? '&l=' + l : '';
  j.async = true;
  j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');

これで準備は完了です。動作を確認してみましょう。
タグマネージャの右上のメニューから、「プレビュー」を実行します。
「Your website's URL」に、kintoneで作成した日報アプリのURLを入力し、「Connect」を押してください。

タグが正常に取得できていることがわかります。
タグを公開すると、アナリティクスにデータが送られ、解析できます。
カスタムディメンションによって、ログインユーザーごとの統計を取ることも可能です。

kintoneの各種イベントをフックするには、以下のようにコードを修正します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  loginUser: kintone.getLoginUser().code
});
(function(w, d, s, l, i) {
  w[l] = w[l] || []; w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
  const f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l !== 'dataLayer' ? '&l=' + l : '';
  j.async = true;
  j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXX');
// 以下を追加
(() => {
  'use strict';
  kintone.events.on('app.record.create.submit', (e) => {
    dataLayer.push({event: 'app_record_create_submit'});
  });
})();

これでSubmitイベントをフックできるようになりました。
フックした情報をタグマネージャに送信できるように、次の設定をします。

タグマネージャでトリガーを新規作成し、以下のように設定します。

続いてタグをもうひとつ作成します。
手順は先ほどと同じで、イベントパラメーターとトリガーを次のように指定してください。

これでsubmitイベントをアナリティクスに送信する設定が完了しました。

プレビューを更新して確認すると、レコード追加のタイミングでトリガーが発行しています。
アナリティクス側では、このイベントは/event/app_record_create_submitという仮想のページへのアクセスとしてカウントされます。
もちろん、このページへのアクセスをコンバージョン目標に設定もできます。

いかがだったでしょうか。
ちょっと設定が複雑でしたが、慣れるとGoogleアナリティクス単体よりも柔軟な設定ができて解析の幅が広がります。ぜひお試しください。

このTipsは、2024年6月版kintoneで動作を確認しています。