API
플러그인
plugin-google-analytics-4

@stackflow/plugin-google-analytics-4

구글 애널리틱스 4를 스택플로우와 통합하는 데 사용되는 플러그인이에요.

설치

npm install @stackflow/plugin-google-analytics-4

사용법

초기화

stackflow.ts
import { stackflow } from "@stackflow/react";
import { googleAnalyticsPlugin } from "@stackflow/plugin-google-analytics-4";
 
const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    googleAnalyticsPlugin({
      trackingId: "G-XXXXXXXXXX", // Required. Your Google Analytics 4 Tracking ID
      userInfo: {
        // optional
        userId: "test123", // Your own user distinguishable id. (https://bit.ly/3VGu04K)
        userProperties: {
          // ...
          // You can add additional event parameters. This value will collected as a user properties of "Custom Dimension" in GA.
          // https://bit.ly/3uQbriR
        },
      },
      useTitle: true, // Optional. If true, the title of the current screen will be sent to GA. if false, ActivityName will be sent to GA.(default false).
    }),
  ],
});

config 세팅

App.tsx
import { useGoogleAnalyticsContext } from "@stackflow/plugin-google-analytics-4";
 
const App = () => {
  const { setConfig } = useGoogleAnalyticsContext();
 
  useEffect(() => {
    setConfig({
      user_id: "test123",
      user_properties: {
        // ...
      },
      // ...
      //  GA4 config values.
      // https://bit.ly/3Y7IXhV
    });
  }, []);
 
  return <div>...</div>;
};

이벤트 보내기

모든 스택은 컨텍스트로 래핑되어 있으므로 이벤트를 보내려면 useGoogleAnalyticsContext 훅을 사용할 수 있어요.

AdCreateButton.tsx
import { useGoogleAnalyticsContext } from "@stackflow/plugin-google-analytics-4";
// ...
const { sendEvent } = useGoogleAnalyticsContext();
 
return (
  <>
    <button
      onClick={() => {
        sendEvent("click_ad_creaet_new_ad", {
          advertiser_id: "DEBUG_AARON",
        });
      }}
    >
      광고 만들기
    </button>
  </>
);

상단 코드에서 보낸 사용자 정의 GA4 이벤트의 예시예요.

두번째 매개변수 객체는 사용자 정의 이벤트 매개변수로 전송돼요.

image

💡

FAQ: Pageview event가 두 번씩 발생하는 이슈가 있어요.

GA4 설정에서 "Page changes based on browser history events"를 해제하세요. (Web Stream>Enhanced Measurement>Pageviews>Advanced)

이 플러그인은 스택플로우의 "Effect Hook"을 사용하여 페이지뷰 이벤트를 수동으로 트리거해요. 다시 트리거할 필요가 없어요.

image