はじめに
Google Apps Script（GAS） をウェブサーバー代わりに使えることをご存じでしょうか。GASを使えばちょっとしたウェブアプリを作ることができる上に、Google環境と連携が可能なので、スプレッドシートと連携したり、Gmailと連携したメールサーバーのような使い方もできます。
そんなGASですが、Google Analytics を使って利用状況を確認するには、通常のウェブサイトで利用するgtag.jsではなく、Measurement Protocolを使った設定が必要です。
今回紹介すること
GASでのウェブアプリのデプロイについて
GASをウェブサーバーにした場合のGoogle Analytics の設定方法
今回紹介しないこと
Googleアカウントの作成
GASやJavaScriptの説明
Google Analytics（GA4）の使い方
GASのウェブアプリ
GASの新規作成
Googleドライブの適当なフォルダに、Google Apps Scriptを新規作成しましょう。
新規->その他->Google Apps Script で選択できるはずです。
警告が出たら確認し、スクリプトを作成します。
HTMLファイルの作成
スクリプトの編集画面が開いたら、HTMLファイルを追加し、indexと名付けておきましょう。表示はindex.htmlとなるはずです。
HTMLファイルが作成されたら、そのままでは何も表示されないので、
~ のところに何か書いておきましょう。<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello World!
</body>
</html>
ウェブサーバーの準備
ファイルの表示をコード.gsに戻して、次のコードを入力します。
GASをウェブアプリとしてデプロイすると、URLが発行され、ブラウザ等でそのURLにアクセスしたときに呼び出されるのがdoGet(e)となります。
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
これでGASのコードは完成です。
ウェブアプリとしてデプロイ
デプロイ->新しいデプロイをクリック
種類の選択 -> ウェブアプリ をクリック
まずは自分だけ表示できる設定で問題ないので、そのままデプロイをクリックしましょう。
URLが表示されるので、クリックしてみましょう。先ほど設定したHTMLが表示されるはずです。
GASのウェブアプリでのGoogle Analytics設定方法
必要なID、APIキーの取得
Google Analytics でアカウント、プロパティ、データストリームを作成します。分析はプロパティ単位で、複数のデータストリームをまとめて行うことになります。後で使用しますので、データストリームの詳細画面で、測定 IDと、Measurement Protocol API secretを作成し、コピーしておきます。
GASとHTMLの設定
Google Analyticsのテストのため、次のように設定しましょう。
<html>
<head>
<base target="_top">
<script>
// イベント送信用関数（カテゴリとパラメータをオブジェクトとして渡す）
function sendEvent(eventCategory, params) {
google.script.run.withSuccessHandler(function() {
console.log('Event sent to GA4:', eventCategory, params);
}).sendEventToGA4(eventCategory, params);
}
// ボタンクリック時の処理
function onButtonClick() {
// カテゴリとラベルを連想配列として送信
sendEvent('button_clicked', {
label: 'Send Event'
});
}
</script>
</head>
<body>
<h1>GA4 Event Tracking Example</h1>
<button onclick="onButtonClick()">Send Event</button>
</body>
</html>
コード.gsの、測定IDとAPIシークレットの部分は、先ほど取得した内容に書き換えてください。
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
function sendEventToGA4(eventCategory, params) {
var clientId = generateUUID();
var payload = {
client_id: clientId,
events: [{
name: eventCategory,
params: params
}]
};
//ここで取得した測定IDとAPIシークレットを設定してください
var url = 'https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=XXXXXXXXXXXXXXXXXXXXXX';
var options = {
method: 'post',
contentType: 'application/json',
payload: JSON.stringify(payload)
};
UrlFetchApp.fetch(url, options);
return url;
}
// 一意のIDを生成（本来はユーザーごとに生成しクライアント側で保持）
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c === 'x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
}
デプロイ
保存してデプロイすると、次のようにエラーになってしまいます。
GASの編集画面で
コード.gsを選択し、doGetを一度実行しておきましょう。
承認画面が何度か出るので、承認します。
承認が終わったら実行ログが表示されます。実行完了したら、デプロイ->デプロイをテストとして、表示されるURLをクリックして動作を確認しましょう。
ボタンを押下すると、Google Analyticsにデータが送信されるはずです。
Google Analytics のレポート->リアルタイムの概要->イベント数のところにbutton_clickedが表示されていれば成功です。
デプロイのテストではなくデプロイする場合は、デプロイ->デプロイを管理->編集ボタン->各項目を設定->デプロイとしましょう。
page_viewイベントの追加
せっかくなので、基本的なpage_viewイベントも追加して、ページが開かれた回数も抑えられるようにしましょう。
<html>
<head>
<base target="_top">
<title>GA4 Event Tracking Example</title>
<script>
// イベント送信用関数（カテゴリとパラメータをオブジェクトとして渡す）
function sendEvent(eventCategory, params) {
google.script.run.withSuccessHandler(function() {
console.log('Event sent to GA4:', eventCategory, params);
}).sendEventToGA4(eventCategory, params);
}
// ページ読み込み時にpage_viewイベントを送信
window.onload = function() {
sendEvent('page_view', {
page_title: document.title, // ページタイトル
page_path: '/index.html' // ページパス
});
};
// ボタンクリック時の処理
function onButtonClick() {
// カテゴリとラベルを連想配列として送信
sendEvent('button_clicked', {
label: 'Send Event'
});
}
</script>
</head>
<body>
<h1>GA4 Event Tracking Example</h1>
<button onclick="onButtonClick()">Send Event</button>
</body>
</html>
まとめ
GASのウェブアプリでもGoogleAnalyticsの利用が可能なことがわかりました。
CSSでのデザインやPOSTメソッドを使ったウェブアプリ、ＡＰＩサーバのような利用も可能ですので、活用してみてください。