구현 가이드

Ad Manager 배너

Display ad slots (Google Publisher Tag)

Google 게시자 태그로 만드는 Ad Manager의 기본 광고 공간으로, 고정 크기, 여러 크기, 반응형 중에서 선택할 수 있습니다.

Ad Manager
모바일 및 데스크톱

형식 알아보기 내 사이트에서 확인하기

데스크톱

휴대폰

1분 만에 이해하기

Ad Manager 배너란?

Ad Manager 배너는 페이지 안에 고정되어 있는 직사각형 광고입니다. 글 중간, 상단 또는 옆에 있습니다. 학교 벽에 걸린 포스터를 떠올려 보세요. 정해진 위치와 정해진 크기가 있고 지나가는 누구나 볼 수 있습니다. Ad Manager에서는 이렇게 정해 둔 자리를 슬롯(slot)이라고 하는데, 광고 공간을 뜻하는 영어 단어일 뿐입니다. 이 공간에 광고를 요청하고 표시하는 것은 사이트에 넣는 Google 코드 라이브러리인 GPT, 즉 Google 게시자 태그입니다.

작동 방식은 이렇습니다. 먼저 GPT에 사용할 Ad Manager 광고 단위, 거기에 들어갈 수 있는 크기, 페이지의 어느 상자에 표시할지를 알려 줍니다. 이 상자는 div이며, 고유한 이름을 가진 HTML 조각입니다. 그다음 GPT가 광고를 요청해 상자 안에 그립니다. 상자 이름은 두 곳에서 같아야 합니다. 다르면 광고가 나타나지 않습니다. 광고가 나타나지 않을 때 확인하라고 Google도 직접 안내합니다.

크기는 세 가지 방식으로 정할 수 있습니다. 고정 크기에서는 300x250처럼 그 크기의 광고만 들어옵니다. 여러 크기에서는 여러 크기를 나열하고 Ad Manager가 그중 아무거나 선택할 수 있습니다. 반응형에서는 크기 매핑이라는 표를 만들어 화면 너비별로 유효한 크기를 지정합니다. 큰 화면용 목록과 작은 화면용 목록이 따로 있는 식입니다. 페이지 너비만큼 늘어나는 유동 크기도 있지만, Google은 지금은 네이티브 광고에만 쓴다고 설명합니다.

Google은 사이트가 통제권을 갖도록 이런 방식을 만들었습니다. 각 광고가 어디에 있을지, 어떤 크기를 받을지, 언제 로드될지를 직접 정합니다. 문서에는 페이지 끝의 광고가 방문자가 가까이 갈 때만 로드되게 하는 방법이 나오는데, 이를 지연 로딩이라고 합니다. 또 시간과 선언 규칙에 따라 페이지 전체를 새로고침하지 않고 광고를 새로고침하는 방법도 설명합니다. 이미 Ad Manager 계정이 있고 각 공간의 위치와 크기를 신중하게 정하고 싶을 때 배너를 사용할 만합니다.

단계별 설명

구현 방법

Ad Manager에서 태그 생성Ad Manager에서 인벤토리, 광고 단위를 클릭하세요. 광고 단위를 열고 태그 탭으로 이동해 Google 게시자 태그(GPT)를 선택한 다음 계속을 클릭합니다. 나머지 항목을 선택하고 태그 결과에서 태그를 복사하세요.
head에서 GPT 로드페이지의 head 부분에 GPT 스크립트를 넣으세요. 이 스크립트가 Google의 광고 도구를 사이트로 가져옵니다.
슬롯 정의역시 head에서 GPT에 광고 단위 경로, 허용되는 크기, div 이름을 알려 주세요. 반응형 슬롯을 원하면 크기 매핑을 추가하세요. 마지막에 광고 서비스를 활성화합니다.
공간이 예약된 div 만들기body에 정의에서 사용한 이름과 같은 div를 만드세요. 광고가 도착할 때 화면이 튀지 않도록 가장 큰 광고를 기준으로 CSS에서 높이와 너비를 지정하세요.
광고 요청div 바로 뒤에서 div 이름으로 표시 호출을 하세요. 자체 인벤토리의 광고를 표시하려면 상태가 준비됨인 활성 광고 항목이 있어야 합니다.
지연 로딩 및 새로고침원하면 페이지 끝의 공간에 지연 로딩을 켜세요. 광고를 새로고침한다면 Ad Manager의 인벤토리, 인벤토리 규칙, 게시자 선언에서 이를 선언하고 페이지에도 같은 규칙을 사용하세요.

구현 예시

코드와 화면에 보이는 모습

GPT와 슬롯 정의는 head에, 표시 호출이 있는 div는 배너가 나타날 위치의 body에 넣습니다.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>

데스크톱선택한 위치에 고정된 직사각형으로 표시됩니다. 예를 들어 728x90이나 300x250입니다. 텍스트의 다른 부분처럼 페이지와 함께 스크롤됩니다.

모바일화면에 맞는 크기, 예를 들어 300x250으로 콘텐츠 중간에 표시됩니다. 크기 매핑을 사용하면 모바일에는 작은 화면용으로 허용한 크기만 전달됩니다.

Google의 안내

허용 및 금지 사항

허용

고정 크기, 여러 크기 목록, 또는 화면 너비별 크기 매핑 정의하기.
나타날 수 있는 가장 큰 크기의 공간을 CSS에서 미리 확보하세요. Google은 이것이 페이지가 튀는 것을 막는 가장 효과적인 방법이라고 설명합니다.
바로 보이는 공간은 우선순위를 갖도록 head에서 정의하기.
방문자가 스크롤해야 보이는 스크롤 없이 보이는 영역 아래의 공간에는 지연 로딩 사용하기.
새로고침이 Ad Manager에 선언되어 있다면 페이지 전체를 다시 로드하는 대신 GPT의 새로고침 함수로 광고 새로고침하기.
방문자 동작에 의한 새로고침을 최소 간격 없이 하기. Google은 시간이나 이벤트에 의한 새로고침에만 최소 간격을 요구합니다.

허용 안 됨

슬롯을 정의할 때 전달한 이름과 다른 이름을 div에 사용하기.
Ad Manager에 선언하지 않거나 잘못 선언하고 광고를 새로고침하기. Google은 이를 위반으로 봅니다.
웹에서 30초보다 짧은 간격으로 시간이나 이벤트에 의한 새로고침하기.
새로고침 전에 공간을 비우기. 새로고침이 이미 광고를 바꾸므로, 비우면 공간이 더 오래 비어 있을 뿐입니다.
방문자가 전혀 보지 못하는 공간 새로고침하기. Google은 이렇게 하면 조회 가능성 비율이 크게 떨어질 수 있다고 경고합니다.
크기를 예약하지 않은 div를 두기. 광고가 도착할 때 콘텐츠가 튑니다.

팁

올바르게 하는 방법

여러 크기가 가능한 슬롯에서는 Google이 div의 높이를 가장 큰 광고의 높이로, 너비를 가장 넓은 광고의 너비로 설정하라고 요구합니다.
크기 매핑에서 GPT는 먼저 너비, 그다음 높이를 보고 일치하는 가장 큰 화면 범위를 선택합니다. 매핑에 오류가 있으면 슬롯 정의의 크기로 돌아갑니다.
공식 지연 로딩 예시에서 Google은 화면 5개 거리에서 광고를 가져오고 화면 2개 거리에서 그리며, 모바일에서는 이 값을 두 배로 합니다.
광고를 본 뒤에만 새로고침하려면 문서는 impressionViewable이라는 노출 확인 이벤트를 기다릴 것을 권장합니다.

주의

흔한 오류

div 이름 불일치

슬롯 정의와 표시에서 전달하는 이름은 div의 이름과 같아야 합니다. 같지 않으면 광고가 그냥 나타나지 않습니다.

광고와 크기가 다른 div

Google은 div의 너비, 높이, 이름이 태그에 있는 내용과 같아야 한다고 요구합니다. 맞지 않으면 광고가 나타나지 않을 수 있습니다.

준비된 광고 항목 없음

상태가 준비인 활성 광고 항목이 없으면 코드가 올바르더라도 내 인벤토리에는 광고가 표시되지 않습니다.

모바일을 비우는 매핑

Google 예시에서는 640x480보다 작은 화면에 빈 목록이 전달되어 광고가 표시되지 않습니다. 조정하지 않고 그대로 복사하면 세로로 든 휴대폰에서 배너가 나오지 않을 수 있습니다.

자주 묻는 질문

여러 크기와 반응형은 무엇이 다른가요?

여러 크기에서는 목록의 어떤 크기든 어떤 화면에서나 나타날 수 있습니다. 반응형에서는 크기 매핑이 화면 너비별로 유효한 크기를 지정합니다.

일반 배너에 유동 크기를 사용할 수 있나요?

Google은 현재 Ad Manager가 지원하는 유동 유형은 네이티브 광고뿐이라고 설명합니다. 일반 배너에는 고정 크기, 여러 크기, 또는 매핑을 사용하세요.

광고를 새로고침하는 최소 시간은 얼마인가요?

웹에서 시간 또는 이벤트에 의한 새로고침은 최소 30초가 필요합니다. 방문자 동작에 의한 새로고침에는 최소 시간이 없습니다. 어느 경우든 인벤토리 규칙에 선언되어 있어야 합니다.

지연 로딩을 쓸 만한가요?

Google은 스크롤 없이 보이는 영역 아래의 공간을 나중에 로드하라고 권장하며, 리소스가 적은 모바일에서 특히 도움이 됩니다. 상단 공간이 우선순위를 가져야 합니다.

자료실

Google 공식 출처

이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.

내 사이트가 이 형식을 올바르게 쓰고 있나요?

감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.

감사 실행하기