イベントをセットアップする

イベントを設定すると、ウェブサイトやアプリで発生したユーザーの操作（ページの読み込み、リンクのクリック、購入など）を測定して、ビジネスのレポートに反映できるようになります。詳細

このガイドでは、Google タグ（gtag.js）または Google タグ マネージャーを使って推奨イベントとカスタム イベントをウェブサイトに設定する方法について説明します。自動収集イベントと拡張計測機能イベントを設定する必要はありません。

対象者

このガイドは、Google アナリティクスを設定して、データをレポートに出力できるようになったユーザーのうち、アナリティクスの自動収集ではカバーしきれないデータを収集する必要がある方、または特定の機能をアナリティクスで使用する必要がある方を対象としています。


始める前に

このガイドは、以下を完了されていることを前提とした内容です。

また、次のものをお持ちであることを前提としています。

  • ウェブサイトのソースコードへのアクセス権
  • Google アナリティクス アカウントの編集者の役割

イベントをセットアップする

gtag.js API を使って、Google アナリティクスにイベントを送信します。この API には gtag() という関数があります。Google アナリティクスにイベントを送信する際は、次の構文を使用します。

gtag('event', '<event_name>', {
  <event_parameters>
});

この例の gtag() 関数には以下が含まれています。

  • イベントの送信であることを Google に伝える event コマンド
  • 推奨イベントまたはカスタム イベントの名前
  • （任意）イベントについての追加情報を提供するパラメータ群

たとえば、screen_view という推奨イベントに 2 つのパラメータを追加して送信する場合は、次のようになります。

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

JavaScript にイベントを追加する

gtag() は JavaScript 関数なので、ウェブページの JavaScript コードに追加する必要があります。<script> タグ内や、HTML ページにインポートする別の JavaScript ファイルに追加することができます。

JavaScript にイベントを追加する位置は、Google タグスニペットよりも下（後）であれば、どこでもかまいません。Google タグスニペットよりも上（前）に設置すると、そのイベントのデータは処理されませんのでご注意ください。たとえば、下記のサンプルコードの場合、<script> タグ内に screen_view というイベントが含まれています。

<!DOCTYPE html>
<html lang="en">
<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>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      * The following event is sent when the page loads. You could
      * wrap the event in a JavaScript function so the event is
      * sent when the user performs some action.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

ボタンのクリック（または他のユーザー行動）に基づいてイベントを送信する場合は、JavaScript をイベントに追加します。

アナリティクスでイベントを確認する

イベントとそのパラメータは、リアルタイム レポートと DebugView レポートで確認できます。DebugView レポートを使用するには、追加の設定がいくつか必要となる点に注意しましょう。これらのレポートでは、ウェブサイトでユーザーがトリガーしたイベントが、発生と同時に表示されます。

次のステップ