Google タグマネージャで kintone のアクセス解析をしてみよう

著者名:門屋 亮(クローバ株式会社)

目次

はじめに

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

Google タグマネージャと Google Analytics でアクセス解析を行う

Google タグマネージャとは

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

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

タグマネージャの導入

1. アカウントの作成

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

2. コードの確認

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

Google アナリティクスの設定

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

Google アナリティクス公式サイト (External link)

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

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

項目
名前 Login User
範囲 ヒット
アクティブ チェック

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

タグの作成

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

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

項目
種類 データレイヤーの変数
データレイヤーの変数名 loginUser

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

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

項目
プロダクト Google Analytics
タグの種類 ユニバーサルアナリティクス
トラッキングID アナリティクスで作成したトラッキングID
トラッキングタイプ ページビュー
配信するタイミング All Pages

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

項目
インデックス 作成したカスタムディメンションのインデックス
ディメンションの値 {{loginUser}}
(値を設定するための+ボタンをクリックし、先ほど作成したデータレイヤー変数の名前を選択します)

kintone の設定

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 のリンクも参照するようにしてください。

タグのプレビュー

これで準備は完了です。動作を確認してみましょう。
タグマネージャの右上のメニューから、「プレビュー」を実行します。
プレビューの状態で、Chrome で 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 イベントをフックできるようになりました。
フックした情報をタグマネージャに送信できるように、次の設定をします。

トリガーと新しいタグを作成する

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

項目
イベント カスタムイベント
イベント名 app_record_create_submit

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

項目
フィールド名 page
フィールドの値 /event/app_record_create_submit
配信するタイミング その他をクリックしてから、先ほど作成したapp_record_create_submitイベントを指定

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

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

終わりに

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