워크스페이스 열기

구현 가이드

사이드 레일 광고

Side rail ads

와이드 화면 컴퓨터에서 콘텐츠 옆 빈 공간의 왼쪽 또는 오른쪽에 고정되어 표시되는 광고입니다.

  • AdSense
  • Ad Manager
  • 데스크톱 전용
데스크톱
휴대폰

1분 만에 이해하기

사이드 레일 광고란?

사이드 레일 광고는 화면의 왼쪽이나 오른쪽, 즉 글 옆에 남는 빈 공간에 붙어서 표시됩니다. 옆 벽에 게시판이 걸려 있는 교실을 떠올려 보세요. 학생들은 앞의 칠판을 보고, 게시판은 방해되지 않게 그 자리에 있습니다. 사이드 레일이 바로 그 게시판입니다. 페이지를 스크롤해도 광고는 같은 자리에 머뭅니다.

사이드 레일은 컴퓨터처럼 넓은 화면을 위해 만들어졌습니다. 많은 사이트가 글을 가운데에 두고 양옆에 빈 공간이 있는데, 사이드 레일은 콘텐츠를 밀거나 가리지 않고 이 공간을 활용합니다. AdSense에서는 자동 광고의 오버레이 형식 그룹에 속하며 이름은 사이드 레일 광고입니다. 클릭 한 번으로 켜고, 왼쪽과 오른쪽, 왼쪽만, 오른쪽만 중에서 선택할 수 있습니다.

Ad Manager에서는 광고를 요청하는 Google 코드인 GPT(Google 게시자 태그)가 사이드 레일을 표시합니다. 광고 공간인 슬롯을 왼쪽 또는 오른쪽 사이드 레일 유형으로 만듭니다. GPT가 광고 상자를 직접 만들어 콘텐츠에서 5~25픽셀 떨어진 곳에 배치합니다. 창이 작아져서 공간이 사라지면 광고는 공간이 다시 생길 때까지 숨겨집니다.

큰 화면에서 사이트 양옆에 여유 공간이 충분할 때 효과적입니다. GPT는 최소 1200x650픽셀의 화면과, 콘텐츠 옆에 최소 120x500픽셀의 빈 공간을 요구합니다. 레이아웃이 화면 전체를 가득 채우면 공간이 남지 않아 광고가 표시되지 않습니다.

단계별 설명

구현 방법

  1. 모든 페이지에 코드 넣기AdSense 코드가 모든 페이지에 있어야 합니다. 활성화한 후 광고가 표시되기까지 최대 한 시간이 걸릴 수 있습니다.
  2. AdSense에서 켜기광고를 클릭한 다음 사이트 옆의 수정을 클릭하세요. 자동 광고를 켜고 오버레이 형식에서 사이드 레일 광고를 선택합니다. 사이트에 적용을 클릭하고 지금 적용 또는 먼저 실험 실행을 선택하세요.
  3. 위치 선택고급 설정의 사이드 레일 광고 위치 선택에서 왼쪽 및 오른쪽, 왼쪽만, 오른쪽만 중 하나를 고르세요.
  4. Ad Manager에서는 head에 슬롯 만들기GPT에서 왼쪽 사이드 레일과 오른쪽 사이드 레일 유형의 아웃오브페이지 슬롯을 정의하세요. 사용하기 전에 각 슬롯이 비어 있지 않은지 확인하세요.
  5. 올바른 크기 사용예약 광고와 프로그래매틱 광고에서 컴퓨터용 사이드 레일 크기는 180x500, 160x600, 120x600입니다.
  6. 데모로 테스트예시에 나온 데모 코드를 페이지 주소 끝에 추가하면 코드를 바꾸지 않고도 테스트용 사이드 레일을 볼 수 있습니다.

구현 예시

코드와 화면에 보이는 모습

AdSense 속성은 보호할 페이지 영역을 감싸는 요소에 넣고, GPT 블록은 Ad Manager 사용자의 head에 넣습니다.
<!-- AdSense: parte da página onde a barra lateral não deve sobrepor -->
<div google-side-rail-overlap="false">
  ... conteúdo ...
</div>

<!-- Ad Manager (GPT), 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(() => {
    const leftSideRail = googletag.defineOutOfPageSlot(
      "/1234567/exemplo",
      googletag.enums.OutOfPageFormat.LEFT_SIDE_RAIL,
    );
    const rightSideRail = googletag.defineOutOfPageSlot(
      "/1234567/exemplo",
      googletag.enums.OutOfPageFormat.RIGHT_SIDE_RAIL,
    );
    // Volta null se a página ou o aparelho não aceitar barra lateral
    if (leftSideRail) leftSideRail.addService(googletag.pubads());
    if (rightSideRail) rightSideRail.addService(googletag.pubads());
    googletag.enableServices();
    if (leftSideRail) googletag.display(leftSideRail);
    if (rightSideRail) googletag.display(rightSideRail);
  });
</script>

<!-- Teste: acrescente no fim do endereço da página -->
<!-- #gamLeftSideRailDemo ou #gamRightSideRailDemo -->
데스크톱컴퓨터에서는 광고가 콘텐츠 옆의 고정된 열에 왼쪽, 오른쪽 또는 양쪽에 나타나며, 방문자가 페이지를 스크롤하는 동안에도 계속 보입니다.
모바일모바일에는 없습니다.

Google의 안내

허용 및 금지 사항

허용

  • AdSense에서 왼쪽 및 오른쪽, 왼쪽만, 오른쪽만 중에서 선택하기.
  • 공식 속성으로 페이지의 일부를 보호해서 사이드 레일이 그 영역 위에 표시되지 않게 하기.
  • 트래픽의 50%로 최대 90일간 실험하여 먼저 테스트하기.
  • Ad Manager에서 180x500, 160x600, 120x600 크기로 사이드 레일을 예약 광고와 프로그래매틱으로 판매하기.
  • AdSense에서 광고 형식을 사이드 레일 광고로 필터링한 맞춤 보고서로 성과를 측정하기.

허용 안 됨

  • 사이드 레일이 나오길 원하지 않는 페이지에서는 요청하지 마세요.
  • GPT를 iframe 안에서 실행하지 마세요. 사이드 레일은 메인 창의 GPT가 필요합니다.
  • 이 광고를 원한다면 양옆 공간을 다른 요소로 모두 채우지 마세요. 최소 120x500픽셀의 빈 공간이 없으면 광고가 표시되지 않습니다.
  • 링크, 메뉴, 다운로드 버튼을 광고에 붙여 두지 마세요. Google은 실수로 클릭하게 될 수 있다고 경고합니다.
  • Google이 허용한 수정 외에는 AdSense 코드를 변경하지 말고, 광고 클릭을 유도하지 마세요.

팁

올바르게 하는 방법

주의

흔한 오류

작은 화면에서 테스트하기

GPT는 최소 1200x650픽셀의 화면을 요구합니다. 더 작은 창에서는 광고가 표시되지 않습니다.

가장자리까지 꽉 찬 레이아웃

콘텐츠가 전체 폭을 차지하면 120x500픽셀의 빈 공간이 남지 않아 사이드 레일이 들어갈 곳이 없습니다.

슬롯이 비어서 반환되었는지 확인하지 않음

페이지나 기기가 사이드 레일을 지원하지 않으면 GPT가 null을 반환합니다. 슬롯을 사용하기 전에 코드에서 이를 확인해야 합니다.

일부 페이지에만 코드 넣기

AdSense에서는 자동 광고가 작동하려면 코드가 모든 페이지에 있어야 합니다.

자주 묻는 질문

사이드 레일은 모바일에 나타나나요?

아니요. AdSense에서는 컴퓨터 전용이고, Ad Manager에서도 넓은 화면이 필요한 컴퓨터용 형식입니다.

GPT에서 div를 따로 만들어야 하나요?

아니요. 사이드 레일이 자체 상자를 만들고 콘텐츠와 최대한 가까운 곳에 배치합니다.

한쪽만 사용할 수 있나요?

네. AdSense에는 왼쪽만, 오른쪽만 옵션이 있고, GPT에서는 원하는 쪽의 슬롯만 정의하면 됩니다.

광고와 콘텐츠 사이의 거리는 얼마인가요?

Ad Manager에서 슬롯은 메인 콘텐츠에서 5~25픽셀 떨어진 곳에 배치됩니다.

자료실

Google 공식 출처

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

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

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

감사 실행하기