Insérer un script dans l'en-tête de Next.js à l'aide du composant Script
P粉458913655
2023-08-25 08:55:35
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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} /> </> ); }