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>
■その他
動作は多分再現できたはず。ただアフィリエイトとかだと相手先から許可は出なさそう。というかペナルティを喰らいそう。
関連記事
-
-
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以外 ...