GASでウェブアプリをデプロイしてGoogle Analytics(GA4)を設定する手順

# はじめに
Google Apps Script（GAS） をウェブサーバー代わりに使えることをご存じでしょうか。GASを使えばちょっとしたウェブアプリを作ることができる上に、Google環境と連携が可能なので、スプレッドシートと連携したり、Gmailと連携したメールサーバーのような使い方もできます。

そんなGASですが、Google Analytics を使って利用状況を確認するには、通常のウェブサイトで利用するgtag.jsではなく、Measurement Protocolを使った設定が必要です。

https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=ja&client_type=firebase

**今回紹介すること**
GASでのウェブアプリのデプロイについて
GASをウェブサーバーにした場合のGoogle Analytics の設定方法

**今回紹介しないこと**
Googleアカウントの作成
GASやJavaScriptの説明
Google Analytics（GA4）の使い方

# GASのウェブアプリ
## GASの新規作成
Googleドライブの適当なフォルダに、Google Apps Scriptを新規作成しましょう。
``新規->その他->Google Apps Script`` で選択できるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/a457eb6d-d9c9-2126-b028-e90f47aa8c47.png)
警告が出たら確認し、``スクリプトを作成``します。

## HTMLファイルの作成
スクリプトの編集画面が開いたら、HTMLファイルを追加し、``index``と名付けておきましょう。表示は``index.html``となるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/c5320fdd-2f55-09ba-b3ef-0a51ae8fef22.png)

HTMLファイルが作成されたら、そのままでは何も表示されないので、<body> ~ </body>のところに何か書いておきましょう。
```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello World!
  </body>
</html>
```

## ウェブサーバーの準備
ファイルの表示を``コード.gs``に戻して、次のコードを入力します。
GASをウェブアプリとしてデプロイすると、URLが発行され、ブラウザ等でそのURLにアクセスしたときに呼び出されるのが``doGet(e)``となります。

```javascript:コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}
```
これでGASのコードは完成です。

## ウェブアプリとしてデプロイ
``デプロイ->新しいデプロイ``をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/e9593006-2bcf-cb62-ff78-a9bb506d86e9.png)

``種類の選択 -> ウェブアプリ`` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/b39eedc0-14f0-9988-a3bf-71b918915037.png)

まずは自分だけ表示できる設定で問題ないので、そのまま``デプロイ``をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/8e37f35f-83d3-ecd4-236e-d52e7691840e.png)

URLが表示されるので、クリックしてみましょう。先ほど設定したHTMLが表示されるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/a2407ab2-e474-adde-d405-756427b0c379.png)

# GASのウェブアプリでのGoogle Analytics設定方法
## 必要なID、APIキーの取得
[Google Analytics](https://analytics.google.com/analytics/web/#/) でアカウント、プロパティ、データストリームを作成します。分析はプロパティ単位で、複数のデータストリームをまとめて行うことになります。後で使用しますので、データストリームの詳細画面で、``測定 ID``と、``Measurement Protocol API secret``を作成し、コピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/d466b895-8cfc-3653-4f5e-2bf2dc9ce4c2.png)

## GASとHTMLの設定
Google Analyticsのテストのため、次のように設定しましょう。

```html:index.html
<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シークレットの部分は、先ほど取得した内容に書き換えてください。
```javascript:コード.gs
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;
}
```

## デプロイ
保存してデプロイすると、次のようにエラーになってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/124e62fa-0acd-97a2-1506-509980c6c681.png)

GASの編集画面で
``コード.gs``を選択し、doGetを一度``実行``しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/abaa6405-2dfa-f0fb-d997-7b0c8803f7b3.png)

承認画面が何度か出るので、承認します。
承認が終わったら実行ログが表示されます。実行完了したら、``デプロイ->デプロイをテスト``として、表示されるURLをクリックして動作を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/667686b6-6370-4cce-e642-2331324e7cfe.png)
ボタンを押下すると、Google Analyticsにデータが送信されるはずです。

[Google Analytics](https://analytics.google.com/analytics/web/#/) の``レポート->リアルタイムの概要->イベント数``のところに``button_clicked``が表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/584cd1b9-d47f-43c4-07f4-6f6a38341b89.png)

``デプロイのテスト``ではなく``デプロイ``する場合は、``デプロイ->デプロイを管理->編集ボタン->各項目を設定->デプロイ``としましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281116/92ee9419-0148-5238-e8ce-d83569106aea.png)

### page_viewイベントの追加
せっかくなので、基本的なpage_viewイベントも追加して、ページが開かれた回数も抑えられるようにしましょう。

```html:index.html
<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メソッドを使ったウェブアプリ、ＡＰＩサーバのような利用も可能ですので、活用してみてください。