웹사이트에 광고를 게재하는 대부분의 방법은 사용자가 자신의 페이지에서 많은 제3자 JavaScript 코드를 신뢰하도록 요구합니다

웹사이트에 광고를 게재하는 대부분의 방법은 사용자가 자신의 페이지에서 많은 제3자 JavaScript 코드를 신뢰하도록 요구합니다. 이 글에서는 그 반대로 작동하는 태그, 즉 작고 페이지 내부의 코드를 실행할 수 없는 태그를 소개합니다. 제가 직접 작업한 것이므로 열정적인 설명에 대해서는 비판적으로 받아들이시되, 아래 모든 주장은 브라우저에서 확인할 수 있습니다.

전체 통합 방식

<script async src="https://cdn.adpluga.com/v1/tag.js"
        data-adpluga-key="pk_test_kvhgusa3wauuklgogatyovhbohlpc"></script>

...

해당 키와 슬롯은 공개 데모용입니다: 테스트 광고를 제공하며, 비용이 청구되거나 어떠한 할당량에도 포함되지 않습니다. 이 두 줄을 HTML 파일에 붙여넣고 열어보세요. WordPress에서는 동일한 두 줄을 사용자 정의 HTML(Custom HTML) 블록에 넣으면 되고, Google Tag Manager에서는 사용자 정의 HTML 태그(Custom HTML tag)에 넣으면 됩니다.

1. 발견 (Discovery)

스크립트는 자체 <script> 요소에서 키를 읽어온 다음, data-adpluga-slot을 가진 모든 요소를 찾습니다. MutationObserver가 지속적으로 감시하여 React, Vue 또는 라우터 변경으로 나중에 렌더링된 슬롯도 아무것도 호출하지 않고 포착합니다. 제어가 필요하다면, window.AdPluga.refresh(el)로 슬롯을 재요청하고 window.AdPluga.destroy(el)로 슬롯을 제거할 수 있습니다.

2. 슬롯당 하나의 요청 (One request per slot)

각 슬롯은 에지 호스트(edge host)의 /v1/serve에 한 번 호출합니다. 응답에는 크리에이티브와 서명된 토큰(signed token)이 포함됩니다. 해당 공간에 광고주가 없더라도, 응답은 여전히 광고입니다: adPluga에서 제공하는 자체 광고를 표시하여 페이지가 빈 상자를 보여주는 일이 절대 없습니다.

3. 샌드박스 (The sandbox)

크리에이티브는 다음 속성을 가진 iframe 내에 렌더링됩니다:

sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"

여기에 allow-scripts나 allow-same-origin은 없습니다. 광고는 JavaScript를 실행할 수 없고, 사용자의 쿠키나 저장소에 접근할 수 없으며, DOM 내부로 침투할 수도 없습니다. 클릭을 통해서만 광고주의 페이지가 열릴 수는 있지만, 이는 사용자가 직접 클릭했기 때문입니다. `referrerpolicy=

트레이드오프는 크리에이티브가 JavaScript 방식으로 인터랙티브할 수 없다는 것입니다. 예를 들어, 캐러셀 광고(Carousel ads)는 CSS scroll-snap만으로 제작됩니다. 이로 인해 약 0.5KB의 비용이 발생했으며 태그를 4.4 KB gzipped 상태로 유지했습니다.

4. 노출된 것만 계산하기 (Counting only what was seen)

태그는 광고가 최소한 1초 동안 화면에 50% 이상 표시되었을 때만 노출(impression)로 보고합니다. 페이지 하단에서 아무도 스크롤하지 않은 광고는 본 것으로 보고되지 않습니다.

5. 테스트 및 실시간 (Test and live)

핵심 접두사(key prefix)가 모드를 결정합니다: pk_test_는 청구 없이 실제 테스트 크리에이티브를 제공하며, pk_live_는 실제이며 사이트가 먼저 인증되어야 합니다(DNS 레코드, meta 태그 또는 루트에 파일 필요).

계정 없이 사용해 보기 (Try it without an account)

playground에는 데모 키가 채워져 있습니다. Render를 누르고 네트워크 탭을 확인하세요: 서비스 호출(serve call) 한 번, iframe 하나, 그리고 광고가 보이는 시점에 추적 호출(tracking call)이 발생합니다.

위 HTML의 실행 가능한 사본은 github.com/adpluga/examples에 있습니다.