ボタン・広告

強制的にクリックさせる透明な全画面広告

強制的にクリックさせる透明な全画面広告の作り方

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画面全体に見えないリンクが固定表示され続ける、最近一部で流行りの広告です。クリックするまで広告リンクを画面に貼り続け、その間は他のものをクリックできなくするという仕組みになっています。

アクセシビリティを損なうため、許可している広告主は稀です。使用は自己責任でお願いします。

CSSの解説

  • 全画面広告用のdiv要素を作成して、その中に広告タグaを入れる
  • 親要素divを画面いっぱいまで広げる
    • position: fixedで画面固定
    • width: 100vwheight: 100vhでフルスクリーンサイズに
    • z-index: 999で最前面へ
    • backgroundは指定しない(透明)
  • リンクaを親要素いっぱいに広げる
    • display: blockでブロック要素に
    • position: absolutewidth: 100%height: 100%で親要素と同じサイズに(フルスクリーン)
  • jQueryを使ってクリック後に.clickedクラスを付与
  • .clickedを付与されたらdisplay: noneで削除する

div内に広告タグ (テキスト・画像抜き) を入れれば、そのまま使えるようになっています。

ただし、リンク先は必ず新しいタブで開くようにしましょう。
同一タブで開く → ブラウザバック だと広告しかクリックできないループに入ります。

応用CSS

ユーザビリティを考慮するか、クリック率を考慮するかで改造する部分も異なってきます。

とにかくクリックさせたいなら、aタグにcursol: defaultを指定することでカーソルを矢印にして、リンクがあることを悟られないようにするなどの工夫もできますね。(悪魔的だけど実在します)

一定時間後に発生

現状一番よく使われているタイプ。広告を踏む前にしばらくサイトを閲覧してもらい、離脱を少しでも防ごうというものです。

jQueryによって広告にクラスを付与・削除して、displayを切り替えています。

  • 最初はdisplay: none
  • 一定時間後(サンプルは5秒後)に .active を付与してdisplay: blockに変更
  • クリックされたら .active を取り除きdisplay: noneに戻る

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.