こんにちは。
クローバの門屋です。
今回は、kintoneでGoogleタグマネージャーとGoogleアナリティクスを利用して、kintoneのログインユーザーごとのアクセス解析を行います。
後半では、kintoneのイベントをフックにする処理も紹介します。

Googleタグマネージャーとは、GoogleアナリティクスやGoogle広告など、複数サービスのタグを一元管理するためのツールです。
各サービスのタグを簡単に設置できるのが最大の特長で、より高度なイベントトラッキングも柔軟に設定できます。

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

１. アカウントの作成

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

２. コードの確認

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

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

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

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

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

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

Googleタグマネージャーにおける変数は、プログラムの変数と同様に値を格納し、活用するための機能です。

今回は、データレイヤーの値（kintoneのログインユーザー情報）をloginUserという変数に格納し、Google Analyticsへ送付するために活用します。

この設定の変数名を「loginUser変数」などのわかりやすい名前で保存します。
あとから、{{loginUser変数}}のように呼び出して使用します。

次に、タグとトリガーを新規作成します。

Googleタグマネージャーのタグは、トリガー（特定のタイミング）で実行されるコードのことです。
Googleタグマネージャーでは、GoogleアナリティクスやGoogle広告をはじめとしたさまざまな種類のタグをGUI上で簡単に作成・管理できます。

Google タグの作成

Google タグは、Googleアナリティクスの基本設定を動作させるために必要なタグです。

以下のように設定します。

タグ

トリガー

Googleアナリティクス:GA4 イベントタグの作成

続いて、さきほど設定した変数を活用し、GA4 イベントタグを設定します。

GA4 イベントタグは、Googleアナリティクスの機能を拡張的に活用するためのタグです。
ページビューだけでなく、ユーザーの具体的な行動（例：ボタンのクリック、フォームの送信、ログイン情報の取得など）を計測できます。
より詳細なユーザー分析やマーケティング施策に活用できます。

この設定では、データレイヤーに追加された値を取得、変数格納、変数格納された値のGoogleアナリティクスへ送信するという一連の流れを実現しています。

なお変数を定義しただけでは、値の格納がされません。{{loginUser変数}}のようにタグ内に使用されたタイミングで、データレイヤーの値が取得され、変数に格納されます。

タグ

トリガー

トリガータイプのカスタムイベントは、Googleアナリティクス上で特定のイベントがおきた時に動作するトリガーです。
今回は、JavaScriptファイル上でloginUserPushイベントの発生をさせています。

次に、Googleアナリティクスへ戻り、カスタムディメンションを追加します。

カスタムディメンションとは、Googleタグマネージャーから送信された独自のデータを、Googleアナリティクス上で記録・分析できるようにするための設定項目です。
今回の例では、Googleタグマネージャーから送信されたログインユーザー情報（loginUser）を、GA4のカスタムディメンションとして登録します。
そうすると、どのユーザーがどのページを見たかなど、ユーザー単位の分析が可能になります。

説明は管理者向けメモです。
イベントパラメーター名は、GoogleAnalyticsのレポート上で表示される名前です。
最も重要なのは、イベントパラメーターです。Googleタグマネージャーのイベントパラメーターと完全に一致させることで、データが正しく受け取れます。

日報 アプリを使用し、動作を確認します。
以下のJavaScriptファイルを参考にし、kintoneのJavaScriptカスタマイズからアップロードします。

JavaScriptの冒頭部分は、 タグマネージャーの導入｜コードの確認 でコピーしたコードです。
GTM-XXXXXの部分はご自身のタグマネージャーのものに置き換えてください。

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

// GTM読み込み、この部分はGoogle公式コードのため、ES5構文のまま使用。
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');

// 以下は独自のイベント送信用処理（ES6構文）
(() => {
  'use strict';

  // loginUserを定義し、イベントを同時にpush
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    loginUser: kintone.getLoginUser().code,
    event: 'loginUserPush'
  });
})();

これで準備は完了です。タグの動作を確認してみましょう。

1. タグマネージャーの右上のメニューから、「プレビュー」を実行します。
2. 「ウェブサイトのURL」に、kintoneで作成した日報アプリのURLを入力し、「リンク」を押してください。
3. 「Tag Assistantに接続しました」が表示されれば、成功です。

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

これで、タグが正常に動作可能な状態になっています。
タグを公開すると、アナリティクスにデータが送られ、解析できます。

次に、Googleアナリティクスでデータがみられるかを確認してみましょう。

1. 「レポート」＞「リアルタイムの概要」＞「イベント数（イベント名）」を開きます。
2. 「customeEvent」を開きます。
3. 「loginUser」を押下すると、ログインユーザー情報が正しく格納・送信されていることを確認できます。

ここで、処理の流れを簡単に振り返ります。

1. kintone上のJavaScriptコードで、ログイン情報を含めたdataLayer.push()を記述
2. kintone上のJavaScriptコードで、Googleタグマネージャー（Googleタグ、GA4 イベントタグ）タグを埋め込み処理
3. GoogleタグマネージャーのGoogleタグによって、基本的なGoogleアナリティクスのページビュー計測が動作
4. GoogleタグマネージャーのGA4 イベントタグがdataLayerのloginUserを取得し、customEventというイベント名で、Googleアナリティクスへ送信
5. Googleアナリティクスのカスタムディメンション設定によって、loginUserの値をレポート等で活用可能

注目すべきポイントは、GA4 イベントタグが「値の取得」と「送付」の両方を担っていることです。

ここまで計測タイミングは、日報アプリのJavaScriptファイルが読み込まれたタイミングでした。
以下から、kintoneの各種イベントをフックする設定を紹介します。

補足

ここまでの設定をバックアップとして残したい方は、タグマネージャーのコンテナを増やすことをおすすめします。

変更する点は以下のとおりです。

• kintone上にいれるJavaScriptファイルの変更
• GoogleタグマネージャーのGA4 イベントタグの変更

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

// dataLayer自体の初期化とloginUser設定
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  loginUser: kintone.getLoginUser().code
});

// GTM読み込み（公式コード、ES5構文のまま使用）
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');

// kintoneイベント発火時にデータレイヤーへpush（ES6構文）
(() => {
  'use strict';
  kintone.events.on('app.record.create.submit', (e) => {
    dataLayer.push({event: 'app_record_create_submit'});
  });
})();

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

GA4 イベントを動作させるための条件を変更するために、トリガーを作成します。

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

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

タグ

「イベント パラメータ2」のloginUserは先ほどの内容そのままです。

トリガー

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

プレビューを更新して確認すると、レコード追加のタイミングでトリガーが発行されます。
確認手順は、先の動作確認と同様の手順で行ってください。

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

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