@starlawfirm/tracking NPM

스타법무법인 트래킹 기능 패키지(Tracking)

스타법무법인 자사 홈페이지 트래킹 기능 패키지

배포 방법

작업을 완료 한 후, pacakage.json 의 version을 올려줍니다.
npm run build:prod 을 하여서 배포를 진행합니다.

사용법

설치시

`npm i @starlawfirm/tracking`

사용시

TrackingProvider 파일을 생성한다.

import {
  daangn,
  kakao,
  meta,
  naver,
  googleAnalytics,
  googleTagManager,
  mixpanel,
  smartlog,
  googleAds,
  // tiktok,
} from "@starlawfirm/tracking";
import { useEffect } from "react";
import { useCookies } from "next-client-cookies";

export default function TrackingProvider() {
  useEffect(() => {
    // window 객체가 있는지 확인 (클라이언트 사이드에서만 실행)
    if (typeof window === "undefined") return;

    const initTracking = async () => {
      try {
        await Promise.all([
          googleAnalytics.init(process.env.NEXT_PUBLIC_DASI_GA_ID || ""),
          googleTagManager.init(process.env.NEXT_PUBLIC_DASI_GTM_ID || ""),
          googleAds.init(process.env.NEXT_PUBLIC_DASI_GAS_ID || ""),
          naver.init(process.env.NEXT_PUBLIC_DASI_NAVER_ID || ""),
          meta.init(process.env.NEXT_PUBLIC_DASI_META_ID || ""),
          daangn.init(process.env.NEXT_PUBLIC_DASI_DAANGN_ID || ""),
          kakao.init(process.env.NEXT_PUBLIC_DASI_KAKAO_ID || ""),
          mixpanel.init(process.env.NEXT_PUBLIC_DASI_MIXPANEL_ID || ""),
          smartlog.init(process.env.NEXT_PUBLIC_DASI_SMARTLOG_ID || ""),
          // tiktok.init(
          //   process.env.NEXT_PUBLIC_DASI_TIKTOK_ID || "CSI7R1RC77U221904TM0",
          // ),
        ]);

        console.log("모든 트래킹 스크립트 초기화 완료");
      } catch (error) {
        console.warn("트래킹 초기화 중 오류 발생:", error);
      }
    };
    initTracking();
  }, []);

  return null;
}

최상위 파일에서 해당 파일을 import 한다.

import TrackingProvider from "@/components/providers/TrackingProvider";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        <TrackingProvider />
        {children}
      </body>
    </html>
  );
}