Nuxt Scripts를 이용해 Nuxt3에 GA적용하기

2024-10-11

Language :

안녕하세요 Lovefield입니다.

블로그를 업데이트 하면서 "Nuxt Scripts"(link)라는 새로운 모듈을 알게되었습니다. "Nuxt scripts"는 Nuxt에서 타사 스크립트를 사용하기 위해 만들어진 모듈입니다. 기존에 useHead를 사용해서 불러오던 타사 스크립트를 설정으로 간단하게 불러 올 수 있으며, 클라이언트와 서버측 환경간의 호환성을 제공합니다.

Nuxt Scripts Home Page

저는 Google Analytics 와 Google Adsense 를 사용하고 있습니다. 기존에는 다음과 같이 사용을 하고 있었습니다.

Google Analytics

Plain Text

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

Plain Text

<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

Plain Text

bun add @nuxt/scripts

우선 "Nuxt Scripts" 모듈을 설치해줍니다.

nuxt.config.ts

Plain Text

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

Plain Text

…
<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

Plain Text

<template>
    <ScriptGoogleAdsense data-ad-client="your-client-code" data-ad-slot="your-slot-code" data-ad-format="auto" />
</template>

Google Adsense의 경우는 더 쉬웠습니다. 컴포넌트 자체를 지원하기 때문에 해당 컴포넌트만 쓰면 되거든요!

Lovefield

Web Front-End developer

하고싶은게 많고, 나만의 서비스를 만들고 싶은 변태스러운 개발자입니다.

Profile View Articles

Vue3 에서 마우스 툴팁 만들기

Vue3에서 마우스 툴팁 만드는 방법에 대해 작성한 글입니다.

Vue

2024-01-04

[자연/청주] 추정리 메밀밭

추정리메밀꽃밭 방문 후기

Review

2024-10-13