ページ移動をしてもパラメーターを引き継ぐjs（jQuery）つくりました。【広告コード等に活用】

仕事上、広告で回しているLPから遷移先の申し込みページに、広告コード付きのパラメータを渡したかったので、いろいろと調べてみました。

広告やABテストで活用したい

広告文のABテストやページのABテストなどをしていると、どの申し込みフォームからユーザーが来たのか分かるように、ユーザーリストの管理画面に、URLの最後に「?abc=youki」「?ad=hogehoge123」など付いてるパラメータ引き継ぎたいと思ったことありませんか。（？？）

実際、１つのLPに対して数十パターンの広告を流していると、広告の管理画面だけでなく、顧客リスト（メルマガなど）の管理画面上でもどの広告からのユーザーが多いか判断したいって思うこともあります。

▼この画面に広告コードも追加する事がよくある

とはいえ、エンジニアさんならPHPとかJSで「チョチョイのちょい」と作っちゃうと思うんですが、ボクは非エンジニア。

PHPとかJSを１から書いたり理解できるほど、慣れていません（汗）

そんな時にお願いするのはGoogle先生！

「パラメータ　引き継ぎ　JS」で検索して見つけたサイトを元に、自分の求める仕様に変えちゃいます。

今回参考にしたのは以下のサイトです。

【JavaScript】パラメータ引き継ぎ用JSを作りました（第2弾） - My Web道

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ありの状態にしているので、コピペしても使えますよ。

ページ遷移のときに、パラメータ引き継ぎをしたいって方は、ぜひご利用ください。