Ⓒ 2024- @itatibs
このサイトをリニューアルした際に、Google Analytics(GA4)への設定も実施していたのですが、設定内容が誤っていたためうまく反映されていませんでした。
元々GA4は旧ブログのときから利用していたため、G-XXXXXのような値は持っていました。
NextJSで適用するにあたり、調べていたところ公式ページで紹介されていたため、以下のように設定しました。
import { GoogleTagManager } from "@next/third-parties/google"; ... export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { ... // GA const ga_id = process.env.GA_ID || ""; return ( <html lang="ja"> {/* GTM(Google Tag Manager)の設定を追加 */} <GoogleTagManager gtmId={ga_id} /> ... </html> ); }
process.evn.GA_IDのとおり環境変数で値は取得するようにしているため、GithubのEnvironmentsでGAの値をしてするようにしていました。
その後、Google Analyticsを確認していましたが反映されておらず、数日経てば反映されるかな？と思っていましたがその後も反映されませんでした。
しまいには過去 48 時間に受信したデータはありません。と表示されるようになったので、改めて設定内容を見直すようにしました。
あらためてNextJSの公式ページを確認するとGoogle Tag ManagerとGoogle Analyticsという2つのセクションがあり、GoogleTagManagerタグではGTM-XYZというフォーマットでgtmIdを指定していることに気づきました。
自分のコードにも書いてあるようにgtmIdにめっちゃGAのIDを指定していますね。。。
ちなみにGoogleAnalyticsタグですと、こちらはG-XYZというフォーマットで指定するgaIdを指定することができます。こちらを指定しておけば、特に問題はなさそうでした。
今回の解決法としては、タグマネージャーに自分のアカウントでアクセスし、アカウント(コンテナ)を作成することで生成されるGTM-XXXの値をGithub ActionsのEnvironmentsで更新してあげることで、想定通りにGoogle Analyticsに情報を送ることができるようになりました。