@stackflow/plugin-google-analytics-4

yarn add @stackflow/plugin-google-analytics-4

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.(defalut false).
    }),
  ],
});

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>;
};

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>
  </>
);