@stackflow/plugin-google-analytics-4

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyHome",
      route: "/",
    },
    {
      name: "MyArticle",
      route: "/articles/:articleId",
    },
  ],
});

import { stackflow } from "@stackflow/react";
import { googleAnalyticsPlugin } from "@stackflow/plugin-google-analytics-4";
import { config } from "./stackflow.config";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
 
const { Stack } = stackflow({
  config,
  components: {
    MyHome,
    MyArticle,
  },
  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).
    }),
  ],
});

import { useEffect } from "react";
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
    });
  }, [setConfig]);
 
  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>
  </>
);