勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

タブアンダー広告をjQueryで再現する方法

   2024/01/13  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);

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

 

サンプル

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

  関連記事

jQueryで後から追加された要素にイベントを設定
jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作成する方法

オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

簡単にtable内をソート
簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...