아스트로(Astro) 구글 애널리틱스를 추가하는 2가지 방법을 소개합니다. 첫 번째는 아스트로 템플릿 지시어를 사용하는 것이고 두 번째는 partytown 라이브러리를 설치 사용하는 방법입니다.
구글 애널리틱스 스크립트 코드 넣는 설명을 보면 <head> 바로 아래에 넣어 주어야 한다고 설명하고
있는데, <head> 바로아래에 넣으면 헤드 안 메타 태그 일부가 사라지는 현상이 있습니다.
아스트로에서만 발생하는 버그인지 아니면 나만에 문제인지 알 수 없어 제 경우 헤드 태그 가장 아래에 넣어 해결했으니 참고해 주었습니다.
아스트로 구글 애널리틱스 추가 is:inline
아스트로 템플릿 지시어 is:inline를 이용해 구글 애널리틱스를 추가할 수 있습니다.
아래와 같이 script 다음에 is:inline만 추가해 주면 됩니다.
<!-- Google tag (gtag.js) -->
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxx"></script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxx');
</script>
방법은 간단하지만 구글 애널리틱스나 태그매니저 스크립트가 웹사이트 성능을 저하시키는 원인이 되기에 가급적이면 partytown 라이브러리를 설치해 사용하는 것을 추천드립니다.
아스트로 구글 애널리틱스 추가 partytown
참고 : 아스트로에 partytown 라이브러리를 설치 설명을 읽어 보세요.
아스트로 partytown 라이브러리 추가
npx astro add partytown
아스토로에 partytown 라이브러리 추가 후 astro.config.mjs로 이동해 구글 애널리틱스 설정을 구성합니다.
integrations: [
partytown({
config: {
"forward": ["dataLayer.push",]
},
}),
],
참고 : partytown 태그 관리자
구글 애널리틱스 스크립트를 아래와 같이 type="text/partytown 추가해 수정합니다.
<!-- Google tag (gtag.js) -->
<script type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxx"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxx');
</script>
완성된 애널리틱스 코드를 헤드 안에 넣어 줍니다.
참고로 구글 애널리틱스를 사용하는 경우 구글 “pagespeed”에서 아래와 같은 성능 변화가 있었습니다.
- First Contentful Paint 2.5 초
- Largest Contentful Paint 3.0 초
- 사용하지 않는 자바스크립트 줄이기 절감 가능치: 31KiB
- 타사 코드의 영향을 줄임 타사 코드가 340 ms 동안 기본 스레드를 차단했습니다.
partytown 라이브러리를 사용하면 구글 애널리틱스를 사용하지 않을 때처럼 성능 변화가 없었습니다.