前回の このサイト（wordpressで作ってる)に、google custom search engineを組み込んだ.wordpressにCSE。iframe編
今回は、web elementsを使う。（Google Analyticsと連携させる)
* こっちのが簡単。自分のサーバーに処理がいかずにシンプル。drawback(google analyticsとのadjust)は最後に書く。
前回の1のgoogleの custom search engine の設定をした。その後、
に行くと、自分用の検索エンジンが見られる。そこで、custom seearch elementを選ぶと、
貼り付け用のコードスニペットがでてくる。
それを貼り付ければＯＫ。結果がこのサイトの上部にあるgoogle カスタム検索。
好きな所に、このスニペットを埋め込んで終わり。
iframeを使ったパターンと比べてみる。（共通の問題として、google にindexさせるのが必要（indexの設定項目がある）
利点
- 設置が簡単（結果ページを作らなくていい）
- webサーバ関係なし（javascriptでgoogleと通信するだけなので）
- 早い（ページ遷移がないので。特に、このサイトのような表示が重いサイトでは）
欠点
- 検索結果を、ページのどの部分に表示させるかが問題。(今回は、そのままページのトップ部分にした。）
- urlがそのまま。（google analyticsで計測できない？？）
で、この google analyticsとの連携をなんとか get aroundする。
データを pageTracker._trackPageview(“/search/?q=hogehoge”)といったものを、analyticsサーバーに送ればいいので、form部分にhookを掛けておけばいい。
、、、と思ったけど、formのsubmitを上手くhookできない。input内でkeyイベントを拾ってるみたいで日本語処理とかあって、どれがtriggerイベントか、見つけられなかった（より正確には、見つける方法がわからなかった）
しょうがないので、検索結果画面が表示されているかを、timerで監視して、表示されたら trackPageview を送ることにする。
これだと、一回目の検索しか拾わないので、やり方を変えて、googleの使ってる関数をwrapすることにした。
簡単に関数をwrapする方法がわからないので、prorotype.jsからコピペした。(javascriptがわかってない、、）。引数の数も自分で合わせてる、、、ここら辺が理解できれば、応用が広がるのだが、、
2010/01/14 追加
callbackするapiがあった。気づいてなかった。
a = new google.search.CustomSearchControl(‘my-id’);
a.setSearchCompleteCallback(this, my-function);
で良かった。試したら動いた。こっちのが百倍楽。apiだし当たり前か。
よって以下は不要なコードが多くなる。
function $A(iterable) {
if (!iterable) return [];
if (iterable.toArray) return iterable.toArray();
var length = iterable.length, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
Function.prototype.bind = function(){
if (arguments.length < 2 && arguments[0] === undefined) return this;
var __method = this, args = $A(arguments); object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
};
};
Function.prototype.wrap = function(wrapper) {
var __method = this;
return function() {
return wrapper.apply(this, [__method.bind(this)].concat($A(arguments)));
};
};
timerID_gcs = setInterval(function(){
var a= document.getElementsByClassName("gsc-resultsbox-visible")[0];
if(a){
google.search.WebSearch.RawCompletion= google.search.WebSearch.RawCompletion.\
wrap( function(m,a,b,c,d,e){
m(a,b,c,d,e);
pageTracker._trackPageview("/search/?g=" + jQuery("input.gsc-input")[0].v\
alue);
;}
);
clearInterval(timerID_gcs);
timerID_gcs = null;
}
},500);
一応、これで web elementでも google analyticsで内部検索を計測できるようになる（はず）。(analytics側で内部検索を有効にして、検索パラメータを登録する必要はある）
ちなみに、google のカスタム検索でも、利用に関する統計結果が見られるようになっている(自分のcustom検索のみのよう）みたいだけど、
この検索エンジンで使用できるデータはありません。
と表示されている。
一日経ったら、表示されていた。これはこれで、見易いかも。もちろん詳細はanalyticsで見るべきなんだけど。