国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用Script組件在Next.js中向頭部插入腳本
P粉458913655
P粉458913655 2023-08-25 08:55:35
0
1
741
<p>我想在我的Next.js應(yīng)用程序的每個頁面的Head部分中插入來自名為Zoho的應(yīng)用程序的跟蹤代碼。我使用的是一個名為_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;">導(dǎo)入文檔,{ 網(wǎng)頁, 頭, 主要的, 下一個腳本, 文檔上下文, 文檔初始道具, } 來自“下一個/文檔”; 從“next/script”導(dǎo)入腳本; 類 MyDocument 擴展文檔 { 靜態(tài)異步 getInitialProps( ctx:文檔上下文 ): Promise; { const initialProps = 等待 Document.getInitialProps(ctx); 返回 { ...initialProps }; } 使成為() { 返回 ( <頭> > <鏈接 href=“https://fonts.googleapis.com/css?family=PT+Sans&display=可選” rel="樣式表"; >> <元名稱=“msapplication-TileColor”內(nèi)容=“#596285” >> <元 name="msapplication-config"; 內(nèi)容=“/favicon/browserconfig.xml” >> <元名稱=“主題顏色”內(nèi)容=“#ffffff” >> {/* 對于 Zoho Marketing Automation */} <腳本 id=“zoho-ma”> {`var w = 窗口; var p = w.location.protocol; if (p.indexOf(“http”) < 0) { p =“http”; +“:”; } var d = 文檔; var f = d.getElementsByTagName(“腳本”)[0], s = d.createElement(“腳本”); s.type = “文本/javascript”; s.async = false; 如果(s.readyState){ s.onreadystatechange = 函數(shù) () { if (s.readyState == "已加載" || s.readyState == "完成") { s.onreadystatechange = null; 嘗試 { 加載waprops( “我的ID#”, “我的ID#”, “我的ID#”, “我的ID#”, “0.0” ); } 捕捉 (e) {} } }; } 別的 { s.onload = 函數(shù) () { 嘗試 { 加載waprops( “我的ID#”, “我的ID#”, “我的ID#”, “我的ID#”, “0.0” ); } 捕捉 (e) {} }; }s.src = p + “//ma.zoho.com/hub/js/WebsiteAutomation.js”; f.parentNode.insertBefore(s, f);`} </腳本> {/* 結(jié)束 Zoho 營銷自動化 */} </頭> <正文> <主要>> >
</正文> </Html> ); } } 導(dǎo)出默認MyDocument;</pre>
P粉458913655
P粉458913655

全部回復(fù)(1)
P粉818125805

我重新閱讀了之前的帖子Next 11 and adding Script tags not working. No scripts are rendered enter link description here,意識到你不能把<Script>組件放在Head標簽中。此外,它不應(yīng)該在_document.tsx中,而應(yīng)該在_app.tsx中(除非你使用beforeInteractive,參見上面的鏈接)。

因為我還想包含Google Analytics腳本,所以我創(chuàng)建了一個名為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 + "http://ma.zoho.com/hub/js/WebsiteAutomation.js";
f.parentNode.insertBefore(s, f);`}
  </Script>
  {/* end Zoho marketing automation */}
</>
 );
}

export default TrackingCode;

我的_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} />
   </>
  );
}
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板