今日は、ウェブサイトに訪れた人々の目を引く全画面広告の設置方法を簡単に解説します。
コピペ一つで、簡単にできるので活用してください。
広告の動作確認はこちら
HTML（共有）
<div id="ad-container" class="ad-container">
<div class="ad-content">
<span class="close-btn" id="close-btn">×</span>
<img src="https://itkagyo.com/wp-content/uploads/2023/06/test-banner.png" alt="広告バナー">
</div>
</div>CSS（共通）
.ad-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.ad-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
text-align: center;
}
.close-btn {
position: absolute;
top: -10px;
right: -10px;
font-size: 24px;
cursor: pointer;
background-color: #000;
color: #FFF;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}JavaScript（ポスティシャル広告）
ポスティシャル広告は、ユーザーのアクションがあった場合に表示される広告です。
今回はスクロールしたら表示される広告です。
let adClosed = false; // 広告が閉じられたかどうかを追跡する変数
window.addEventListener('scroll', function() {
if (!adClosed && window.scrollY > 300) { // adClosedがfalseの場合のみ広告を表示
showAd();
}
});
document.getElementById('close-btn').addEventListener('click', function() {
closeAd();
});
function showAd() {
document.getElementById('ad-container').style.display = 'block';
}
function closeAd() {
document.getElementById('ad-container').style.display = 'none';
adClosed = true; // 広告が閉じられたので、adClosedをtrueに設定
}JavaScript（プレスティシャル広告）
インタースティシャル広告の一形態で、コンテンツが表示される前に表示される広告です。
window.addEventListener('load', function() {
showAd();
});
document.getElementById('close-btn').addEventListener('click', function() {
closeAd();
});
function showAd() {
document.getElementById('ad-container').style.display = 'block';
}
function closeAd() {
document.getElementById('ad-container').style.display = 'none';
}
JavaScript（インタースティシャル広告）
インタースティシャル広告は、ユーザーが異なるページやアプリの異なるセクションに移動する際に全画面で表示される広告です。今回はボタンをクリックして別ページに遷移するタイミングで表示される広告のコードになります。
document.getElementById('show-ad-button').addEventListener('click', function() {
showAd();
});
document.getElementById('close-btn').addEventListener('click', function() {
closeAd();
});
function showAd() {
document.getElementById('ad-container').style.display = 'block';
}
function closeAd() {
document.getElementById('ad-container').style.display = 'none';
}インタースティシャル広告を表示するためのボタンのHTML
<button id="show-ad-button">広告を表示</button>広告の目的に応じて、Javascriptのコードを変更してください。
使用方法
- ターゲット設定
広告を表示したいユーザーグループを明確に定義する。 - 広告コンテンツの作成
魅力的で関連性の高い広告コンテンツをデザインする。 - 表示タイミングの設定
コンテンツが表示される前に広告が表示されるようにタイミングを設定する。
使用例
- 新製品のプロモーション
新しい製品やサービスをユーザーに紹介するために使用する。 - 特別なオファーやセールの告知
期間限定のセールや特別なオファーを効果的にアピールする。 - 広告収益を上げたい
ポスティシャル広告はサイトに来たユーザーに100％表示され、クリック率も高い。
注意事項
- UXの考慮
広告があまりにも邪魔にならないように、設計と配置に注意が必要です。 - 法規制の遵守
広告表示に関する法規制やガイドラインを遵守しましょう。 - 効果測定と改善
広告の効果を定期的に分析し、改善のためのアクションを行います。
これでポスティシャル広告を実装できます。
ただし、ポスティシャル広告は強力なので使い方を間違えないように気をつけましょう！
コメント