【GAS×JavaScript】ボタンのクリック数をスプレッドシートに記録する方法

「このボタンは何回押されたのだろう？」という簡単な利用状況を、Googleスプレッドシートへ記録する仕組みを作ります。GAS側とWebサイト側の両方を、画像付きで順番に設定します。

仕組みと準備するもの

Webページのボタンを押すと、JavaScriptのfetch()がGASのWebアプリへPOST通信を送ります。GASは通信を受け取り、スプレッドシートのB1セルを読み取って1を加えます。

新しいスプレッドシートを開き、A1セルに「クリック数」などの見出しを入力します。B1セルは空欄または0にしてください。

スプレッドシートからApps Scriptを開く

スプレッドシートの「拡張機能」→「Apps Script」を選びます。このシートにひも付いたApps Scriptプロジェクトが開きます。

GAS側のコードを保存する

Code.gsに最初から入っているコードを消し、次のコードへ置き換えます。

function doPost() {
  const guard = LockService.getScriptLock();
  guard.waitLock(10000);
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    const cell = sheet.getRange("B1");
    const metricNum = Number(cell.getValue()) || 0;
    cell.setValue(metricNum + 1);
    return ContentService.createTextOutput("ok");
  } finally {
    guard.releaseLock();
  }
}

プロジェクト名は「Apps Click Count」など、用途が分かる名前に変更します。コードを貼り付けたら、上部の保存ボタンを押すか、保存済みの表示になったことを確認してください。

Webアプリとしてデプロイする

保存したApps Scriptを、Webサイトから呼び出せるWebアプリとして公開します。Google側の画面文言は更新されることがありますが、設定する内容は同じです。

1. STEP1
   新しいデプロイを開く

   画面右上の「デプロイ」→「新しいデプロイ」を選びます。

   

2. STEP2
   種類でウェブアプリを選ぶ

   「種類の選択」の横にある歯車を押し、「ウェブアプリ」を選びます。

   

3. STEP3
   実行ユーザーとアクセス範囲を設定する

   説明には「ボタンのクリック数を記録」などを入力します。「次のユーザーとして実行」は自分、「アクセスできるユーザー」は公開サイトから使える範囲に設定し、「デプロイ」を押します。

   

   Google Workspaceの管理設定によっては、組織外を含む公開範囲を選べない場合があります。その場合は管理者のポリシーに従ってください。

4. STEP4
   初回のアクセスを承認する

   初回は承認を求められます。「アクセスを承認」を押し、このプロジェクトを作成したGoogleアカウントを選びます。

   

   

   自分で作った未確認のApps Scriptでは、Googleの確認画面が表示されることがあります。「詳細」を開く前に、プロジェクト名と利用中のアカウントが自分のものか確認してください。

   

   

   最後に、要求されている権限がスプレッドシートへのアクセスなど今回の目的と一致することを確認して許可します。自分で作成していないプロジェクトや、目的に合わない権限が表示された場合は進めないでください。

   

5. STEP5
   ウェブアプリのURLをコピーする

   デプロイが完了したら、「ウェブアプリ」欄にあるURLをコピーします。公開ページから使うURLは/execで終わるものです。

   

公開設定で注意すること

公開サイトの匿名ユーザーから記録するには、アクセス範囲を広くする必要があります。その代わり、ウェブアプリのURLを知っている人や自動プログラムもクリック数を増やせます。

• フォームの氏名、住所、メールアドレスを保存しない
• 金額、注文数、投票結果など正確性が必要な用途に使わない
• この数値だけで課金や成果報酬を決めない
• ウェブアプリのURLを必要以上に公開・共有しない

厳密な計測が必要な場合は、認証、サーバー側の検証、不正送信の制限などを備えた別の仕組みを利用してください。

Webサイト側にボタンを設置する

次のHTMLを、ボタンを表示したい場所へ設置します。

<button class="metric-button" type="button">クリック！</button>

続いてJavaScriptを設置し、★GASのURL★を先ほどコピーした/exec URLへ置き換えます。

const gasUrl = "★GASのURL★";
const metricButton = document.querySelector(".metric-button");

metricButton.addEventListener("click", async function () {
  metricButton.disabled = true;
  try {
    await fetch(gasUrl, { method: "POST", mode: "no-cors" });
  } catch (error) {
    alert("送信できませんでした。");
  } finally {
    metricButton.disabled = false;
  }
});

送信中はボタンを一時的に無効化し、同じ人が短時間に連打しにくくしています。ただし、ページを開き直したり別のプログラムからURLへ通信したりする操作までは防げません。

ボタンを押して動作確認する

1. 1B1セルを空欄または0にする
2. 2Webページのボタンを1回押す
3. 3数秒待ち、B1セルが1になったことを確認する
4. 4もう一度押し、B1セルが2になることを確認する
5. 5Apps Script左側の「実行数」でdoPostが完了していることを確認する

シートを開いたまま数値が変わらない場合は、ページを再読み込みして確認します。ブラウザの開発者ツールでは通信自体も確認できますが、no-corsの応答は内容を読み取れない「opaque」として扱われます。

記録されないときの確認

まとめ

• スプレッドシートのB1セルへクリック数を保存する
• GASのdoPost()がPOST通信を受け、数値を1増やす
• LockServiceで同時書き込みによる記録漏れを抑える
• Webサイト側はfetch()で/exec URLへ通信する
• 成功はシートの数値とApps Scriptの実行履歴で確認する
• 誰でも数値を増やせるため、簡易的な利用状況の把握に限定する