UA と GA4
今回はNext.jsのアプリケーションにGA4を導入する際の手順です。
ちなみに、google analytics には2種類あるらしく、
従来のgoogle analyticsはUniversal Analytics Property (UA)と呼ばれ、最新バージョンはGoogle Analytics 4 Property(GA4)と呼ばれています。
できるだけ早くGoogle Analytics 4に切り替えることを強く推奨します
とGoogleが言っています(下記参照)。2023年7月1日をもって、UAはサポート終了するそうです。
https://support.google.com/analytics/answer/11583528- GA4公式docはこちら
React Google Analytics 4
https://github.com/PriceRunner/react-ga4導入手順
- インストールします。
npm i react-ga4
or
yarn add react-ga4- _app.tsxに初期化処理を書く
import ReactGA from "react-ga4";
export default function App({ Component, pageProps }: AppProps) {
ReactGA.initialize("your GA measurement id");
.
.
- pageviewを計測したい場合
import ReactGA from "react-ga4";
export default function Home() {
ReactGA.send({ hitType: "pageview", page: "/my-path" });
.
.- eventを計測したい場合
例えば何かのボタンをクリックした際のeventを計測したい場合は、こんな感じ
import ReactGA from "react-ga4";
const MainContent = () => {
const clickBtn = () => {
ReactGA.event({
category: "click",
action: "ボタンをクリックした",
});
}
return (
<div
onClick={clickBtn}
/>
)
}これだけなのでとても簡単に実装出来ました。
因みに、react-ga4を使わずに自前で実装する場合は、
- htmlの
<head>要素の直後にGA用のscriptタグを書く - useEffectの中でwindow.gtag(‘config’, …)というコードを書く
が必要らしいので、react-ga4を使った方が簡単に実装できそうです。