画面全体にオーバーレイがかかって広告を閉じるまで抜けられないえげつないトラップを作った！

サイト閲覧中に画面全体に薄くオーバーレイがかかって、真ん中の広告の閉じるボタンを押すまで抜けられない、えげつないトラップを作りました。

海外のあやしい動画サイトとかでよく見ますよねこういうの。

サイトにアクセスしてから一定時間経つとこの処理が発動して、表示された広告を閉じるとオーバーレイが消え去って元通りになります。このとき閉じるボタンと間違って広告をクリックする人がいるので、そのおこぼれの誤クリックを狙うことができるのです。

以下WordPress(Simplicityのテーマ)に組み込むことを前提として、導入方法をお話しします。

手順①
ワードプレスの「function.php」に以下の関数を追記します。オーバーレイ広告貼り付けのためのショートコードを利用可能とする処理です。

//オーバーレイ広告処理
function super_overlay() {
  if (wp_is_mobile()){
    //モバイルの場合
$str = <<< EOM
<div class="super-overlay">
<div class="super-overlay-ad">
//★ここにモバイル時の広告タグを張る
</div>
</div>
EOM;
  }else{
    //PCの場合
$str = <<< EOM
<div class="super-overlay">
<div class="super-overlay-ad">
//★ここにＰＣ時の広告タグを張る
</div>
</div>
EOM;
  }
  return $str;
}
add_shortcode('super_overlay', 'super_overlay');

手順②
ワードプレスの「style.css」に以下を追記します。オーバーレイ広告のレイアウトを調整するものです。

.super-overlay{
  background-color:rgba(0,0,0,0.5);
  position:absolute;
  display: none;
  z-index: 997;
}
.super-overlay-ad{
  display: none;
  position:absolute;
  z-index: 998;
}

手順③
ワードプレスの「javascript.js」に以下を追記します。一定時間(5秒間)が経過するとオーバーレイ広告が出現する処理です。もし「javascript.js」がなかったら、自分でjsを追加してみてください。ようは下記のコードが読み込まれ、実行されればＯＫなのです。

//オーバーレイ広告処理
jQuery(window).load(function(){
  //class super-overlayの存在確認
  if (!jQuery(".super-overlay").length){
    return;
  }

  //5秒後に広告表示
  setTimeout(function(){
    var docW =  jQuery(document).width();
    var docH =  jQuery(document).height();
    var windowW =  jQuery(window).width();
    var windowH =  jQuery(window).height();

    //背面レイヤー展開
    jQuery(".super-overlay").show();
    jQuery(".super-overlay").offset({ top:0, left:0 });
    jQuery(".super-overlay").width(docW);
    jQuery(".super-overlay").height(docH);

    //広告位置セット
    jQuery(".super-overlay-ad").show();
    var adW = jQuery('.super-overlay-ad').width();
    var adH = jQuery('.super-overlay-ad').height();
    var SetTop = windowH/2 - adH/2;
    var SetLeft = windowW/2 - adW/2;
    jQuery(".super-overlay-ad").offset({ top:SetTop, left:SetLeft });

    //広告の<br>削除
    jQuery(".super-overlay-ad br").remove();

    //閉じるボタン生成
    jQuery.CloseBtn = jQuery("<div class='close-btn'>");
    jQuery.CloseBtn.text("close");
    var textLen = jQuery.CloseBtn.text().length;
    jQuery.CloseBtn.css({"width": textLen + "ex",
                         "height": 25,
                         "color": "#ffffff",
                         "background-color": "#000000",
                         "cursor": "pointer",
                         "position": "absolute",
                         "z-index": "999"});
    jQuery('.super-overlay-ad').append(jQuery.CloseBtn);
    jQuery.CloseBtn.css({ "top":0, "left":0 });

    //クリック時の広告消去処理
    jQuery('.close-btn').click(function(e) {
      jQuery(".super-overlay").hide();
      jQuery(".super-overlay-ad").hide();
      jQuery(".close-btn").hide();
    });
  },5000);
});

手順④
ワードプレスの記事本文に、ショートコード [super_overlay] を書き込みます。本文のどこでもいいのでこのショートコードを書き込んでおくと、そのページにオーバーレイ処理が発動します。

以上の手順で、サイトにオーバーレイ処理が働くはずです。

このオーバーレイ効果は非常にえげつないものなので、広告会社によっては使用ＮＧだと思います。なので、導入するときは広告の利用規約をよく読んでお使いください。バレると配信停止になっちゃうかもしれません・・。

ちなみにこの処理の動作確認は、埋め込み動画は「youtube」「xvideos」「fc2」、広告種類は「アイモバイル」「忍者アドマックス」、ブラウザは「Google Chrome」「iPhone safari」「Internet Explorer」でしか確認していません。

他の埋め込み動画や、他の広告を利用するともしかしたら動作不良になっちゃうかもしれません。特に上記以外の広告会社についてはなんだか自信がありません（広告によってかなりタグの構造が違うので）。

もし動作が変だったら直すので、教えてね・・。

※P.S.
PC版でこのオーバーレイが不要な場合（モバイルに対してだけ使う）は、手順①のコードを下記のようにします（else側を削除しています）

//オーバーレイ広告処理
function super_overlay() {
  if (wp_is_mobile()){
    //モバイルの場合
$str = <<< EOM
<div class="super-overlay">
<div class="super-overlay-ad">
//★ここにモバイル時の広告タグを張る
</div>
</div>
EOM;
  }else{
    //PCの場合
  }
  return $str;
}
add_shortcode('super_overlay', 'super_overlay');