본문 바로가기
카테고리 없음

애드센스 광고: HTML 코드를 그대로 붙이면 되나요, 아니면 수정할 수 있나요?

by tsdddr 2025. 2. 16.
반응형
SMALL

A man is looking at an HTML code.

 

📌 HTML 코드를 그대로 붙이면 되나요, 아니면 수정할 수 있나요?

 

코드를 그대로 붙여도 작동하지만, 필요에 따라 수정할 수 있습니다.

  • 그대로 붙이면 기본적인 전면 광고 기능이 동작합니다.
  • 하지만 디자인, 광고 내용, 광고 표시 타이밍, 닫기 버튼 동작 등을 수정할 수 있습니다.

✅ 1. 수정 가능한 부분과 방법

🔹 1) 광고 내용 수정하기 (이미지, 텍스트, 동영상 등 추가)

📌 광고 텍스트를 바꾸거나, 배너 이미지 및 동영상 광고 추가 가능

 

예제: 광고 내용을 이미지 광고로 변경

 

<div id="interstitial-ad">
    <div id="ad-content">
        <p>이 광고는 5초 후 닫을 수 있습니다.</p>
        <img src="https://example.com/ad-banner.jpg" alt="광고 배너">
        <button id="close-ad" style="display:none;">닫기</button>
    </div>
</div>

 

  • 기존 텍스트 광고 대신 배너 이미지(img 태그) 추가
  • 이미지 파일 URL을 원하는 광고 배너 URL로 변경 가능

예제: 유튜브 광고 동영상 추가

 

html

 

<div id="interstitial-ad">
    <div id="ad-content">
        <p>광고 시청 후 닫을 수 있습니다.</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
        <button id="close-ad" style="display:none;">닫기</button>
    </div>
</div>

 

iframe 태그를 사용해 유튜브 동영상을 광고로 활용 가능

 

* iframe 태그를 사용해 유튜브 동영상을 웹사이트에 삽입할 수 있지만, 이를 구글 애드센스 광고로 활용하는 것은 불가능합니다. 애드센스 정책상 직접적인 광고 수익을 위해 iframe으로 동영상을 임베드하는 것은 허용되지 않으며, 유튜브 광고는 YouTube Partner Program(YPP)을 통해 수익화해야 합니다. 웹사이트에서 유튜브 영상을 활용하려면 공식 임베드 코드를 사용해야 하며, 동영상 내 광고는 유튜브 플랫폼에서 자동으로 처리됩니다.

 


🔹 2) 광고 표시 시간 수정하기 (5초 → 다른 시간으로 변경)

기본적으로 5초 후 닫기 버튼이 활성화되지만, 원하는 시간으로 변경 가능

 

📌 예제: 5초 → 3초로 변경

setTimeout(function() {
    document.getElementById("close-ad").style.display = "block";
}, 3000); // 3초 후 버튼 표시

 

📌 예제: 광고 자동 닫기 설정 (10초 후 자동 닫기)

setTimeout(function() {
    document.getElementById("interstitial-ad").style.display = "none";
}, 10000); // 10초 후 광고 자동 닫기
  • 위 코드를 추가하면 사용자가 닫기 버튼을 누르지 않아도 광고가 자동으로 닫힘

🔹 3) 광고 스타일 수정하기 (디자인 변경, 배경 색상 변경 등)

📌 기본 스타일에서 색상, 크기 등을 변경할 수 있음

 

예제: 배경 색상을 어두운 회색으로 변경

#interstitial-ad {
    background: rgba(50, 50, 50, 0.9); /* 더 어두운 회색 */
}

 

예제: 닫기 버튼 스타일 변경 (더 크게, 강조된 디자인으로 수정)

#close-ad {
    font-size: 20px; /* 버튼 크기 키우기 */
    background: blue; /* 배경색을 파란색으로 변경 */
    color: white;
    padding: 15px 20px;
}

🔹 4) 특정 페이지에서만 광고 띄우기

현재는 모든 페이지에서 광고가 뜨지만, 특정 페이지에서만 광고를 띄울 수도 있음

 

📌 예제: example.com/sale.html 페이지에서만 광고 띄우기

window.onload = function() {
    if (window.location.pathname === "/sale.html") {
        document.getElementById("interstitial-ad").style.display = "block";
        setTimeout(function() {
            document.getElementById("close-ad").style.display = "block";
        }, 5000);
    }
};
  • 특정 URL에서만 광고 표시
  • 다른 페이지에서는 광고가 뜨지 않음

🔹 5) 광고가 한 번만 표시되도록 수정 (쿠키 사용)

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

 

📌 예제: 쿠키를 사용해 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시간이 지나면 쿠키가 사라지고 광고가 다시 표시됨

✅ 3. 결론 (수정 가능 여부)

HTML 코드를 그대로 붙이면 기본적인 전면 광고가 작동하지만, 수정이 가능합니다.
디자인, 광고 표시 시간, 특정 페이지에서만 광고 표시, 쿠키를 활용한 반복 노출 방지 등 원하는 대로 변경 가능
Google AdSense 광고 코드를 삽입할 수도 있으며, 이미지, 동영상 광고도 추가 가능 

 

반응형