Blog

JQueryでURLパラメーターを取得後、ifで条件分岐

2015.08.28 | jQuery | 13162views


jQurery URLパラメーターを取得してJQueryで条件分岐をやってみましょう。GETメソッドでURLパラメータが付く場合に、コンテンツの中身を入れ替えたりできるので、A/Bテストの実行にも有用だと思います。簡単な実装なのでこの機会に使ってみましょう。

JQueryで条件分岐させよう

URLパラメーターを取得する

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[neet[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[neet[0]] = vol[1];
}


if ( paramArray["key"] == "onece") {
    $("#link").attr("href", "http://www.yahoo.co.jp/");
} else {
    $("#link").attr("href", "http://www.google.com/");
}
});
</script>

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI