<p>我想在我的Next.js应用程序的每个页面的Head部分中插入来自名为Zoho的应用程序的跟踪代码。我使用的是一个名为_document.tsx的文件，它正常工作。对于一个倾斜的脚本，Next.js建议使用Next.js Script组件（https://nextjs.org/docs/messages/no-script-tags-in-head-component）。我按照说明将脚本插入到括号中，但它被忽略了，没有错误消息。我可以在_document.tsx文件的Head部分输入这段代码吗？是否最好将其拆分为一个单独的组件？</p> <p>任何建议都将有所帮助</p> <pre class="brush:php;toolbar:false;">import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps, } from &quot;next/document&quot;; import Script from &quot;next/script&quot;; class MyDocument extends Document { static async getInitialProps( ctx: DocumentContext ): Promise&lt;DocumentInitialProps&gt; { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } render() { return ( &lt;Html lang=&quot;en&quot;&gt; &lt;Head&gt; &lt;meta charSet=&quot;utf-8&quot; /&gt; &lt;link href=&quot;https://fonts.googleapis.com/css?family=PT+Sans&amp;display=optional&quot; rel=&quot;stylesheet&quot; /&gt; &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#596285&quot; /&gt; &lt;meta name=&quot;msapplication-config&quot; content=&quot;/favicon/browserconfig.xml&quot; /&gt; &lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot; /&gt; {/* for Zoho Marketing Automation */} &lt;Script id=&quot;zoho-ma&quot;&gt; {`var w = window; var p = w.location.protocol; if (p.indexOf(&quot;http&quot;) &lt; 0) { p = &quot;http&quot; + &quot;:&quot;; } var d = document; var f = d.getElementsByTagName(&quot;script&quot;)[0], s = d.createElement(&quot;script&quot;); s.type = &quot;text/javascript&quot;; s.async = false; if (s.readyState) { s.onreadystatechange = function () { if (s.readyState == &quot;loaded&quot; || s.readyState == &quot;complete&quot;) { s.onreadystatechange = null; try { loadwaprops( &quot;myid#&quot;, &quot;myid#&quot;, &quot;myid#&quot;, &quot;myid#&quot;, &quot;0.0&quot; ); } catch (e) {} } }; } else { s.onload = function () { try { loadwaprops( &quot;myid#&quot;, &quot;myid#&quot;, &quot;myid#&quot;, &quot;myid#&quot;, &quot;0.0&quot; ); } catch (e) {} }; } s.src = p + &quot;//ma.zoho.com/hub/js/WebsiteAutomation.js&quot;; f.parentNode.insertBefore(s, f);`} &lt;/Script&gt; {/* end Zoho marketing automation */} &lt;/Head&gt; &lt;body&gt; &lt;Main /&gt; &lt;NextScript /&gt; &lt;div id=&quot;notifications&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/Html&gt; ); } } export default MyDocument;</pre>

import Script from "next/script";

function TrackingCode() {
  return (
   <>
  {/* Global site tag (gtag.js) - Google Analytics */}
  <Script src="https://www.googletagmanager.com/gtag/js?id=G-GOOGLEID" />
  <Script id="google-analytics" strategy="afterInteractive">
    {`
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-GOOGLEID');
  `}
  </Script>

  {/* for Zoho Marketing Automation */}

  <Script id="zoho-ma">
    {`var w = window;
var p = w.location.protocol;
if (p.indexOf("http") < 0) {
  p = "http" + ":";
}
var d = document;
var f = d.getElementsByTagName("script")[0],
  s = d.createElement("script");
s.type = "text/javascript";
s.async = false;
if (s.readyState) {
  s.onreadystatechange = function () {
    if (s.readyState == "loaded" || s.readyState == "complete") {
      s.onreadystatechange = null;
      try {
        loadwaprops(
          "mycode",
          "mycode",
          "mycode",
          "mycode",
          "0.0"
        );
      } catch (e) {}
    }
  };
} else {
  s.onload = function () {
    try {
      loadwaprops(
        "mycode",
        "mycode",
        "mycode",
         "mycode",
        "0.0"
      );
    } catch (e) {}
  };
}
s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js";
f.parentNode.insertBefore(s, f);`}
  </Script>
  {/* end Zoho marketing automation */}
</>
 );
}

export default TrackingCode;

import "../assets/scss/material-kit.scss";
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "../styles/globals.scss";
import { useEffect } from "react";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import type { AppProps } from "next/app";
import TrackingCode from "../components/tracking-code";

import store from "../app/store";


export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) 
{
 const getLayout = Component.getLayout ?? ((page) => page);
  useEffect(() => {
   typeof document !== undefined
      ? require("../node_modules/bootstrap/dist/js/bootstrap")
     : null;
  }, []);

return getLayout(
   <>
     <TrackingCode />
     <Component {...pageProps} />
   </>
  );
}