サイト内検索にGoogleカスタム検索エンジンを利用しているサイトは多いかと思います。
Googleカスタム検索エンジンについては、色々なサイトで紹介されているため、ここでは省略しますが、Googleカスタム検索の管理画面から発行されるコードを、HTMLソースの
セクションの
今回はサイト内に設置したGoogleカスタム検索の検索ボックスに入力されたキーワードをcollectに送信できるか検証してみました。
検証方法
- 検証用のページを作成
- Googleカスタム検索のコードを設置
- 検索窓にキーワードを入力して検索実行
- collectのリアルタイム機能でログの送信を確認
尚、今回の検証には以下の前提条件があります。
- jQueryを利用しています。
- collectのタグだけでは対応できないため、専用のJavaScript関数を用意し利用しています。
- 検索結果の表示でページ遷移が発生しないことを前提としているため、Googleカスタム検索のコードは”
前提条件の２と３については以下の詳細をご覧ください。
２．専用のJavaScript関数について
collectで用意するタグだけではGoogleのカスタム検索に入力されたキーワードを取得してログ通知することができないため、今回の検証用に関数を作りました。
collect拡張関数 – Googleカスタム検索の検索ワードを自動送信する
|
/* ——————————————- * Googleカスタム検索の入力キーワードを取得して * collectにログ送信 * ——————————————-*/ $(function() { var t; var cnt = 0; t = window.setInterval(function(){loadGCSObject();},200); function loadGCSObject() { var _b = $(“input.gsc-search-button-v2”); var _i = $(“input#gsc-i-id1”); if( typeof(_b) === “object” && typeof(_i) === “object” ) { if( _b.size() > 0 && _i.size() > 0 ) { _b.click(function() { return notifyGCSKeyword(_i.val()); }); _i.keydown(function(ev) { if( (ev.which && ev.which === 13) || (ev.keyCode && ev.keyCode === 13)) { return notifyGCSKeyword(_i.val()); } }); cnt = 30; } } cnt++; if( cnt >= 30 ) { window.clearInterval(t); t = null; } } function notifyGCSKeyword( kw ) { if( typeof(kw) === “string” && kw !== “” ) { __mobylog_attribute_item = { __msq : kw, __msc : “Googleカスタム検索” } __push_beacon(location.href); return true; } return false; } }); |
collect拡張関数内で実行していること
- keydownイベントを取得（ページ下部の注意事項を参照）
- Googleカスタム検索のテキストボックスに入力されたキーワードを取得
- __mobylog_attribute_item{}で、__msq（検索クエリ）パラメタに入力されたキーワードを、__msc（検索カテゴリ）パラメタに”Googleカスタム検索”を固定で代入
- __push_beacon()関数でcollectにログ送信
３．Googleカスタム検索のコードについて
Googleのカスタム検索では、デザインを７つの選択肢から選ぶことができます。
何れかのデザインを選択してコードを取得すると以下のようなコードが画面に表示されます。
|
|
上記のピンク色のタグ部分が選択したデザインによって変更されます。
出力されるコードは４つあり、それをまとめたのが以下の表になります。
| タグ | デザイン |
| オーバーレイ / 全幅 / コンパクト | |
| ２ページ / Googleがホスト（現在のウィンドウ, 新規のウィンドウ） | |
| ２列 | |
| 結果のみ |
今回は、上記４つのうち
検証結果
検証用ページに設けたGoogleカスタム検索窓にキーワード「ログストレージの拡張方法」を入力し、collectのリアルタイムログチェックで確認した図が以下です。
検索キーワードに「ログストレージの拡張方法」、検索カテゴリに「Googleカスタム検索」が表示されていますので、Googleカスタム検索に入力されたキーワードをcollectにログ送信することは可能です。
注意点
今回の検証用に用意した専用のJavaScript関数では、検索ワード入力フィールドのid名、検索ボタンのclass名を以下の固定にしています。
| id名 | gsc-i-id1 |
| class名 | gsc-search-button-v2 |
このため、今後Googleカスタム検索で出力されるHTMLコードが変更された場合は動作しなくなります。
また、入力された検索ワードは、検索ボタンがクリックされたイベントもしくはリターンキーが押下されたイベントを取得しています。
検索ボタンがクリックされたイベントの取得は問題ないのですが、リターンキーが押下されたイベントは、ブラウザにより取得できない可能性があります。
今回検証で用意した関数ではkeydownイベントを利用していますが、最初は、keypressイベントを利用していました。
keypressイベントはFirefoxでは問題なくログ通知できましたが、ChromeやSafariではkeypressイベントはサポートしているものの、Googleカスタム検索のJavaScriptファイルがkeypressイベントを掴んでしまい、今回用意したJavaScript関数でkeypressイベントを捕捉できない現象が発生。
色々と試した結果、Firefox、Chrome、Safari、IEでログ通知することができることができたkeydownイベントを採用した経緯があります。
すべてのOSやブラウザ、各バージョンで検証はしてないため、collect拡張関数のご利用時は十分にテストをお願いします。
