PC와 모바일 인피드광고 서로 다르게 출력하는 방법 (with 애드센스)

애드센스는 구글의 광고 플랫폼으로, 웹사이트나 모바일 애플리케이션을 통해 수익을 창출할 수 있게 해줍니다. 특히 인피드광고는 사용자들에게 맞춤 광고를 제공하며, 웹사이트나 앱의 컨텐츠 플로우에 자연스럽게 통합될 수 있도록 해줍니다. 이번 포스팅에서는 애드센스를 사용하여 PC와 모바일 인피드광고를 서로 다르게 출력하는 방법에 대해 알아보겠습니다.

1. 광고 유형 설정

애드센스 계정에 로그인하고 "광고 단위" 탭으로 이동합니다. 거기에서 "광고 만들기" 버튼을 클릭하여 새로운 인피드광고 유닛을 만듭니다. 유닛 유형 설정에서 "인피드광고"를 선택합니다.

2. 광고 설정

인피드광고를 사용할 웹페이지 레이아웃에 맞게 광고 설정을 선택합니다. 텍스트, 이미지, 동영상 등의 광고 형식과 크기 등을 선택합니다.

3. 애드센스 코드 삽입

인피드광고를 사용할 웹페이지의 HTML 소스 코드에 애드센스 코드를 삽입합니다. 적절한 위치에 <ins> 태그를 추가하고, data-ad-format 속성을 사용하여 애드센스 코드의 형식을 설정합니다.

<div class="infeed-ad">
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-h3+9+r-3f+14"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="987654321"></ins>
</div>

4. 미디어 쿼리를 사용한 PC 및 모바일 스타일링

다음으로, 미디어 쿼리를 사용하여 PC와 모바일 웹사이트의 스타일링을 다르게 지정합니다. PC에서는 인피드광고를 좌우로 넓게 표출하고, 모바일에서는 세로 방향으로 적합하게 표출하도록 스타일을 설정합니다.

5. JS로 PC 및 모바일 광고 코드 출력 제어

마지막으로, JavaScript를 사용하여 PC와 모바일에서 광고 코드를 서로 다르게 출력합니다. 이를 위해 window.innerWidth를 사용하여 현재 뷰포트의 너비를 확인하고, 조건에 따라 애드센스 코드를 출력하거나 제거합니다.

<script>
  if (window.innerWidth > 768) {
    // PC에서는 광고 코드를 출력
    var script = document.createElement('script');
    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    document.getElementsByClassName('infeed-ad')[0].appendChild(script);
  } else {
    // 모바일에서는 광고 코드를 제거
    document.getElementsByClassName('infeed-ad')[0].innerHTML = '';
  }
</script>

이렇게 하면 PC와 모바일에서 서로 다른 스타일의 인피드광고가 정확히 표출됩니다. 광고 수익을 극대화하기 위해 사용자의 뷰포트 크기에 따라 최적화된 광고를 제공할 수 있습니다.

애드센스를 통해 PC와 모바일 인피드광고를 서로 다르게 출력하는 방법에 대해 소개했습니다. 이를 통해 사용자 경험을 향상시키고 웹사이트나 앱에서 더 많은 수익을 창출할 수 있습니다.

yynt

PC와 모바일 인피드광고 서로 다르게 출력하는 방법 (with 애드센스)