简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Insérer un script dans l'en-tête de Next.js à l'aide du composant Script
P粉458913655
P粉458913655 2023-08-25 08:55:35
0
1
452
<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粉458913655
P粉458913655

répondre à tous(1)
P粉818125805
P粉8181258052023-08-26 00:03:41 1 plancher

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} />
   </>
  );
}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！