使用脚本组件在Next.js的head部分插入脚本

wqsoz72f 于 2022-11-29 发布在其他

关注(0)|答案(1)|浏览(292)

我想将一个名为Zoho的应用程序中的跟踪代码插入到我的Next.js应用程序的每个页面的Head部分。我使用了一个工作正常的_document.tsx。对于倾斜脚本，Next.js建议使用Next.js脚本组件（https://nextjs.org/docs/messages/no-script-tags-in-head-component）.我按照说明用括号插入了脚本，但它被忽略了，没有错误消息。我可以在_document.tsx文件的Head部分输入这段代码吗？将其作为一个单独的组件来使用是否更好？
任何建议都是有用的

import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
DocumentInitialProps,
} from "next/document";
import Script from "next/script";

class MyDocument extends Document {
 static async getInitialProps(
   ctx: DocumentContext
 ): Promise<DocumentInitialProps> {
  const initialProps = await Document.getInitialProps(ctx);
  return { ...initialProps };
}
render() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="utf-8" />
        <link
          href="https://fonts.googleapis.com/css?family=PT+Sans&display=optional"
          rel="stylesheet"
        />
        <meta name="msapplication-TileColor" content="#596285" />
        <meta
          name="msapplication-config"
          content="/favicon/browserconfig.xml"
        />
        <meta name="theme-color" content="#ffffff" />
        {/* 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(
                    "myid#",
                    "myid#",
                    "myid#",
                    "myid#",
                    "0.0"
                  );
                } catch (e) {}
              }
            };
          } else {
            s.onload = function () {
              try {
                loadwaprops(
                  "myid#",
                  "myid#",
                  "myid#",
                  "myid#",
                  "0.0"
                );
              } catch (e) {}
            };
          }
          s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js";
          f.parentNode.insertBefore(s, f);`}
        </Script>
        {/* end Zoho marketing automation */}
      </Head>
      <body>
        <Main />
        <NextScript />
        <div id="notifications"></div>
      </body>
    </Html>
  );
 }
}

export default MyDocument;

next.js

来源：https://stackoverflow.com/questions/74592484/inserting-script-in-head-section-of-next-js-using-script-component

1条答案

按热度按时间

igetnqfo1#

我重新阅读了之前的文章Next 11和添加脚本标签不工作。没有脚本是renderenter链接描述这里，并意识到你不能把组件在头标签。此外，它不应该在_document.tsx，而应该在_app. tsx。（除非你是使用beforeInteractive我相信，见上面的链接）
因为我还想包含一个GoogleAnalytics脚本，所以我创建了一个名为TrackingCode的组件作为单独的js文件

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;

my _app.tsx文件为：

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

赞(0）回复(0）举报 2022-11-29

我来回答

使用脚本组件在Next.js的head部分插入脚本

1条答案

相关问题

热门标签

最新问答