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

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

目次

はじめに

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

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

Googleタグマネージャとは

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

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

タグマネージャの導入

1. アカウントの作成

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

2. コードの確認

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

Googleアナリティクスの設定

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

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

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

変数の作成

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

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

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

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

タグの作成

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

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

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

カスタムディメンションの追加

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

項目
ディメンション名 Login User
範囲 イベント
イベント パラメーター LoginUser

kintoneの設定

この記事では、kintoneが「おすすめのアプリ」として提供している、「日報」というアプリを使用します。
日報 (External link)
kintoneのJavaScriptカスタマイズで、以下のコードを挿入します。
GTM-XXXXの部分は自分のタグマネージャのものに置き換えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
window.dataLayer = window.dataLayer || [];
window.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');

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

タグのプレビュー

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

「Connected!」を表示されれば、成功です。
プレビューした状態でkintoneにアクセスすると、このようにkintone上にタグが表示されます。

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

イベントのフック

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
window.dataLayer = window.dataLayer || [];
window.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');
// 以下を追加
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 Path}} を指定します。
イベント パラメーター 右の「+」ボタンから{{Page Path}} を指定します。
(イベント パラメーターの)値 /event/app_record_create_submit
トリガー 「例外を追加」をクリックしてから、先ほど作成したapp_record_create_submitイベントを指定します。

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

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

終わりに

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

information

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