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