google Adsense 광고 삽입 이슈

[jinsujj]

블로그 포스팅 로딩되는 과정에서, 무규칙 적으로 adSense 광고가 정상적으로 로드되어 보일때가 있고 에러가 발생할때가 존재함.

• 이전 asp.net SSR 렌더링으로 처리할 때는 발생하지 않았음
• React 기반 CSR 로 변경 후, 페이지 로드 관련해서 아래 에러가 발생

adsbygoogle.js?client=ca-pub-2309486098831986:123 Error: no_ins
    at adsbygoogle.js?client=ca-pub-2309486098831986:228:104
    at n.ra (adsbygoogle.js?client=ca-pub-2309486098831986:123:797)
    at dk (adsbygoogle.js?client=ca-pub-2309486098831986:128:1037)
    at yp (adsbygoogle.js?client=ca-pub-2309486098831986:222:55)
    at adsbygoogle.js?client=ca-pub-2309486098831986:222:113
    at adsbygoogle.js?client=ca-pub-2309486098831986:124:111
    at n.ra (adsbygoogle.js?client=ca-pub-2309486098831986:123:797)
    at adsbygoogle.js?client=ca-pub-2309486098831986:124:86

• _document.tsx 파일에서 해당 스크립트 가져올 때 'async' 옵션을 'defer' 옵션으로 변경 후 정상 작동 확인

  {/* google Adsense */}
        <script
          defer
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2309486098831986"
        />

defer 브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백 그라운드' 에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됩니다.

• 지연 스크립트는 페이지 생성을 절대 막지 않습니다.
• 지연 스크립트는 DOM 이 준비된 후에 실행되긴 하지만 DOMContentLoaded 이벤트 발생 전에 실행됩니다

async async 속성이 붙은 스크립트(이하 async 스크립트 또는 비동기 스크립트)는 페이지와 완전히 독립적으로 동작합니다.

• async 스크립트는 defer 스크립트와 마찬가지로 백그라운드에서 다운로드 됩니다. 따라서 HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐트를 처리, 출력합니다(하지만 async 스크립트 실행 줄에는 HTMl 파싱이 멈춥니다)
• DOMContentLoaded 이벤트와 async 스크립트는 서로를 기다리지 않습니다
• • 페이지 구성이 끝난 후에, async 스크립트 다운로딩이 끝난 경우, DOMContentLoaded 는 async 스크립트 실행 전에 발생할 수 있습니다.
• • async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 캐싱처리 된 경우, DOMContentLoaded 는 async 스크립트 실행 후에 발생할 수도 있습니다
• 다른 스크립트들은 async 스크립트를 기다리지 않습니다. async 스크립트 역시 다른 스크립들을 기다리지 않습니다

https://ko.javascript.info/script-async-defer

[jinsujj]

해당 작업 처리 후, 오류 발생 없음 확인.