Next.js 13以降では、@next/third-parties
の使用が推奨
タイミングの問題:
- インラインスクリプトは即時実行されますが、
loading
クラスを使用して可視性を制御しています 2000msのタイムアウトが設定されており、その間にGTMが正しく初期化されない可能性があります
layout.tsxでGTMの実装が2箇所で重複しています:
インラインスクリプトでの実装、@next/third-partiesを使用した実装、GTMが2回初期化される可能性がある。タイミングの競合が発生する可能性がある。
アンチフリッカータグ
アンチフリッカータグ(Anti-flicker snippet)は、A/Bテストツール(Google Optimize等)使用時に発生する「ちらつき」(FOOC: Flash of Original Content)を防ぐための重要な仕組みです。
(function(p,r,o,j,e,c,t,g){
// 1. ページ読み込み開始時にスタイルを追加
p['_'+t]={}; // タイマーオブジェクトの初期化
g=r.createElement('script');
g.src='https://www.googletagmanager.com/gtm.js?id=GTM-'+t;
r[o].prepend(g); // GTMスクリプトの読み込み
// 2. 非表示用のスタイルを追加
g=r.createElement('style');
g.innerText='.'+e+t+'{visibility:hidden!important}';
r[o].prepend(g);
// 3. 非表示クラスを追加
r[o][j].add(e+t);
// 4. タイムアウト処理
setTimeout(function(){
if(r[o][j].contains(e+t)){
r[o][j].remove(e+t); // タイムアウト時にクラスを削除
p['_'+t]=0;
}
},c) // cはタイムアウト時間(ミリ秒)
})(window,document,'documentElement','classList','loading',2000,'[GTMのID]')
ページ読み込み開始時に、コンテンツを一時的に非表示にする Google Optimize(またはGTM)がロードされるまでコンテンツを隠し続ける 設定された時間(この場合2000ミリ秒)以内にバリエーションが適用されない場合、オリジナルコンテンツを表示
環境変数
優先順位
1. .env.development.local / .env.production.local
2. .env.local
3. .env.development / .env.production
4. .env
next dev
実行時は開発用GTM IDが使用される next build && next start
実行時は本番用GTM IDが使用される
// .env.development
NEXT_PUBLIC_GTM_ID=GTM-開発用ID
// .env.production
NEXT_PUBLIC_GTM_ID=GTM-本番用ID
Next.jsではクライアントサイドで使用する環境変数には必ずNEXT_PUBLIC_
プレフィックスが必要です。
.env
NEXT_PUBLIC_GTM_ID=GTM-xxxxxxx
layout.tsx等
// layout.tsxの先頭で確認
console.log('GTM ID:', process.env.NEXT_PUBLIC_GTM_ID);
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID as string} />