Next.js에서 애드센스 광고 단위 사용

개요

내 블로그는 tailwind-nextjs-starter-blog에서 만들어졌으며 on GitHub here에서 찾을 수 있습니다. 블로그를 매우 빠르게 시작할 수 있으며 잘 구성되어 있습니다.

Google 웹로그 분석과 함께 직접 제공되기는 했지만 애드센스에 대한 기존 인프라를 제공하지 않았기 때문에 작동하기 위해 겪은 시련과 고난을 문서화해야겠다고 생각했습니다.

해야 할 일

1. 사이트를 애드센스에 올바르게 연결하십시오.

코드를 받기 전에 사이트에서 애드센스를 사용할 수 있는지 확인해야 합니다. 헤더에 스크립트를 넣거나 헤드에 메타 태그를 추가해야 할 수도 있습니다. 사이트가 이를 통해 안내해야 합니다. 애드센스 대시보드의 '사이트' 메뉴에 사이트가 '준비됨'으로 표시될 때마다 설정된 것입니다.

2. 전체 애드센스 헤더

애드센스 대시보드에서 '광고'로 이동한 다음 '광고 단위별' 헤더를 누르세요. 원하는 것을 생성하면 코드가 제공됩니다. 다음과 같이 첫 번째 스크립트 태그를 헤더에 복사해야 합니다.

<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7827406820675555"
  crossorigin="anonymous"
></script>

crossorigin는 crossOrigin로 교체해야 할 가능성이 높습니다. 내 코드 편집기는 불행하게도 저장할 때 자동으로 모두 소문자로 다시 포맷하기로 결정했습니다.

3. 개별 광고 단위

광고 단위가 필요한 곳에 다음 코드를 삽입하세요.

<ins
  class="adsbygoogle"
  style="display:block; text-align:center;"
  data-ad-layout="in-article"
  data-ad-format="fluid"
  data-ad-client="ca-pub-ADSENSE_ID"
  data-ad-slot="SLOT_ID"
></ins>
<script>
  ;(adsbygoogle = window.adsbygoogle || []).push({})
</script>

스크립트 태그는 기본적으로 페이지에 광고 단위가 하나 더 있음을 애드센스에 알립니다. 애드센스는 이 모든 것에 대한 값을 제공하며 대부분 복사-붙여넣기입니다.

일반적인 문제

403 금지

내가 localhost에 있었기 때문에 이 오류가 발생했습니다. 애드센스는 업데이트 프로세스의 일부로 애드센스 계정에 추가해야 하는 전체 사이트 URL과 동일하지 않기 때문에 localhost에서 작동하지 않습니다. 사이트의 실제 라이브 버전에서는 이 오류가 발생하지 않아야 합니다.
push() missing an argument나 이와 유사한 것을 본다면 이것도 이것 때문이라고 생각합니다.

창 크기가 작동하지 않음

Google 애드센스는 어느 시점에서 완전한 반응형 광고로 전환되었으므로 컨테이너의 너비에 맞게 크기가 자동으로 조정됩니다. 컨테이너의 너비와 높이가 250px 이상인지 확인하세요.