2015.8.28
URLパラメーターを取得してJQueryで条件分岐をやってみましょう。GETメソッドでURLパラメータが付く場合に、コンテンツの中身を入れ替えたりできるので、A/Bテストの実行にも有用だと思います。簡単な実装なのでこの機会に使ってみましょう。
var url = location.href; params = url.split("?"); spparams = params[1].split("&"); var paramArray = [];
まずはURLのパラメーターを取得します。 http://www.example.com/?key=onece
このようなURLをsplitで切っているわけですね。
for ( i = 0; i < spparams.length; i++ ) { vol = spparams[i].split("="); paramArray.push(vol[0]); paramArray[vol[0]] = vol[1]; } if ( paramArray["key"] == "onece") { alert("onece"); } else { alert("no onece"); }
こんなイメージですね。
if文を書き換えればいいだけですね。
for ( i = 0; i < spparams.length; i++ ) { vol = spparams[i].split("="); paramArray.push(vol[0]); paramArray[vol[0]] = vol[1]; } if ( paramArray["key"] == "onece") { $("#link").attr("href", "http://www.yahoo.co.jp/"); } else { $("#link").attr("href", "http://www.google.com/"); }
JQueryで画像を入れ替えたり、コンテンツを.hide()とか様々なやり方が考えられます。
LPからの遷移などで使うと便利だと思います。
簡易的なA/Bテストにも直ぐ使えるのでオススメ。
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script> $(function(){ var url = location.href; params = url.split("?"); spparams = params[1].split("&"); var paramArray = []; for ( i = 0; i < spparams.length; i++ ) { vol = spparams[i].split("="); paramArray.push(vol[0]); paramArray[vol[0]] = vol[1]; } if ( paramArray["key"] == "onece") { $("#link").attr("href", "http://www.yahoo.co.jp/"); } else { $("#link").attr("href", "http://www.google.com/"); } }); </script>
※2017年9月4日 記載にミスが有ったというご指摘をいただき修正いたしました。
ご指摘いただいた おおつきさま、誠にありがとうございました。