クリック・スクロールの計測を入れたい

このページでは、Googleアナリティクス4（GA4）で ボタンのクリック や ページのスクロール を計測するための基本的な考え方と実装例をまとめています。

GA4を導入したい（基本）ができている前提で、静的HTMLサイトでも使いやすい最低限のイベント計測 を中心に解説します。

このページの対象とゴール
前提：GA4タグ（gtag.js）が入っているか確認する
クリック計測の基本方針
STEP1：重要なボタンに「イベント名」を付ける
1. HTML側の例：予約ボタン・問い合わせボタン
STEP2：共通のスクリプトでGA4イベントを送信する
1. JavaScriptの例（共通ファイルに追加）
スクロール計測の考え方
スクロール80％到達を1回だけ記録する例
1. JavaScriptの例（共通ファイルに追加）
GA4でイベントが入っているか確認する
次のステップ：GA4でできることを少しずつ広げる

このページの対象とゴール

このページは、次のような方を想定しています。

すでに GA4タグ（gtag.js）はサイトに入っている
「予約ボタン」「お問い合わせボタン」などのクリック が何回押されているか知りたい
トップページやアクセスページの スクロール状況 をざっくり把握したい
タグマネージャーではなく、なるべくシンプルなJavaScriptだけで対応したい

読み終わるころには、次の状態を目指します。

メインのボタンに クリックイベント を仕込めている
GA4のイベントレポートで、どのボタンがどれくらい押されているか を確認できる
スクロールの計測方法（自動計測と簡易的な方法）のイメージがつかめている

ポイント：全部を測る必要はない

「サイト内のすべてのクリック」を追いかけるのではなく、予約・問い合わせ・メニューPDFダウンロードなど「お店の成果に近い動き」だけ に絞って計測するのがおすすめです。

前提：GA4タグ（gtag.js）が入っているか確認する

クリックやスクロールのイベントを送る前に、サイトに GA4タグ（gtag.js） が正しく設置されている必要があります。

<head> 内に、次のようなコードが入っているかを確認してください。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

G-XXXXXXXXXX の部分は、実際の測定IDになっているはずです。まだ入っていない場合は、先にGA4を導入したい（基本）を済ませてください。

クリック計測の基本方針

GA4でクリックを計測する方法はいくつかありますが、Templyでは次のような方針をおすすめしています。

重要なボタン・リンクだけを対象にする（予約・問い合わせ・メニューなど）
HTML側に data-* 属性で「イベント名」を書いておく
共通のJavaScriptで、対象のクリックをまとめてGA4に送る

ポイント：HTMLに「意味」を書いて、JSは共通で

onclick="..." を1つ1つのボタンに書くよりも、HTMLに「何のクリックか」だけ書いておき、JavaScriptは共通ファイルにまとめると管理しやすくなります。

STEP1：重要なボタンに「イベント名」を付ける

まず、計測したいボタンやリンクに data-gtag-event という属性を付けます。

HTML側の例：予約ボタン・問い合わせボタン

<!-- 予約ボタン（ヘッダー） -->
<a href="/reserve/" class="btn btn-primary" data-gtag-event="reserve_click_header">
  ご予約はこちら
</a>

<!-- お問い合わせボタン（フッター） -->
<a href="/contact/" class="btn btn-secondary" data-gtag-event="contact_click_footer">
  お問い合わせ
</a>

data-gtag-event の値（ここでは reserve_click_header など）が、GA4に送る イベント名 になります。

ポイント：イベント名は「どこで何をしたか」が分かるように

reserve_click より、reserve_click_header のように「予約＋クリック＋場所」 が分かる名前にしておくと、レポートを見たときに迷いにくくなります。

STEP2：共通のスクリプトでGA4イベントを送信する

次に、先ほどの data-gtag-event が付いたリンクをクリックしたときに、GA4へイベントを送る共通スクリプトを用意します。

JavaScriptの例（共通ファイルに追加）

たとえば assets/js/main.js のような共通JSファイルに、次のようなコードを追加します。

document.addEventListener('DOMContentLoaded', function () {
  // data-gtag-event を持つ全てのリンクを取得
  var trackedLinks = document.querySelectorAll('[data-gtag-event]');

  trackedLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      var eventName = link.getAttribute('data-gtag-event');

      if (typeof gtag === 'function' && eventName) {
        gtag('event', eventName, {
          'event_category': 'temply_click',
          'event_label': link.href || window.location.pathname
        });
      }
    });
  });
});

このスクリプトにより、data-gtag-event を持つリンクがクリックされると、temply_click というカテゴリで GA4 にイベントが送信されます。

ポイント：エラーが出ないように「gtag関数があるか」を確認

if (typeof gtag === 'function') という一文を入れておくことで、何らかの理由で GA4タグが読み込めなかったときも、JavaScriptエラーでページが止まらないようにしています。

スクロール計測の考え方

スクロールの計測にはいくつかの方法がありますが、Templyでは次のような整理がおすすめです。

「ページの下のほうまで読まれているか」をザックリ知りたい → スクロール量のイベントを送る
「特定のセクションが表示されたか」を知りたい → そのセクションを通過したタイミングでイベントを送る

ポイント：最初は「一番下まで読んだか」ぐらいでOK

スクロールイベントを細かく分けすぎるとレポートが複雑になります。
まずは 「ページの80％ぐらいまでスクロールしたら1回記録する」 程度から始めるのが現実的です。

スクロール80％到達を1回だけ記録する例

ここでは、ページの80％付近までスクロールしたときに1度だけイベントを送る簡易的な例を紹介します。

JavaScriptの例（共通ファイルに追加）

document.addEventListener('DOMContentLoaded', function () {
  var hasFiredScrollEvent = false;

  function handleScrollEvent() {
    if (hasFiredScrollEvent) return;

    var scrollTop = window.scrollY || window.pageYOffset;
    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
    var scrollRatio = docHeight > 0 ? (scrollTop / docHeight) : 0;

    if (scrollRatio >= 0.8) {
      hasFiredScrollEvent = true;

      if (typeof gtag === 'function') {
        gtag('event', 'scroll_depth_80', {
          'event_category': 'temply_scroll',
          'event_label': window.location.pathname
        });
      }
    }
  }

  window.addEventListener('scroll', handleScrollEvent);
});

このスクリプトは、ページの80％以上までスクロールされたタイミングで、scroll_depth_80 というイベントを1回だけ送信します。

ポイント：どのページに入れるか決める

全ページで同じスクロールイベントを入れても構いませんが、まずは「トップページ」「セールスレター」「アクセスページ」など、重要なページだけ から始めるのがおすすめです。