コピペで出来るスクロールやクリックで全画面広告表示!シンプルコード解説

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の考慮

広告があまりにも邪魔にならないように、設計と配置に注意が必要です。

法規制の遵守

広告表示に関する法規制やガイドラインを遵守しましょう。

効果測定と改善

広告の効果を定期的に分析し、改善のためのアクションを行います。

これでポスティシャル広告を実装できます。

ただし、ポスティシャル広告は強力なので使い方を間違えないように気をつけましょう!

YouTubeのチャンネル登録はこちら!!
ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
デプロイ太郎

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とX(旧Twitter)のフォローお願いします。デスマ上等!!

「コンテンツモンスターになり、モンスターコンテンツを生み出す!!」

デプロイ太郎のSNSを見てみる!!
JavaScript
デプロイ太郎のSNSを見てみる!!

コメント

タイトルとURLをコピーしました