タブアンダー広告をjQueryで再現する方法
2024/01/13
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょいちょい見るけど、どういう仕組みになっているのか気になった。以下に方法のメモ。
再現したいこと
- サイト内のリンクをクリックするとタブアンダーで指定した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);
※使用される場合は自己責任でお願いします。
サンプル
https://taitan916.info/sample/popad/
使い方
jQueryと一緒に読み込む。以下でURLと時間を指定する。
<script type="text/javascript" src="https://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にてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...
-
-
FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...
-
-
Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...
-
-
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...