아스트로에서 구글 애드 센스 코드를 추가하는 방법에 대해 알아보았습니다. 사이트에 애드센스 광고를 추가하는 것은 매우 간단하지만 아스트로에서는 주의할 점이 있습니다.
애드 센스 코드를 넣을 때는 스크립트 태그에 is:inline 속성을 추가해야 합니다. 이 속성은 아스트로가 스크립트 태그를 번들링 하지 않고 그대로 두도록 하는 역할을 합니다. 만약 이 속성을 빼먹으면 광고가 나타나지 않거나 오류가 발생할 수 있습니다.
참고 : is:inline
참고 : 마크다운(.md, .mdx) 제외 “.astro” 만 해당
아스트로 애드센스
아스트로에서 애드센스 코드 추가는 매우 간단합니다. 스크립트 태그에 is:inline 만 추가해 주면 됩니다.
(예 : <script is:inline)
완성된 코드는 아래와 같습니다.
<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)는 그대로 사용해도 잘 작동됩니다.