外部リンク（予約サイト等）のクリック計測

このページでは、Googleアナリティクス4（GA4）で 外部の予約サイト や SNS・地図アプリ などへのリンククリックを計測する方法をまとめています。

GA4を導入したい（基本）ができている前提で、「重要な外部リンクだけに絞って計測する」 ための実装パターンを、静的HTMLサイト向けに解説します。

このページの対象とゴール
前提：GA4タグとクリック計測の基本
外部リンク計測の考え方
STEP1：計測したい外部リンクに「ラベル」を付ける
1. HTML側の例：予約サイト / SNS / マップリンク
STEP2：共通スクリプトで外部リンククリックを送信する
1. JavaScriptの例（共通ファイルに追加）
応用：ドメインの違いで自動的に外部リンクを判定する
1. JavaScriptの例：自動で外部リンクを拾う
GA4で外部リンククリックが計測できているか確認する
よくあるつまづきとチェックポイント
次のステップ：GA4でできることを少しずつ広げる

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

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

すでに GA4タグ（gtag.js）はサイトに入っている
外部予約サイト・ぐるなび・食べログ・Instagram・Googleマップアプリなどへのリンク がどれくらい押されているか知りたい
内部リンク（サイト内ページ遷移）とは分けて、外部サイトへの送客状況 を把握したい
タグマネージャーではなく、HTML＋共通JavaScriptでシンプルに対応したい

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

「どの外部リンクがどれくらいクリックされているか」を GA4のイベントレポートで確認できる
予約サイト・SNS・マップアプリなど、種類ごとにイベント名を分けて集計 できている
必要であれば、外部予約サイトへのクリックをコンバージョン として扱える

ポイント：すべての外部リンクを追う必要はない

サイト内の全ての外部リンクを計測しようとすると、管理が大変になります。「予約サイト」「公式SNS」「地図アプリへの導線」など、売上や来店に近いリンクだけ を選んで計測するのがおすすめです。

前提：GA4タグとクリック計測の基本

このページで紹介する外部リンク計測は、GA4を導入したい（基本）と、クリック・スクロールの計測を入れたいを済ませていることが前提になります。

<head> 内には、次のような GA4タグが入っている想定です。

<!-- 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>

また、クリック計測の基本ガイドで紹介したような 共通JavaScript を、assets/js/main.js などで読み込んでいる前提で話を進めます。

外部リンク計測の考え方

外部リンクの計測では、主に次のようなリンクを対象にすることが多いです。

ホットペッパー・食べログ・ぐるなびなどの 外部予約サイト
Instagram・X（旧Twitter）・Facebook などの SNS公式アカウント
Googleマップアプリで開くための 外部マップリンク

Templyでは、次のような方針で整理することをおすすめしています。

「どこに送客しているか」 が分かるよう、イベント名をサイトごとに分ける
HTMLに data-* 属性で「どの外部リンクか」を書いておく
共通のJavaScriptで、対象のリンククリックをまとめて GA4に送る

ポイント：「どの予約サイトが効いているか」を見える化する

たとえば、hotpepper_click と tabelog_click のクリック数を比較できるようにしておくと、
どの予約サイトへの導線を強めるべきか を判断しやすくなります。

STEP1：計測したい外部リンクに「ラベル」を付ける

まず、計測したい外部リンクに data-gtag-outbound という属性を付けます。

HTML側の例：予約サイト / SNS / マップリンク

<!-- ホットペッパーの予約ページ -->
<a
  href="https://www.hotpepper.jp/strXXXXXX/"
  class="btn btn-primary"
  target="_blank"
  rel="noopener"
  data-gtag-outbound="hotpepper_reserve">
  ホットペッパーで予約する
</a>

<!-- 食べログの店舗ページ -->
<a
  href="https://tabelog.com/XXXXXX/"
  class="btn btn-secondary"
  target="_blank"
  rel="noopener"
  data-gtag-outbound="tabelog_page">
  食べログの口コミを見る
</a>

<!-- Instagram公式アカウント -->
<a
  href="https://www.instagram.com/yourshop/"
  class="link-sns"
  target="_blank"
  rel="noopener"
  data-gtag-outbound="instagram_profile">
  Instagramを見る
</a>

<!-- Googleマップアプリで開くリンク -->
<a
  href="https://maps/map.app.goo.gl/XXXXXX"
  class="link-map"
  target="_blank"
  rel="noopener"
  data-gtag-outbound="google_maps/map_app">
  Googleマップアプリで開く
</a>

data-gtag-outbound の値（例：hotpepper_reserve）が、GA4に送るときの 「どの外部リンクか」ラベル として使えます。

ポイント：イベント名ではなく「ラベル」を柔軟に使う

外部リンクの場合、イベント名は共通の outbound_click にしておき、どのサイトかは data-gtag-outbound をラベルとして渡す、という整理にしておくと管理しやすくなります。

STEP2：共通スクリプトで外部リンククリックを送信する

次に、data-gtag-outbound が付いたリンクがクリックされたときに GA4へイベントを送るスクリプトを追加します。

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

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

document.addEventListener('DOMContentLoaded', function () {
  var outboundLinks = document.querySelectorAll('[data-gtag-outbound]');

  outboundLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      var label = link.getAttribute('data-gtag-outbound') || link.href;

      if (typeof gtag === 'function') {
        gtag('event', 'outbound_click', {
          'event_category': 'temply_outbound',
          'event_label': label,
          'transport_type': 'beacon'
        });
      }
    });
  });
});

このスクリプトにより、data-gtag-outbound が付いたリンクがクリックされると、outbound_click というイベント名で GA4に送信されます。（カテゴリは temply_outbound、ラベルは data-gtag-outbound の値）

ポイント：transport_type: 'beacon'で送信の安定性を上げる

外部リンクへの遷移時はページ遷移がすぐに起こるため、イベントが送信される前にページが閉じてしまうことがあります。'transport_type': 'beacon' を付けておくと、バックグラウンド送信 が行われやすくなり、計測の抜け漏れを減らせます。

応用：ドメインの違いで自動的に外部リンクを判定する

「data属性を付け忘れそうで不安」「すべての外部リンクをひとまとめで見たい」という場合は、ドメインの違いで外部リンクを自動判定する方法もあります。

JavaScriptの例：自動で外部リンクを拾う

document.addEventListener('DOMContentLoaded', function () {
  var currentHost = location.host;
  var links = document.querySelectorAll('a[href^="http"]');

  links.forEach(function (link) {
    try {
      var url = new URL(link.href);

      // ホスト名が異なれば外部リンクとみなす
      if (url.host !== currentHost) {
        link.addEventListener('click', function () {
          if (typeof gtag === 'function') {
            gtag('event', 'outbound_click_auto', {
              'event_category': 'temply_outbound_auto',
              'event_label': url.host + url.pathname,
              'transport_type': 'beacon'
            });
          }
        });
      }
    } catch (e) {
      // URL解析に失敗した場合は何もしない
    }
  });
});

この方法では、「自サイトとは異なるドメインへ飛ぶリンク」 を自動的に外部リンクとして扱います。
ただし、すべての外部リンクが対象になってしまうため、最初は data属性を付ける方法（STEP1〜2） のほうが扱いやすい場合も多いです。

ポイント：自動判定は「ざっくり全体を見る」用途向き

どの外部サイトが多いかの全体像をつかむには便利ですが、特定の予約サイトやSNSに絞って集計したい場合は、data属性を併用するのがおすすめです。

GA4で外部リンククリックが計測できているか確認する

実装ができたら、GA4管理画面でイベントが届いているか確認しましょう。

実際にサイトの外部リンク（予約サイト・SNSなど）をクリックしてみる
GA4管理画面で「レポート」→「リアルタイム」を開く
画面下部の「イベント」に、outbound_click や outbound_click_auto などが表示されているか確認
しばらく時間が経ったら、「レポート」→「エンゲージメント」→「イベント」で集計値を確認
特に重要な外部リンク（例：予約サイト）については、「コンバージョン」としてマークしておく

ポイント：イベント名とラベルのルールをメモしておく

outbound_click と outbound_click_auto が混ざったり、ラベルの付け方がバラバラになると、あとで見返しづらくなります。「イベント名はこれ」「ラベルはこう付ける」 という簡単なメモを1つ作っておくと安心です。

よくあるつまづきとチェックポイント

イベントがGA4に出てこない

data-gtag-outbound のスペルミスや、空の値になっていないか
共通JSファイル（例：assets/js/main.js）が全ページで読み込まれているか
ブラウザの開発者ツールで、JavaScriptエラーが出ていないか
広告ブロッカーや一部ブラウザのトラッキング防止機能の影響を受けていないか

クリック計測と外部リンク計測のイベントが混ざる

クリック計測（クリック・スクロールの計測を入れたい）と外部リンク計測を両方入れている場合は、

クリックは temply_click、外部リンクは temply_outbound のように event_category を分ける
イベント名も reserve_click_header と outbound_click など、役割が分かる名前にしておく

外部サービス側に独自のGA連携がある場合

一部の予約サイトや予約システムASPでは、外部サービス側でもGA連携機能 を用意していることがあります。
その場合、今回の方法はあくまで 「自分のサイトから外部サイトへ送客した数」 を見るためとして割り切り、
実際の予約完了数は外部サービスの管理画面やレポートで確認する、という切り分けも有効です。

ポイント：「送り出し」と「成約」の両方で見る

自サイトでの外部リンククリック数（送り出し）と、外部サービス側での予約数（成約）を
セットで見る と、「どの導線が一番効いているか」をより立体的に把握できます。