Nuxt Scripts를 이용해 Nuxt3에 GA적용하기
Nuxt안녕하세요 Lovefield입니다.
블로그를 업데이트 하면서 "Nuxt Scripts"(link)라는 새로운 모듈을 알게되었습니다. "Nuxt scripts"는 Nuxt에서 타사 스크립트를 사용하기 위해 만들어진 모듈입니다. 기존에 useHead를 사용해서 불러오던 타사 스크립트를 설정으로 간단하게 불러 올 수 있으며, 클라이언트와 서버측 환경간의 호환성을 제공합니다.
Nuxt Scripts Home Page
저는 Google Analytics 와 Google Adsense 를 사용하고 있습니다. 기존에는 다음과 같이 사용을 하고 있었습니다.
Google Analytics
TypeScript
useHead({
script: [
{
src: `https://www.googletagmanager.com/gtag/js?id=${config.public.googleAnalyticsId}`
}
]
});
onMounted(()=>{
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", config.public.googleAnalyticsId, {
page_title: document.title,
page_herf: window.location.href.split(window.location.hostname)[1],
page_url: window.location.pathname,
});
});
Google Adsense
HTML, XML
<template>
<ins class=”adsbygoogle” style=”display:block” :data-da-client=”config.public.adclient” :data-ad-slot=”config.public.adslot” data-ad-format=”auto” data-full-width-responsve=”true”></ins>
</template>
<script setup lang=”ts>
const config = useRuntimeConfig();
onMounted(()=>{
(adsbygoogle = window.adsbygoogle || []).push({});
});
</script>
위 코드들의 가장 큰 문제점은 타입을 인식하지 못한다는 점입니다. 그로인해 @ts-ignore 나 @ts-nocheck 등으로 가려야 했습니다. 이제 "Nuxt Scripts"를 알게 되었으니 이렇게 할일은 없어졌죠!
Nuxt Scripts install
Shell Session
bun add @nuxt/scripts우선 "Nuxt Scripts" 모듈을 설치해줍니다.
nuxt.config.ts
TypeScript
export default defineNuxtConfig({
…
modules: [
“@nuxt/scripts”
],
scripts: {
registry: {
googleAnalytics: {
id: process.env.GOOGLE_ANALYTICS_ID,
},
},
},
});
nuxt.config.ts 파일에 모듈을 사용하도록 기재합니다. 동시에 Google Analytics 설정도 합니다. 위와같이 설정할 경우 Google Analytics의 config가 자동으로 호출됩니다.
layout/default.vue
HTML, XML
…
<script setup lang=”ts>
const { proxy } = useScriptGoogleAnalytics();
useScriptEventPage(({ title, path }) => {
proxy.gtag("set", {
is_login: userStore.isLogin,
page_title: title,
page_herf: path,
page_url: path.split("?")[0],
});
});
</script>
기본 레이아웃 파일에서 위와같이 설정합니다. useScriptGoogleAnalytics 함수를 이용해 사용할 매서드를 불러옵니다. 매서드에는 gtag 함수를 지원합니다. useScriptEventPage 함수는 Nuxt 내부에서 route 변화를 감지합니다. 이미 page_view는 호출이 될 예정이기 때문에 set을 이용해 글로벌 값을 지정합니다. 이렇게 하면 GA 설정은 끝났습니다.
ads.vue
HTML, XML
<template>
<ScriptGoogleAdsense data-ad-client="your-client-code" data-ad-slot="your-slot-code" data-ad-format="auto" />
</template>
Google Adsense의 경우는 더 쉬웠습니다. 컴포넌트 자체를 지원하기 때문에 해당 컴포넌트만 쓰면 되거든요!
