아스트로에서 구글 애드 센스 코드를 추가하는 방법

Posted on

아스트로에서 구글 애드 센스 코드를 추가하는 방법에 대해 알아보았습니다. 사이트에 애드센스 광고를 추가하는 것은 매우 간단하지만 아스트로에서는 주의할 점이 있습니다.

애드 센스 코드를 넣을 때는 스크립트 태그에 is:inline 속성을 추가해야 합니다. 이 속성은 아스트로가 스크립트 태그를 번들링 하지 않고 그대로 두도록 하는 역할을 합니다. 만약 이 속성을 빼먹으면 광고가 나타나지 않거나 오류가 발생할 수 있습니다.

참고 : is:inline

참고 : 마크다운(.md, .mdx) 제외 “.astro” 만 해당

아스트로 애드센스

아스트로에서 애드센스 코드 추가는 매우 간단합니다. 스크립트 태그에 is:inline 만 추가해 주면 됩니다.
(예 : <script is:inline)

완성된 코드는 아래와 같습니다.

astro 
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script is:inline>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위와 같이 하면 아스트로 사이트에 애드 센스 코드를 쉽게 적용할 수 있습니다. 아스트로는 구글 애드 센스와 호환되도록 잘 설계되어 있으므로, 다른 프레임워크보다 훨씬 간편하게 광고를 표시할 수 있습니다.

참고 : 외부 자바스크립트(External)는 그대로 사용해도 잘 작동됩니다.