Next.jsでGoogleタグマネージャーの実装、アンチフリッカータグ(Anti-flicker snippet)

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