简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Sisipkan skrip ke dalam pengepala dalam Next.js menggunakan komponen Skrip
P粉458913655
P粉458913655 2023-08-25 08:55:35
0
1
448
<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粉458913655
P粉458913655

membalas semua(1)
P粉818125805
P粉8181258052023-08-26 00:03:41 Tingkat 1

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} />
   </>
  );
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！