bingo!CMS v1.7 マニュアルサイト

bingo!CMSを使って制作されたWebサイトに「サイト内検索」を設置する方法と、サイト内検索で検索されたキーワードをGA4で確認する方法をご紹介します。
実装には、Googleが提供する「プログラム可能な検索エンジン」と「Google アナリティクス 4 プロパティ（GA4）」を使用します。
各サービスの利用規約を確認・了承してから本Tipsの作業を実施してください。

プログラム可能な検索エンジン利用規約
https://support.google.com/programmable-search/answer/1714300?hl=ja
Google アナリティクス利用規約
https://marketingplatform.google.com/about/analytics/terms/jp/

Googleアカウントをお持ちでない場合は、事前にGoogleアカウントを作成してください。

Google アカウントの作成 - Google アカウント ヘルプ
https://support.google.com/accounts/answer/27441?hl=ja

プログラム可能なカスタムエンジンを使ってGA4で検索キーワードを収集できるようにするには、「検索ボックスを設置するページ」と「検索結果を表示するページ」とを別々に用意する必要があります。
別々のページを用意する理由は、GA4がサイトから検索キーワードを収集するときに、クエリパラメータを利用しているからです。

例えば、本サイトのサイト内検索で「サイトのつくりかた」と検索すると、検索結果を表示するページのURLは "https://manual.bingo-cms.com/v17/gcse-list.html?q=サイトのつくりかた" のように変化します。このうち"q"がクエリパラメータです。
GA4側で設定することにより、"q=" より後の文字を検索キーワードとして収集できるようになります（クエリパラメータはq以外の文字も設定可能）。

検索ボックスを設置するページと検索結果を表示するページが同じ場合、このクエリパラメータが表示されず検索キーワードを収集できないため、検索ボックスを設置するページと検索結果を表示するページは必ず別々に用意してください。

すべての検索エンジン画面が開きます。
過去にプログラム可能な検索エンジンを作成したことがある場合は、ここに一覧が表示されます。

新しく作成するときは、画面内の 追加 をクリックします。

新しい検索エンジンの作成画面が開きます。
下記をご参考に設定してください。

• 検索エンジンの名前を入力する
  検索エンジン名を入力します。ここに入力した名前は、前項の「すべての検索エンジン」画面に表示されます。
• 検索の対象を指定する
  「特定のサイトまたはページを検索」または「ウェブ全体を検索」から選択できますが、今回は自サイトの検索が目的なので前者を選びます。
  「次のいずれかを追加できます」を参考に、サイトまたはページを入力欄に入力します。
• 検索設定
  画像検索とセーフサーチを有効にする場合は、ボタンをクリックして有効にします。

「私はロボットではありません」にチェックを入れ、作成 をクリックします。

「新しい検索エンジンが作成されました」の画面が開きます。プログラム可能な検索エンジンのコードが表示されますが、そのまま続けて カスタマイズ をクリックします。

プログラム可能な検索エンジンの詳細画面が開きます。
画面左のメニューから 検索機能 > 詳細設定 をクリックし、ウェブ検索の設定 をクリックして展開します。
クエリ パラメータ名 の項目に入力されているクエリパラメータを確認してください。初期設定では "q" が入力されています。

任意のクエリパラメータに変更したいときは、鉛筆の形のアイコンをクリックすると、クエリ パラメータ名を変更する入力欄が表示されます。

次に、画面左のメニューから 概要 > デザイン をクリックし、すべてのデザインの設定 をクリックします。

レイアウトの中から 2ページ をクリックします（レイアウトをクリックするたびに設定が自動保存されます）。
コードを取得 をクリックします。

コードが2つ表示されます。
1つ目のコードは「検索ボックスを設置するページ」、2つ目のコードは「検索結果を表示するページ」でそれぞれ使用します。
コードをメモにコピーするなど、後ですぐにわかるようにしておいてください。

結果サイトのURL の入力欄に「検索結果を表示するページ」のURLを入力し、保存 をクリックします。

CSS・JS設定画面が開きます。
javascript の入力欄に１つ目のコードのうち scriptタグのみ を貼り付けます。
サイト内検索をスマートフォンからも使用する場合は、スマートフォンにコピーをクリックします。※bingo!CMS1.7.2以下の場合、入力欄は共通です。

保存 をクリックしたら、画面右上の × をクリックし、CSS・JS設定画面を閉じます。

デザインユニットの中から HTML v17 のアイコンを検索ボックスを設置したいコンテナにドラッグ&ドロップします。

HTML v17 のユニット編集 をクリックします。

HTML v17 のユニット編集画面が開きます。
html の入力欄に１つ目のコードのうち divタグのみ を貼り付けます。
サイト内検索をスマートフォンからも使用する場合は、SP のタブをクリックします。

PCの内容をコピー をクリックします。
コードが反映されたことを確認したら 保存 をクリックします。

ページ編集画面に戻ったときにHTML v17が一時的に非表示になる場合は、ページ編集画面を再読み込みすると表示されます。

「検索結果表示ページ」でも同様に、2つ目のコードをscriptタグとdivタグに分け、それぞれ CSS/JS と HTML v17 に設定してください。

該当するデータストリームをクリックします。

拡張計測機能 の設定（歯車の形のアイコン）をクリックします。

サイト内検索 のトグルをクリックしてイベントを有効にします。

詳細設定を表示 をクリックすると、サイト内検索キーワードのクエリ パラメータを設定する入力欄が表示されます。
プログラム可能な検索エンジンで使用しているクエリ パラメータと同じクエリ パラメータが設定されているか確認してください（本Tipsにおいては"q"）。見当たらない場合は、クエリ パラメータをカンマ区切りで追加してください。

画面右上の 保存 をクリックしてください。

過去にカスタム ディメンションを作成したことがある場合は、ここに一覧が表示されます。
新しく作成するときは、画面内の カスタム ディメンションを作成 をクリックします。

新しいカスタム ディメンション の画面が開きます。
以下の内容を設定してください。

• ディメンション名（必須） … search_term
• 範囲（必須） … イベント
• 説明（任意） … このカスタム ディメンションに関する説明を入力します。
• イベント パラメータ（必須） … search_term

画面右上の 保存 をクリックします。

以上で、サイト内検索で検索されたキーワードをGA4で収集する設定が完了しました。
設定してからGA4のレポートやデータ探索ツールにデータが反映されるまで、24〜48時間かかることがあります。
キーワードの確認は、一定時間の経過後に行ってください。

イベントのレポート画面が表示されます。
表の中の view_search_results をクリックします。

view_search_results の詳細画面が開きます。
search_term のカードから検索キーワードとイベント数、総ユーザー数が確認できます。

ディメンション をクリックします。

ディメンションの選択 が開きます。
一覧の中から、イベント名 と 検索キーワード を探します。
それぞれのチェックボックスをクリックしてチェックを入れ、インポート をクリックします。

指標 をクリックします。

指標の選択 が開きます。
一覧の中から、イベント数 を探します。
チェックボックスをクリックしてチェックを入れ、インポート をクリックします。

行 の「ディメンションをドロップするか選択してください」をクリックし、検索キーワード をクリックします。

値 の「指標をドロップするか選択してください」をクリックし、イベント数 をクリックします。

フィルタ の「ディメンションや指標をドロップするか選択してください」をクリックし、イベント名 をクリックします。

条件 に以下の内容を設定してください。

• マッチタイプ … 次と完全一致
• 式 … view_search_results

適用 をクリックします。

探索レポートに検索キーワードとイベント数が表示されました。