この記事で説明すること

・GoogleAnalyticsを使ってサイト内の検索キーワードを集計する方法。
・検索フォームに入力されたスペース区切りの文字列を別々の検索ワードとして集計する方法。
・（おまけ）ひらがな入力された検索キーワードをカタカナに変換してGAに集計させる方法。

（間違っている箇所がございましたらコメント頂けますと幸いです。）

前提

Googleアカウントを持っていて、プロパティを作成し終えていること。

実装

手順1.GoogleAnalyticsのグローバルサイトタグ(gtag.js)をコピー

GoogleAnalyticsの右下の歯車のアイコンをクリック
[管理/プロパティ/トラッキングコード]を押すと上記の画面に遷移しますのでグローバルサイトタグをコピー

手順2.タグを埋め込む

search.html

<ul>
    <li>
      <input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
    </li>
    <li>
      <button class="button１" onclick="search()">検索する</button>
    </li>
</ul>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '[トラッキングID]');
</script>

検索フォームのあるページに手順１でコピーしたグローバルサイトタグを埋め込む
[トラッキングID]には自分のトラッキングIDを記述
こちらでサイト内のデータをGoogleAnalyticsにて計測する準備は完了
(共通化しているheaderなどがあればそちらに貼り付けてもOK）

手順3.検索フォームの文字列を検索ワードとして集計させるための処理を追加

search.html

<ul>
    <li>
      <input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
    </li>
    <li>
      <button class="button１" onclick="search()">検索する</button>
    </li>
</ul>

<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
  function search(){
    window.dataLayer = window.dataLayer || [];
              
    function gtag(){dataLayer.push(arguments);}

    gtag('js', new Date());
    gtag('config', '[トラッキングID]');

    // キーワード検索の文字列を取得
    let keyWord = document.getElementById('search_keyword_id').value;
    gtag('event','keyword', {'event_label' : keyWord});
  }
</script>

こちらの処理を追加することでGoogleAnalyticsの[行動/イベント]で以下の様に計測されます。
イベントアクション:keyword
イベントラベル:検索フォームで入力したワード

しかし、このままの実装だと「いちご　ばなな　りんご」と検索した際に「いちご」、「ばなな」、「りんご」と別々のワードとしてGoogleAnalyticsに集計させたいが「いちご　ばなな　りんご」と集計されてしまうので手順４に進みます。

手順4.検索フォームからスペース区切りの文字列を別々の検索ワードとして集計させるための処理を追加

search.html

<ul>
    <li>
      <input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
    </li>
    <li>
      <button class="button１" onclick="search()">検索する</button>
    </li>
</ul>

<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
  function search(){
    window.dataLayer = window.dataLayer || [];
              
    function gtag(){dataLayer.push(arguments);}

    gtag('js', new Date());
    gtag('config', '[トラッキングID]');

              // キーワード検索の文字列を取得
              let keyWord = document.getElementById('search_keyword_id').value;

              let splitKeyWord = keyWord.split(/ |　/);

              //配列の長さ（個数）を取得
              let keyWordLength = splitKeyWord.length;

              //forでスペース区切りのキーワードを個別に取得
              for(let i = 0; i<keyWordLength; i++){
                  if(splitKeyWord[i]){
                      gtag('event','keyword', {
                          'event_label' : splitKeyWord[i]
                      });
                  }
              }
          }
</script>

こちらの処理を追加することで検索フォームに「いちご　ばなな　りんご」と検索した際に「いちご」、「ばなな」、「りんご」と別々のワードとしてGoogleAnalyticsに集計されます。

おまけ

ひらがな入力された検索ワードをカタカナに変換してGAに集計させる方法

search.html

<ul>
    <li>
      <input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
    </li>
    <li>
      <button class="button１" onclick="search()">検索する</button>
    </li>
</ul>

<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
  function search(){
    window.dataLayer = window.dataLayer || [];
              
    function gtag(){dataLayer.push(arguments);}

    gtag('js', new Date());
    gtag('config', '[トラッキングID]');

              // キーワード検索の文字列を取得
              let keyWord = document.getElementById('search_keyword_id').value;

              let splitKeyWord = keyWord.split(/ |　/);

              //配列の長さ（個数）を取得
              let keyWordLength = splitKeyWord.length;

              //forでスペース区切りのキーワードを個別に取得
              for(let i = 0; i<keyWordLength; i++){
                  if(splitKeyWord[i]){
                      gtag('event','keyword', {
                          'event_label' : hiraToKana(splitKeyWord[i])
                      });
                  }
              }
          }

          //ひらがなをカタカナに変換する処理
          function hiraToKana(str) {
              return str.replace(/[\u3041-\u3096]/g, function(match) {
                  var chr = match.charCodeAt(0) + 0x60;
                  return String.fromCharCode(chr);
              });
          }
</script>

この実装を行うことで、実装前までは「いちご」と「イチゴ」が別のワードとしてGoogleAnalyticsに集計されてしまっていましたが、どちらも「イチゴ」として集計される様になります。