Reactで動的にscriptタグを追加して広告を表示したい

実現したいこと

HTML書かれている以下のscriptタグを、Reactで埋め込むことでページ内に広告を表示したいです🙇🏻‍♂️

HTMLファイルでは正しく表示できることが確認できていますが、Reactではうまく表示できていません。

html
1<script type="text/javascript">
2var test = {
3  app_id: "APP_ID",
4};
5</script>
6<script type="text/javascript" src="https://some-ad.js"></script>

発生している問題・分からないこと

ググったりAIに聞いたりしながら以下のようなコードを作成してみましたが、何も表示されません...。

該当のソースコード

tsx
1export function AdComponent() {
2	useEffect(() => {
3		// 1. 既存のスクリプトがあれば削除（再レンダリング時の対応）
4		const existingScripts = document.querySelectorAll(
5			'script[data-advertisement="true"]',
6		);
7		for (const script of existingScripts) {
8			script.remove();
9		}
10
11		// 2. インラインスクリプトの作成
12		const inlineScript = document.createElement("script");
13		inlineScript.innerHTML = `
14      var test = {
15        app_id: "APP_ID",
16      };
17    `;
18		inlineScript.setAttribute("data-advertisement", "true");
19		document.body.appendChild(inlineScript);
20
21		// 3. 外部スクリプトの作成（インラインスクリプトの後に確実に実行されるようにする）
22		const externalScript = document.createElement("script");
23		externalScript.src = "https://some-ad.js";
24		externalScript.setAttribute("data-advertisement", "true");
25		document.body.appendChild(externalScript);
26
27		// クリーンアップ関数
28		return () => {
29			for (const script of document.querySelectorAll(
30				'script[data-advertisement="true"]',
31			)) {
32				script.remove();
33			}
34		};
35	}, [])
36
37	return (
38		<div
39			id="ad-container"
40			style={{ width: "100%", minHeight: "100px" }}
41		/>
42	);
43}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

public/test.html というファイルを作成して http://localhost:5173/test.html にアクセスしたところ広告が表示されました。

よって以下2点がわかりました。

ブラウザのAdBlock機能によって表示がされていないわけではない
app_id が適切であること

また、ブラウザのNetrworkを見る限り https://some-ad.js は正常にダウンロードできています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>広告テスト</title>  
7</head>
8<body>
9  <h1>広告テスト</h1>
10  <script type="text/javascript">
11    var test = {      
12      app_id: "APP_ID",      
13    };
14  </script>
15  <script type="text/javascript" src="https://some-ad.js"></script>
16</body>
17</html>

どなたかぜひお力添えいただけるととても助かります！
よろしくお願いします🙇🏻‍♂️

補足

React: 18.3.1

行動規範の内容に同意します

回答1件

ベストアンサー

開発ツールのコンソールタブで、エラーは何も表示されてませんか？

CSP の設定、もしくは、動的読み込みでの document.write の問題等が考えられます、
通常のウェブブラウザの場合は恐らく後者

問題の原因
該当の JS ファイル内で document.write が使われている為、
動的に読み込む JavaScript では期待通りに機能しません。

解決策の提案

Writing HTML content with document.write from external script in React
- iFrame
「え!? jsの遅延ロードで document.write 動かないんですか!? 」からの解決方法
- postscribe の導入 ... 対象の JS ファイルによっては、使えるかは解りませんが。

他の環境では、「外部スクリプトの動的な読み込み」をする場合に、
Content-Security-Policy の script-src の設定が必要なこともありました。
何れの場合もエラーに詳細が記載されるはずです。
→ Network で正常な読み込みを確認されてるなら、該当しなさそうなので取消。

投稿2025/02/18 12:29

編集2025/02/18 13:00