본문 바로가기
반응형

인피드 광고란 구글 애드센스에서 제공하는 광고의 한 형태로 리스트 형식의 컨텐츠의 중간 중간에 광고를 넣어서 보여주는 광고입니다. T스킨BASIC의 리스트 화면에도 간편하게 광고를 넣을 수 있게 구현해 놨습니다.

적용된 모습

애드센스 인피드광고

인피드 광고 신청하기

애드센스 인피드광고 신청화면
먼저 구글에서 인피드 광고를 신청해야 합니다. 신청하는 방법은 아래의 포스트를 참고하세요.

티스토리에 애드센스 인피드 광고 슬기롭게 적용하는 방법 바로가기

인피드 광고 적용하기

인피드 광고를 신청하면 아래와 같은 코드를 획득하게 됩니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"

     data-ad-layout-key="<<나만의 코드>>"
     data-ad-client="<<나만의 코드>>"
     data-ad-slot="<<나만의 코드>>"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

여기서 중요한 코드는 3개입니다.

  • data-ad-client="<<나만의 코드>>"
  • data-ad-slot="<<나만의 코드>>"
  • data-ad-layout-key="<<나만의 코드>>"

티스토리에 적용하기

티스토리의 관리자화면으로 이동합니다.

  1. 좌측 메뉴에서 꾸미기 메뉴를 선택합니다.
  2. 스킨편집 메뉴를 선택합니다.


스킨 편집의 우측 설정메뉴의 중간 정도 이동합니다.

  1. 애드센스 공통 clientdata-ad-clientt의 값을 입력합니다. (같은 애드센스 사용자의 client번호는 모두 동일합니다.)
  2. 애드센스 인피드광고 slot 번호data-ad-slot의 값을 입력합니다.
  3. 애드센스 인피드광고 layout_keydata-ad-layout-key의 값을 입력합니다.
  4. 인피드 Repeat Count는 반복 주기를 설정할 수 있습니다. 4는 4개의 리스트 후에 광고 1개가 나오게 됩니다.

애드센스 인피드광고 옵션 란에 값이 있을 경우는 반영이 되고 값을 입력하지 않은 경우는 비활성화되어 반영이 되지 않습니다.

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~