GTMで取得したGA4イベントをSlack通知する方法

Slackに通知を送り込むための「受け口URL」を1本作ります。

1. ブラウザでSlackにログインした状態でhttps://api.slack.com/appsにアクセスします。
2. 右上の緑のボタン 「Create New App」（新しいアプリを作る、という英語のボタンです）をクリック
3. 「From scratch」（ゼロから作る）を選ぶ
4. App Name に好きな名前、Workspace に自分のワークスペースを選び、「Create App」ボタンを押す

5. 左メニューの 「Incoming Webhooks」 をクリックし、右上のスイッチ 「Activate Incoming Webhooks」 を On にする
6. ページ下部の 「Add New Webhook」 をクリックし、通知したいチャンネルを選んで 「許可する（Allow）」
7. ページ下の方に表示される「https://hooks.slack.com/services/…」というURLをコピーする

このURLは、パスワードと同じ扱いです。人に見せない、公開する場所に書かない、AIの入力欄にも貼らないでください。次のSTEP 2でGASの中に貼ると、外からは見えなくなります。

「ボットユーザーがありません」で先に進めないとき

「Add New Webhook」を押すと、「◯◯ にはインストールするボットユーザーがありません」 と出て、何度やっても同じ画面に戻される（堂々巡りになる）ことがあります。私もここで一番つまずきました。

原因は、「From scratch（ゼロから）」で作ったアプリには、Slackの中に住む「ボットユーザー」という土台が最初は用意されていない場合があるためです。

対処は、App Manifest（アプリの設計図）で土台を宣言して作ることです。

1. 左メニュー下の方の 「App Manifest」 をクリック
2. エディタ（JSONタブのままでOK）の中身を全選択して削除し、下をまるごと貼り付ける

{
  "display_information": {
    "name": "CV通知テスト"
  },
  "features": {
    "bot_user": {
      "display_name": "cv-notify-test",
      "always_online": false
    }
  },
  "oauth_config": {
    "scopes": {
      "bot": ["incoming-webhook"]
    }
  },
  "settings": {
    "org_deploy_enabled": false,
    "socket_mode_enabled": false,
    "token_rotation_enabled": false
  }
}

3. 「Save Changes」 をクリック（これでボットユーザーの土台ができます）
4. 左メニュー 「Incoming Webhooks」 に戻り 「Add New Webhook」 を押すと、今度はチャンネル選択が出ます。選んで 「許可する」

ボットの表示名「display_name」は、必ず半角英数字にしてください。ここを日本語にしてしまうと保存できません。アプリ名（display_information.name）の方は日本語で構いません。

Slackの通知先URLを隠して受け渡す「中継役」を、Google Apps Scriptで作ります。

1. ブラウザでhttps://script.google.comを開き、「新しいプロジェクト」を作成
2. 最初から入っている「function myFunction() {}」を全部消す
3. 下のコードをすべてコピーして貼り付ける

// ▼ここだけ書き換える ---------------------------------------------
var SLACK_WEBHOOK_URL = 'ここにSlackのIncoming Webhook URLを貼る';
var SHARED_TOKEN      = 'ここに好きなランダム文字列（GTM側と一致させる）';
// ----------------------------------------------------------------
function doPost(e) {
  try {
    var data = {};
    if (e && e.postData && e.postData.contents) {
      data = JSON.parse(e.postData.contents);
    }
    // 簡易的ないたずら防止（合言葉が合わなければ無視）
    if (data.token !== SHARED_TOKEN) {
      return ContentService.createTextOutput('ng');
    }
    var formType = data.form_type || '(不明)';
    var page     = data.page || '';
    var ref      = data.ref || '';
    // 日本時間の「時刻」を作る
    var jst = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy-MM-dd HH:mm');
    var lines = [
      '*コンバージョン発生*',
      '種類: ' + formType,
      'ページ: ' + page,
      '時刻: ' + jst + '（JST）'
    ];
    if (ref) { lines.push('流入元: ' + ref); }
    UrlFetchApp.fetch(SLACK_WEBHOOK_URL, {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify({ text: lines.join('\n') }),
      muteHttpExceptions: true
    });
    return ContentService.createTextOutput('ok');
  } catch (err) {
    return ContentService.createTextOutput('error');
  }
}
// 動作確認用（エディタ上で実行すると、テスト通知が1本飛ぶ）
function testPing() {
  UrlFetchApp.fetch(SLACK_WEBHOOK_URL, {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify({ text: '中継スクリプトのテスト通知です' }),
    muteHttpExceptions: true
  });
}

4. 冒頭の2箇所を書き換えます
   • 「SLACK_WEBHOOK_URL」：STEP 1でコピーしたURLを貼る
   • 「SHARED_TOKEN」：好きなランダム文字列にする（パスワード生成ツールなどで作成するのがおすすめ）。この値はあとでGTM側にも同じものを入れますのでメモしておきましょう。
5. 上部の保存アイコン（フロッピー）で保存

「SHARED_TOKEN」は、GTMとGASの間だけで通じる「合言葉」です。関係のない第三者がGASのURLを見つけて通知を送りつけても、合言葉が違えばGASが無視します。

動作テスト（testPing）

コードを貼ったら、Slackまで届くか先に確かめます。

1. エディタ上部の関数選択プルダウンで「testPing」を選び、「実行」ボタンを押す
2. 初回だけ承認画面が出ます。少し戸惑うところなので順番に書きます
   ・「承認が必要です」から「権限を確認」を押し、自分のGoogleアカウントを選ぶ
   ・「このアプリはGoogleで確認されていません」 と警告が出たら、左下の 「詳細」 から 「（プロジェクト名）に移動（安全ではないページ）」
   ・「次の許可を求めています」で 「許可」
3. Slackにテスト通知が届けば成功です

「このアプリはGoogleで確認されていません」という警告は、自分で作ったスクリプトなら心配いりません。Googleが、まだ審査していない自作アプリに一律で出している警告です。

GTM（ブラウザ）からアクセスできるように、GASの公開URLを発行します。

1. 右上の 「デプロイ」 から 「新しいデプロイ」
2. 左上の歯車アイコンから 「ウェブアプリ」 を選ぶ
3. 設定を次のようにします
   ・次のユーザーとして実行：自分
   ・アクセスできるユーザー：全員

4. 「デプロイ」 をクリック（もう一度承認を求められたら許可）
5. 発行された ウェブアプリURL（https://script.google.com/macros/s/…/exec）をコピーする。次のGTMタグに埋め込みます

「アクセスできるユーザー」を「全員」にしないと、サイトを見ている訪問者のブラウザからGASへ届きません。ここは必ず「全員」にしてください。なお、GASに届くのは合言葉つきの短いデータだけで、スクリプトの中身が誰かに見えるわけではありません。

「コンバージョンが起きた瞬間」を、GTMに教えるためのトリガーを用意します。この記事を読んでいる方の多くは、すでにGA4でCVを計測するためのトリガーを作っているはずなので、そのまま流用してください。次のSTEPのタグを、そのトリガーに紐づけるだけで済みます。

「合図が来たら、GASへ通知を送る」処理です。

1. GTMの左メニュー 「タグ」 から 「新規」、タグタイプ 「カスタムHTML」
2. 下のコードをコピーして貼り付ける

<script>
(function () {
  var payload = JSON.stringify({
    token: '__SHARED_TOKEN__',
    form_type: '資料請求',          // ← あなたのコンバージョンの名前に変える
    page: location.pathname,
    url: location.href,
    ref: document.referrer || ''
  });
  var endpoint = '__GAS_WEBAPP_URL__';
  try {
    if (navigator.sendBeacon) {
      // ページ遷移に強い送信方式（通信エラーも回避）
      navigator.sendBeacon(endpoint, payload);
    } else {
      fetch(endpoint, { method: 'POST', mode: 'no-cors', body: payload });
    }
  } catch (e) {
    fetch(endpoint, { method: 'POST', mode: 'no-cors', body: payload });
  }
})();
</script>

3. 貼ったコードの中の3箇所を差し替える
   • 「__SHARED_TOKEN__」： STEP 2で決めた合言葉（SHARED_TOKENと同じ値）
   • 「__GAS_WEBAPP_URL__」： STEP 3でコピーしたウェブアプリURL
   • 「form_type: ‘資料請求’ 」：あなたのコンバージョンの名前（Slackの通知に表示されます）
4. 下の 「トリガー」 で、STEP 4で用意したCVトリガー（サンクスページ到達など）を選ぶ
5. 名前を付けて保存（例：コンバージョン通知_Slack）

公開する前に、自分だけで動作確認します。プレビューは公開しない限り、一般の訪問者には影響しません。

1. GTM右上の 「プレビュー」 をクリック
2. Tag Assistantの画面で、あなたのサイトのURLを入力して 「Connect」（別タブでサイトが開き「Connected」と出ればOK）
3. 実際にフォームを送信するなどして、完了ページに移動する
4. Tag Assistantで、完了ページのところにタグ コンバージョン通知_Slack が Fired（発火） になっているか確認する

5. Slackに通知が届けば成功です

プレビューで通知が届いたら、GTM右上の 「公開」 を押して本番に反映します。これで、実際の訪問者のコンバージョンがSlackに届くようになります。

公開後にしばらく通知が来なくても、あわてなくて大丈夫です。そもそもコンバージョンが発生していないだけのこともあります。テスト用のフォーム送信を一度自分でやってみて、届くかどうかで切り分けてください。