Desktop AMP 버전에 Adsense 적용하기

AMP(Accelerated Mobile Pages) 프로젝트는 구글에서 지원하며 웹사이트 성능을 향상시키기 위한 프로젝트입니다. 그렇기 때문에 매우 제한적이라서, 일부 사이트는 적용하지 못할 수도 있습니다.

AMP는 특히 모바일을 이용하는 사용자를 타겟으로 하지만, Desktop을 위한 사이트에도 적용할 수 있습니다.

AMP가 매우 제한적이지만, 다행이 Adsense는 제공합니다. 기존 코드와 다르게 <amp-ad />라는 코드를 사용해야 합니다. 자세한 설정 방법은 Amp-ad를 참고하시면됩니다.

이 글에서는 Desktop에 <amp-ad/>를 적용하는 것의 어려움에 대해서 이야기하려고 합니다.

AMP에 Adsense 적용하기

AMP의 adsense는 반응형으로 설정하기가 어렵습니다. 그렇기 때문에 미리 보여줄 크기를 설정해야 합니다.

Adsense 사이트에서 광고를 만들면 다음과 같이 AMP를 위한 코드가 제공됩니다.

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxxxx"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

여기서 width="100vw"로 설정되었기 때문에 전체 너비 크기의 광고가 보여집니다. 100vw를 기본으로 설정되어있는 것은 모바일은 폭이 좁기 때문에 전체를 모두 사용하기 때문입니다.

이런 코드는 반응형이 아니고, 광고를 전체 크기로 보여줄 뿐입니다. 모바일에서는 자연스럽게 보이지만, Desktop에 적용하면 매우 이상합니다.

Desktop에 AMP Adsense 적용하기

Desktop에 AMP Adsense를 적용하려면 광고의 크기를 변경해주어야 합니다.

위 코드를 아래와 같이 변경해보세요. height를 설정하고 layout을 fixed-height로 설정하면 width는 설정하지 않아도 됩니다.

<amp-ad
    layout="fixed-height"
    height="90"
    type="adsense"
    data-ad-client="ca-pub-xxxxxxx"
    data-ad-slot="xxxxxxx">
  <div overflow=""></div>
</amp-ad>

height를 280으로 설정하면 다른 형태의 광고가 보여집니다.

<amp-ad
    layout="fixed-height"
    height="280"
    type="adsense"
    data-ad-client="ca-pub-xxxxxxx"
    data-ad-slot="xxxxxxx">
  <div overflow=""></div>
</amp-ad>

width를 설정하지 않아도 되는 이유는 광고 단위의 크기가 이미 정해져있기 때문에 설정된 높이와 동일한 광고의 width가 자동으로 정해지기 때문입니다. 이런 광고의 종류는 Google Support에서 확인할 수 있습니다.

만약 광고 크기를 설정했는데 보이지 않는다면, 그 크기의 광고가 없기 때문일 수 있습니다.(저의 추측입니다) 그렇기 때문에 개수가 많은 광고의 크기로 설정해야 좋을 것 같습니다.

참고

• sangams
• Google support
• AMP Dev