勉強したことのメモ

webプログラマが勉強したことのメモ。

POP広告をjQueryで再現する方法

   

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょいちょい見るけど、どういう仕組みになっているのか気になった。以下に方法のメモ。

 

■再現したいこと

  • サイト内のリンクをクリックするとタブアンダーで指定したURLを開く。javascript:void(0)みたいなリンクは開かない。
  • クリックすると以降○時間はタブアンダーは開かない。○時間の部分は任意で設定可能。

 

■ソース

(function($){
	$.fn.popad = function(options){

		var defaults = {
			url : '', 
			limit : 1 
		};

		var setting = $.extend(defaults, options);

		if( setting.url == '' ){
			return false;
		}

		if( setting.limit < 1 || setting.limit > 24 ){
			setting.limit = 1;
		}

		//cookieの処理
		var flg = true;
		var all_cookies = document.cookie;
		if( all_cookies != '' ){
			var cookies = all_cookies.split('; ');
			for( var i = 0; i < cookies.length; i++ ){
				var cookie = cookies[ i ].split('=');
				if( cookie[0] == 'popad' ){
					flg = false;
				}
			}
		}

		//aタグクリック
		jQuery('a').click(function(){
			var click_url = $(this).attr('href');
			if( !click_url.match(/(http|https):\/\/.+/) ){
				return false;
			}
			if( flg ){
				var expire = new Date();
				expire.setTime( expire.getTime() + 1000 * 3600 * setting.limit );
				document.cookie = 'popad=1; path=/; expires=' + expire.toUTCString();
				window.location.href = setting.url;
				window.open($(this).attr('href'));
				return false;
			}
		});


	}
})(jQuery);

※使用される場合は自己責任でお願いします。

 

■サンプル

http://sample.taitan916.info/popad/

 

■使い方

jQueryと一緒に読み込む。以下でURLと時間を指定する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.popad.js"></script>
<script>
$(function(){
	$().popad({
		url : 'http://yahoo.co.jp', //別タブで開かせたいURL。指定しない場合はタブは開かず。
		limit : 1 //有効時間設定。1~24時間までで整数値。デフォルトは1時間
	});
});
</script>

 

■その他

動作は多分再現できたはず。ただアフィリエイトとかだと相手先から許可は出なさそう。というかペナルティを喰らいそう。

 - jQuery

  関連記事

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...