简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
スクリプトコンポーネントを使用してNext.jsのヘッダーにスクリプトを挿入します
P粉458913655
P粉458913655 2023-08-25 08:55:35
0
1
450
<p>Zoho というアプリケーションのトラッキング コードを Next.js アプリケーションの各ページの Head セクションに挿入したいと考えています。 _document.tsx というファイルを使用していますが、正常に動作します。偏ったスクリプトの場合、Next.js では Next.js スクリプト コンポーネント (https://nextjs.org/docs/messages/no-script-tags-in-head-component) を使用することをお勧めします。指示に従ってスクリプトを括弧内に挿入しましたが、エラー メッセージが表示されずに無視されました。このコードを _document.tsx ファイルの Head セクションに入力できますか?別のコンポーネントに分割した方がよいでしょうか?</p> <p>どんな建议都も助けてください</p> <pre class="brush:php;toolbar:false;">ドキュメントのインポート, { HTML、 頭、 主要、 次のスクリプト、 ドキュメントコンテキスト、 DocumentInitialProps、 "next/document" から; } "next/script" からスクリプトをインポートします。 クラス MyDocument extends Document { 静的非同期 getInitialProps( ctx: ドキュメントコンテキスト ): Promise { constInitialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } 与える（） { 戻る （ <HTML lang="ja"> ＜頭＞ <meta charSet="utf-8" /> <リンク href="https://fonts.googleapis.com/css?family=PT Sans&display=optional" rel="スタイルシート" /> <メタ名="msapplication-TileColor"コンテンツ="#596285" /> <メタ 名前= "msapplication-config" content="/favicon/browserconfig.xml" /> <メタ名="テーマカラー"コンテンツ= "#ffffff" /> {/* Zoho Marketing Automation の場合 */} <Script id="zoho-ma"> {`var w = ウィンドウ; var p = w.location.protocol; if (p.indexOf("http") < 0) { p = "http" ":"; } var d = ドキュメント; var f = d.getElementsByTagName("スクリプト")[0], s = d.createElement("スクリプト"); s.type = "text/javascript"; s.async = false; if (s.readyState) { s.onreadystatechange = function () { if (s.readyState == "ロード済み" || s.readyState == "complete") { s.onreadystatechange = null; 試す { ロードワプロップス( 「myid#」、 「myid#」、 「myid#」、 「myid#」、 「0.0」 ); } キャッチ (e) {} } }; } それ以外 { s.onload = 関数 () { 試す { ロードワプロップス( 「myid#」、 「myid#」、 「myid#」、 「myid#」、 「0.0」 ); } キャッチ (e) {} }; }s.src = p "//ma.zoho.com/hub/js/WebsiteAutomation.js"; f.parentNode.insertBefore(s, f);`} </スクリプト> {/* Zoho マーケティング オートメーションを終了します */} </頭> <本体> <メイン /> <NextScript /> <div id="通知"></div> </ボディ> </HTML> ); } } デフォルトの MyDocument をエクスポート;</pre>
P粉458913655
P粉458913655

全員に返信(1)
P粉818125805
P粉8181258052023-08-26 00:03:41 1棟

前の投稿を読み直しました次の 11 とスクリプト タグの追加が機能しません。スクリプトがレンダリングされません ここにリンクの説明を入力してくださいと、&lt を入れることができないことに気づきました。 ; Script> コンポーネントは Head タグ内に配置されます。また、_document.tsx ではなく、_app.tsx に置く必要があります (beforeInteractive を使用しない場合は、上記のリンクを参照してください)。

Google Analytics スクリプトも含めたかったので、TrackingCode というコンポーネントを別の js ファイルとして作成しました。

リーリー

私の _app.tsx ファイルは次のとおりです:

リーリー
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！