TouchWebLinerLandingLogger

'touch_web_liner_landing' 로그를 위한 로거 클래스입니다. UTM 파라미터가 변경되었다면 새 세션으로 판단하여 로깅을 진행합니다.

노션 문서

Import

import { TouchWebLinerLandingLogger } from '@liner-engineering/orbit-app/analytics';

초기화

const landingLogger = new TouchWebLinerLandingLogger({
  cookieDomain: '.liner.com',
  logEvent: ampLogEvent,
  checkIsLoginUser: async () => {
    // 로그인 여부 확인 로직
    const user = await getUser();
    return !!user;
  },
});

생성자 파라미터

파라미터	타입	설명
cookieDomain	string	쿠키 도메인 (예: '.liner.com')
logEvent	(eventName: string, properties: object) => void	이벤트 로깅 함수
checkIsLoginUser	() => Promise<boolean>	로그인 여부 확인 함수

사용 예시

import { TouchWebLinerLandingLogger } from '@liner-engineering/orbit-app/analytics';

const landingLogger = new TouchWebLinerLandingLogger({
  cookieDomain: '.liner.com',
  logEvent: ampLogEvent,
  checkIsLoginUser: async () => {
    return await isUserLoggedIn();
  },
});

function App() {
  useLinerTouchLog({
    landingLogger,
  });

  return <YourApp />;
}

페이지별 추가 속성 (TouchWebLinerLandingProperties)

특정 페이지에서 touch_web_liner_landing 이벤트에 추가 속성을 포함해야 할 때 사용합니다. 추가 속성은 비동기 데이터(API 응답 등)에 의존할 수 있습니다.

Import

import {
  TouchWebLinerLandingPropertiesProvider,
  useTouchWebLinerLandingProperties,
} from '@liner-engineering/orbit-app/analytics';

설정

app.tsx에서 TouchWebLinerLandingPropertiesProvider로 감쌉니다. useLinerTouchLog의 시그니처는 변경 없이 그대로 사용합니다.

function AppRoot() {
  return (
    <TouchWebLinerLandingPropertiesProvider>
      <App />
    </TouchWebLinerLandingPropertiesProvider>
  );
}

function App() {
  useLinerTouchLog({ gatewayLogger, landingLogger, domainLogger });
  return <Routes />;
}

특정 페이지에서 추가 속성 전달

useTouchWebLinerLandingProperties()가 반환하는 logLanding 함수를 호출합니다. 비동기 데이터가 준비된 시점에 호출하면 됩니다.

function InvitationPage() {
  const logLanding = useTouchWebLinerLandingProperties();
  const { data: user } = useUser();

  useEffect(() => {
    if (user) {
      logLanding({ entryType: 'invitation', membership: user.membership });
    }
  }, [user]);

  return <div>...</div>;
}

• TouchWebLinerLandingPropertiesProvider 없이도 useLinerTouchLog는 기존과 동일하게 동작합니다. Provider는 페이지별 추가 속성이 필요할 때만 감싸면 됩니다.
• useTouchWebLinerLandingProperties는 반드시 TouchWebLinerLandingPropertiesProvider 하위에서 호출해야 합니다. Provider 없이 호출하면 에러가 발생합니다.
• useTouchWebLinerLandingProperties()를 호출하는 하위 컴포넌트는 useLinerTouchLog와 동일한 render cycle에 동기적으로 렌더링되어야 합니다. React.lazy, 조건부 렌더링 등으로 하위 컴포넌트가 늦게 마운트되면 추가 속성이 {}로 로깅됩니다.
• logLanding()은 Provider 마운트당 첫 호출만 유효합니다. 두 번째 이후 호출은 무시됩니다.
• 쿠키 이름은 TOUCH_WEB_LINER_LANDING_DATA이며, 브라우저 session cookie로 동작합니다.
• URL의 UTM 파라미터가 변경되면 새 세션으로 판단합니다.

Methods

LandingSessionData

interface LandingSessionData {
  utm_source: string;
  utm_medium: string;
  utm_campaign: string;
  utm_term: string;
  utm_content: string;
  timestamp: number;
}

setSessionCookie

세션 데이터를 쿠키에 저장합니다.

landingLogger.setSessionCookie({
  utm_source: 'google',
  utm_medium: 'cpc',
  utm_campaign: 'summer_sale',
  utm_term: 'liner',
  utm_content: 'banner',
  timestamp: Date.now(),
});

getSessionCookie

저장된 세션 데이터를 반환합니다.

const session = landingLogger.getSessionCookie();
// LandingSessionData | undefined

isNewSession (getter)

새 세션 여부를 판단합니다.

const isNew = landingLogger.isNewSession;
// true | false

판단 로직:

1. 쿠키 없음 → 새 세션
2. 쿠키 있음 + UTM 파라미터 있음 + UTM 변경됨 → 새 세션
3. 쿠키 있음 + UTM 파라미터 없음 → 기존 세션 유지

logAndSetSessionCookie

touch_web_liner_landing 이벤트를 로깅하고 세션 쿠키를 설정합니다.

landingLogger.logAndSetSessionCookie();

로깅되는 속성:

• source_full_url: document.referrer
• UTM 파라미터 (utm_source, utm_medium, utm_campaign, utm_term, utm_content)