애드센스 광고, 티스토리에서 전면 광고(인터스티셜 광고) 적용하기

A man is in front of a computer monitor.

📌 티스토리(Tistory)에서도 전면 광고(인터스티셜 광고) 적용 가능할까요?

✅ 네, 티스토리에서도 전면 광고를 적용할 수 있습니다.
그러나, HTML/JavaScript 수정이 가능한 "스킨 편집" 기능을 이용해야 하며, 일부 기능은 제한될 수 있습니다.

✅ 1. 티스토리에서 전면 광고를 적용하는 방법

🔹 방법 1: HTML/JavaScript를 "스킨 편집"에서 추가하는 방법 (PC & 모바일 적용 가능)

📍 1) 티스토리 관리자에서 "HTML/CSS 편집" 페이지로 이동

티스토리 블로그 관리자 페이지 접속
"스킨" → "HTML 편집" 클릭
index.html 파일에서 <body> 태그 바로 아래에 광고 코드 삽입

📍 2) 전면 광고(인터스티셜 광고) HTML + JavaScript 코드 추가

<!-- 전면 광고 -->
<div id="interstitial-ad">
    <div id="ad-content">
        <p>이 광고는 5초 후 닫을 수 있습니다.</p>
        <button id="close-ad" style="display:none;">닫기</button>
    </div>
</div>

<style>
    /* 전면 광고 스타일 */
    #interstitial-ad {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
    }
    #ad-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
    }
    #close-ad {
        margin-top: 10px;
        padding: 10px 15px;
        background: red;
        color: white;
        border: none;
        cursor: pointer;
    }
</style>

<script>
    // 티스토리에서 전면 광고 실행
    window.onload = function() {
        document.getElementById("interstitial-ad").style.display = "block";
        setTimeout(function() {
            document.getElementById("close-ad").style.display = "block";
        }, 5000);
    };

    // 닫기 버튼 클릭 시 광고 숨김
    document.getElementById("close-ad").addEventListener("click", function() {
        document.getElementById("interstitial-ad").style.display = "none";
    });
</script>

✅ 이 코드의 작동 방식:

티스토리 블로그 방문 시, 자동으로 전면 광고가 실행됨.
5초 후 "닫기 버튼"이 활성화됨.
사용자가 닫기 버튼을 클릭하면 광고가 사라짐.
티스토리 모바일 & PC에서도 적용 가능.

✅ 2. 특정 페이지에서만 전면 광고 표시하기 (티스토리 버전)

✅ 전면 광고가 모든 페이지가 아니라, 특정 페이지에서만 나오게 하려면?

📍 예제: 특정 글(post)에서만 광고 표시 (/entry/글제목 URL 구조 활용)

window.onload = function() {
    if (window.location.pathname.includes("/entry/")) {
        document.getElementById("interstitial-ad").style.display = "block";
        setTimeout(function() {
            document.getElementById("close-ad").style.display = "block";
        }, 5000);
    }
};

✅ 이 코드의 특징:

/entry/ 가 포함된 URL(티스토리 개별 글)에서만 광고가 표시됨
블로그 메인 페이지에서는 광고가 뜨지 않음

✅ 3. 티스토리에서 Google AdSense 전면 광고 적용하는 방법

Google AdSense의 자동 광고(전면 광고)는 티스토리에서 기본 지원되지 않지만, HTML 코드에 직접 삽입하면 가능합니다.

📍 Google AdSense 광고 코드 추가 방법

Google AdSense 로그인 → 광고 → 자동 광고 설정
광고 코드 복사 (예제: AdSense 자동 광고 코드)

구글 애드센스에서 광고를 클릭합니다. 그 뒤에 위의 화면이 뜨면 "코드 가져오기"를 클릭하여

복사하기를 클릭한 후 티스토리에서 <head>뒤에 붙여넣기를 합니다.

스킨 편집을 클릭하면 아래와 같은 화면이 나옵니다.

html 편집을 클릭하여 <head> 뒤쪽[아래쪽]에 붙여넣기 하세요.

그 후에 반드시 적용을 클릭합니다.

티스토리 "HTML/CSS 편집" → <head> 또는 <body> 태그 안에 삽입
적용 후, Google이 자동으로 적절한 위치에 광고를 표시함

✅ Google AdSense의 자동 광고를 티스토리에 적용하면, 모바일에서는 자동으로 전면 광고가 표시될 수 있음

✅ 4. 티스토리에서 전면 광고 반복 노출 방지 (쿠키 활용)

✅ 사용자가 광고를 한 번 봤다면, 일정 시간 동안 다시 보이지 않게 설정 가능

📍 24시간 동안 광고 다시 표시 안 하기

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

window.onload = function() {
    if (!getCookie("seenAd")) {
        document.getElementById("interstitial-ad").style.display = "block";
        setTimeout(function() {
            document.getElementById("close-ad").style.display = "block";
        }, 5000);
        setCookie("seenAd", "true", 1); // 1일 동안 광고 다시 안 뜨게 설정
    }
};

✅ 이 코드의 특징:

사용자가 광고를 보면 seenAd라는 쿠키가 저장됨
24시간 동안 광고가 다시 표시되지 않음
24시간이 지나면 쿠키가 사라지고 광고가 다시 표시됨

✅ 5. 결론 (티스토리 전면 광고 적용 가능 여부)

✅ 티스토리에서도 HTML/CSS 편집을 통해 전면 광고 적용 가능
✅ PC & 모바일에서 동일하게 적용됨
✅ Google AdSense 자동 광고 코드 적용 가능하지만, 일부 제한이 있을 수 있음
✅ 쿠키 설정을 추가하면 사용자 경험을 해치지 않고 광고를 효과적으로 운영 가능

➡ 티스토리 블로그에서 전면 광고를 활용해 광고 수익을 최적화할 수 있습니다!

tsdddr