Google AnalyticsのGTAGを次へ加える方法.を使ったJS🎉

まず第一に、私は私をたくさん助けてくれた🙏.
あなたは、ちょうどあなたの超高速を終えました.JSのウェブサイトは、すべてのパフォーマンスのメトリクスは、より高いレベルにポイントして、Google AnalyticsとPageSpeed洞察力を得るために夢を追加する必要があります.このメッセージはよく知られている😭:Reduce the impact of third-party code誰があなたが呼ぶつもりですか?his article🎉
はい、この信じられないほどのライブラリを使用すると、サービスの労働者にAnalyticsのような外部スクリプトの実行を委任することができますサードパーティのコードの影響を減らす!
OKは、我々は次の新しい次を作成するPartytownで見つかった例から始めることができます.Google Analyticsと一緒のJSアプリケーション:

yarn create next-app --example with-google-analytics with-google-analytics-app

現在、それはParytownターンです;次の12.1.1バージョンで.JSはScriptストラテジー.このネイティブの実装のおかげで簡単にあなたの次にPartyTownを追加することができます.プロジェクト.
実験的な特徴として、workerファイルで有効にしなければなりません.

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

次に、セットアップを完了するには、お好みのパッケージマネージャーを使用して依存関係にPartyTownライブラリを追加する必要があります.

yarn add @builder.io/partytown

Google Analytics実行をサービスワーカーに動かす方法?nextjs.config.jsフォルダに_app.jsファイルを開く必要があります.
まず第一に、我々はpages

<Script
   strategy="worker"
   src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>

次に、このスクリプトでインラインスクリプトを変更します.

 <script
    type="text/partytown"
    dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            window.gtag = function gtag(){window.dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${gtag.GA_TRACKING_ID}', { 
                page_path: window.location.pathname,
            });
        `,
    }}
/>

私は第2のスクリプトのためにworkerコンポーネントを使いたいです、しかし、私はそれがまだサポートされないと思います.
このコードはGoogleガイドからのオリジナルのようですが、少し違いがあります.

- function gtag(){window.dataLayer.push(arguments);}
+ window.gtag = function gtag(){window.dataLayer.push(arguments);}

Scriptをグローバル関数として定義することで、PartyTownを参照できます.Next.js canary branchには、このスクリプトをscriptコンポーネントに追加するだけです.

<script
    data-partytown-config
    dangerouslySetInnerHTML={{
      __html: `
          partytown = {
            lib: "/_next/static/~partytown/",
            forward: ["gtag"]           
          };
        `,
    }}
/>

これらの簡単な手順を使用すると、我々は我々の次の完全にGoogle Analyticsのサポートをしている.JSアプリ.しかし、分離されたサービス労働者で実行される🚀