안녕하세요 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의 경우는 더 쉬웠습니다. 컴포넌트 자체를 지원하기 때문에 해당 컴포넌트만 쓰면 되거든요!
