简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Insérer un script dans l'en-tête de Next.js à l'aide du composant Script

<p>Je souhaite insérer le code de suivi d'une application appelée Zoho dans la section En-tête de chaque page de mon application Next.js. J'utilise un fichier appelé _document.tsx et cela fonctionne bien. Pour un script asymétrique, Next.js recommande d'utiliser le composant Next.js Script (https://nextjs.org/docs/messages/no-script-tags-in-head-component). J'ai suivi les instructions et inséré le script entre parenthèses, mais il a été ignoré sans message d'erreur.Puis-je saisir ce code dans la section Head du fichier _document.tsx ? Serait-il préférable de le diviser en un composant distinct ?</p> <p>任何建议都将有所帮助</p> <pre class="brush:php;toolbar:false;">importer un document, { HTML, Tête, Principal, SuivantScript, Contexte de document, DocumentInitialProps, } à partir de "suivant/document" ; importer le script depuis "suivant/script" ; la classe MyDocument étend le document { asynchrone statique getInitialProps( ctx : DocumentContext ) : Promesse<DocumentInitialProps> { const initialProps = attendre Document.getInitialProps(ctx); return { ...initialProps } ; } rendre() { retour ( <Html lang="fr"> <Tête> <meta charSet="utf-8" /> <lien href="https://fonts.googleapis.com/css?family=PT+Sans&display=optional" rel="feuille de style" /> <meta name="msapplication-TileColor" content="#596285" /> <méta name="msapplication-config" content="/favicon/browserconfig.xml" /> <meta name="thème-couleur" content="#ffffff" /> {/* pour Zoho Marketing Automation */} <ID de script="zoho-ma"> {`var w = fenêtre ; 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 = "texte/javascript"; s.async = false; if (s.readyState) { s.onreadystatechange = fonction () { if (s.readyState == "chargé" || s.readyState == "complet") { s.onreadystatechange = null ; essayer { chargerwaprops( "mon identifiant#", "mon identifiant#", "mon identifiant#", "mon identifiant#", "0,0" ); } attraper (e) {} } } ; } autre { s.onload = fonction () { essayer { chargerwaprops( "mon identifiant#", "mon identifiant#", "mon identifiant#", "mon identifiant#", "0,0" ); } attraper (e) {} } ; }s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js"; f.parentNode.insertBefore(s, f);`} </Script> {/* mettre fin à l'automatisation du marketing Zoho */} ≪/Tête> <corps> <Principal /> <NextScript /> <div id="notifications"></div> </corps> </Html> ); } } exporter MonDocument par défaut;</pre>
P粉458913655P粉458913655391 Il y a quelques jours456

répondre à tous(1)je répondrai

  • P粉818125805

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

    J'ai relu le post précédentSuivant 11 et l'ajout de balises Script ne fonctionne pas entrez la description du lien ici et j'ai réalisé que vous ne pouvez pas mettre le composant <Script> dans la balise Head. De plus, il ne doit pas être dans _document.tsx mais dans _app.tsx (sauf si vous utilisez beforeInteractive, voir le lien ci-dessus).

    Parce que je voulais également inclure le script Google Analytics, j'ai créé un composant appelé TrackingCode en tant que fichier js distinct. 

    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;

    Mon fichier _app.tsx est le suivant : 

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

    répondre
    0
  • Annulerrépondre