简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

Sisipkan skrip ke dalam pengepala dalam Next.js menggunakan komponen Skrip

<p>Saya mahu memasukkan kod penjejakan daripada aplikasi yang dipanggil Zoho dalam bahagian Head pada setiap halaman aplikasi Next.js saya. Saya menggunakan fail bernama _document.tsx dan ia berfungsi dengan baik. Untuk skrip yang condong, Next.js mengesyorkan menggunakan komponen Skrip Next.js (https://nextjs.org/docs/messages/no-script-tags-in-head-component). Saya mengikuti arahan dan memasukkan skrip ke dalam kurungan, tetapi ia diabaikan tanpa mesej ralat.Bolehkah saya memasukkan kod ini dalam bahagian Head pada fail _document.tsx? Adakah lebih baik untuk membahagikannya kepada komponen yang berasingan?</p> <p>任何建议都将有所帮助</p> <pre class="brush:php;toolbar:false;">import Dokumen, { Html, kepala, utama, NextScript, Konteks Dokumen, DocumentInitialProps, } daripada "seterusnya/dokumen"; import Skrip daripada "seterusnya/skrip"; kelas MyDocument memanjangkan Dokumen { async statik getInitialProps( ctx: DocumentContext ): Janji<DocumentInitialProps> { const initialProps = tunggu Document.getInitialProps(ctx); kembalikan { ...initialProps }; } render() { kembali ( <Html lang="ms"> <Kepala> <meta charSet="utf-8" /> <pautan href="https://fonts.googleapis.com/css?family=PT+Sans&display=optional" rel="stylesheet" /> <meta name="msapplication-TileColor" kandungan="#596285" /> <meta name="msapplication-config" content="/favicon/browserconfig.xml" /> <meta name="warna tema" kandungan="#ffffff" /> {/* untuk Automasi Pemasaran Zoho */} <Skrip id="zoho-ma"> {`var w = tetingkap; var p = w.location.protocol; jika (p.indexOf("http") < 0) { p = "http" + ":"; } var d = dokumen; var f = d.getElementsByTagName("skrip")[0], s = d.createElement("skrip"); s.type = "teks/javascript"; s.async = palsu; if (s.readyState) { s.onreadystatechange = fungsi () { jika (s.readyState == "dimuatkan" || s.readyState == "lengkap") { s.onreadystatechange = batal; cuba { loadwaprops( "myid#", "myid#", "myid#", "myid#", "0.0" ); } tangkap (e) {} } }; } lain { s.onload = fungsi () { cuba { loadwaprops( "myid#", "myid#", "myid#", "myid#", "0.0" ); } tangkap (e) {} }; }s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js"; f.parentNode.insertBefore(s, f);`} </Skrip> {/* tamatkan automasi pemasaran Zoho */} </Kepala> <badan> <Utama /> <NextScript /> <div id="pemberitahuan"></div> </badan> </Html> ); } } eksport MyDocument lalai;</pre>
P粉458913655P粉458913655442 hari yang lalu502

membalas semua(1)saya akan balas

  • P粉818125805

    P粉8181258052023-08-26 00:03:41

    Saya membaca semula siaran sebelumnya11 Seterusnya dan menambah tag Skrip tidak berfungsi masukkan penerangan pautan di sini dan menyedari bahawa anda tidak boleh meletakkan komponen <Script> dalam tag Ketua. Selain itu, ia tidak sepatutnya berada dalam _document.tsx tetapi dalam _app.tsx (melainkan anda menggunakan beforeInteractive, lihat pautan di atas).

    Oleh kerana saya juga ingin memasukkan skrip Google Analitis, saya mencipta komponen yang dipanggil TrackingCode sebagai fail js yang berasingan. 

    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;

    Fail _app.tsx saya adalah seperti berikut: 

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

    balas
    0
  • Batalbalas