ページ移動をしてもパラメーターを引き継ぐjs（jQuery）つくりました。【広告コード等に活用】
仕事上、広告で回しているLPから遷移先の申し込みページに、広告コード付きのパラメータを渡したかったので、いろいろと調べてみました。
広告やABテストで活用したい
広告文のABテストやページのABテストなどをしていると、どの申し込みフォームからユーザーが来たのか分かるように、ユーザーリストの管理画面に、URLの最後に「?abc=youki」「?ad=hogehoge123」など付いてるパラメータ引き継ぎたいと思ったことありませんか。（？？）
実際、１つのLPに対して数十パターンの広告を流していると、広告の管理画面だけでなく、顧客リスト（メルマガなど）の管理画面上でもどの広告からのユーザーが多いか判断したいって思うこともあります。
▼この画面に広告コードも追加する事がよくある
とはいえ、エンジニアさんならPHPとかJSで「チョチョイのちょい」と作っちゃうと思うんですが、ボクは非エンジニア。
PHPとかJSを１から書いたり理解できるほど、慣れていません（汗）
そんな時にお願いするのはGoogle先生！
「パラメータ 引き継ぎ JS」で検索して見つけたサイトを元に、自分の求める仕様に変えちゃいます。
今回参考にしたのは以下のサイトです。
jQueryを使うようなのでその１文だけは削除して使いました。
※元からLPにはjQueryを入れていたため
▼紹介されていたコード …動かない？！
<!-- パラメータ引き継ぎ設定スクリプト -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var prm;
function retrieveGETqs() {
var query = window.location.search.substring(1);
return query;
/* 引数がない時は処理しない */
if (!query) return false;
}
$(function(){
jQuery('.url').click(function() {
//リンク先を取得
var target_url = $(this).attr("href");
//パラメータを取得
var str = retrieveGETqs();
prm = decodeURIComponent(str);
if (prm) {
//target_urlに'？'を含む場合
if (target_url.indexOf('?') != -1) {
//追加パラメータの先頭文字列を'&'に置換
$('a.url').attr('href', target_url + '&' + prm);
} else {
$('a.url').attr('href', target_url + '?' + prm);
}
}
})
})
;//# sourceURL=foobar.js
// JavaScript Document
</script>
<!-- パラメータ引き継ぎ設定スクリプト-->「これでページ遷移してもパラメータが引き継がれるぞー！」と、コピペしたコードを上書き保存して早速テスト。
・・・
・・・・・
パラメータ引き継がれないぞ、どういうこと？！
まさか過ぎて、コピペミスしたかと思いもう一度、貼り直しました。
結果は同じ。
動かない＼(^o^)／ｵﾜﾀ
動かなかった原因はこれ
でも諦めないのが、ボク。
よーくみると、
//追加パラメータの先頭文字列を'&'に置換
$('a.url').attr('href', target_url + '&' + prm);
} else {
$('a.url').attr('href', target_url + '?' + prm);
}
} 'a.hrl'
↑こいつだあああああああ！！！
そう、ページ遷移なので、わざわざaタグにクラスは付けていません。
.urlを削って上書き保存して、試してみると、、、
↓ ↓ ↓
見事に動きました！！！
これにてミッション完了です！！
いやー 長かった。
非エンジニアにはパズルを解くような感じで楽しかったです。
最終的にボクが設定したコード
<!-- URLパラメータ引き継ぎ設定スクリプト jQuery必須 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var prm;
function retrieveGETqs() {
var query = window.location.search.substring(1);
return query;
/* 引数がない時は処理しない */
if (!query) return false;
}
$(function(){
//各'a'に共通のクラス名をつけることで、一部のリンクだけがパラメータ引き継ぎをできる用意も可能
jQuery('a').click(function() {
//リンク先を取得
var target_url = $(this).attr("href");
//パラメータを取得
var str = retrieveGETqs();
prm = decodeURIComponent(str);
if (prm) {
//target_urlに'？'を含む場合
if (target_url.indexOf('?') != -1) {
//追加パラメータの先頭文字列を'&'に置換
$('a').attr('href', target_url + '&' + prm);
} else {
$('a').attr('href', target_url + '?' + prm);
}
}
})
})
;//# sourceURL=foobar.js
// JavaScript Document
</script>
<!-- パラメータ引き継ぎ設定スクリプト--> ▲jQueryありの状態にしているので、コピペしても使えますよ。
ページ遷移のときに、パラメータ引き継ぎをしたいって方は、ぜひご利用ください。