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

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

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

１. アカウントの作成

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

２. コードの確認

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

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

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

作成すると、トラッキングIDとアナリティクス用のトラッキングコードが生成されますが、タグマネージャを利用する場合、このコードは必要ありません。
トラッキングIDはあとで使用しますので、どこかにメモしておいてください。

続いて、ログインユーザーをトラッキングするためのカスタムディメンションを作成します。
カスタムディメンションは、「アナリティクス設定」>「プロパティ」>「カスタム定義」>「カスタムディメンション」から作成できます。

作成したカスタムディメンションのインデックスはあとで使用します。

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

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

この設定の変数名をloginUserとして保存します。

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

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

kintoneのJavaScriptカスタマイズで、以下のコードを挿入します。
GTM-XXXXの部分は自分のタグマネージャのものに置き換えてください。

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

const dataLayer = dataLayer || [];
dataLayer.push({
  loginUser: kintone.getLoginUser().code
});
$('body').prepend('<iframe style="display: none; visibility: hidden;" src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" width="0" height="0"></iframe>');
(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');

jQueryも使用しているので、JavaScriptカスタマイズで CDN上にあるjQueryのリンクも参照するようにしてください。

これで準備は完了です。動作を確認してみましょう。
タグマネージャの右上のメニューから、「プレビュー」を実行します。
プレビューした状態でkintoneにアクセスすると、このように各種情報が表示されます。

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

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

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

const dataLayer = dataLayer || [];
dataLayer.push({
  loginUser: kintone.getLoginUser().code
});
$('body').prepend('<iframe style="display: none; visibility: hidden;" src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" width="0" height="0"></iframe>');
(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');
// 以下を追加
jQuery.noConflict();
(function($) {
  'use strict'; kintone.events.on('app.record.create.submit', (e) => {
    dataLayer.push({event: 'app_record_create_submit'});
  });
})(jQuery);

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

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

続いてタグをもうひとつ作成します。手順は先ほどと同じで、最後に「その他の設定」>「設定するフィールド」に下記を追加します。

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

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

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