teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップTypeScriptに関する質問Reactで動的にscriptタグを追加して広告を表示したい

編集履歴

質問編集履歴

6

文言の修正

2025/02/18 16:46

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,18 +1,15 @@
1
1
  ### 実現したいこと
2
- HTML書かれている以下のscriptタグを、Reactで埋め込むことでページ内にAdstirの広告を表示したいです🙇🏻‍♂️
2
+ HTML書かれている以下のscriptタグを、Reactで埋め込むことでページ内に広告を表示したいです🙇🏻‍♂️
3
3
 
4
4
  HTMLファイルでは正しく表示できることが確認できていますが、Reactではうまく表示できていません。
5
5
 
6
6
  ```html
7
7
  <script type="text/javascript">
8
- var adstir_vars = {
8
+ var test = {
9
- ver: "4.0",
10
- app_id: "MEDIA-xxxxxx",
9
+ app_id: "APP_ID",
11
- ad_spot: 1,
12
- center: false
13
10
  };
14
11
  </script>
15
- <script type="text/javascript" src="https://js.ad-stir.com/js/adstir.js"></script>
12
+ <script type="text/javascript" src="https://some-ad.js"></script>
16
13
  ```
17
14
 
18
15
  ### 発生している問題・分からないこと
@@ -23,13 +20,11 @@
23
20
  ### 該当のソースコード
24
21
 
25
22
  ```tsx
26
- export function AdstirAd() {
23
+ export function AdComponent() {
27
- const appId = "MEDIA-xxxxxx";
28
-
29
24
  useEffect(() => {
30
25
  // 1. 既存のスクリプトがあれば削除（再レンダリング時の対応）
31
26
  const existingScripts = document.querySelectorAll(
32
- 'script[data-adstir="true"]',
27
+ 'script[data-advertisement="true"]',
33
28
  );
34
29
  for (const script of existingScripts) {
35
30
  script.remove();
@@ -38,26 +33,23 @@
38
33
  // 2. インラインスクリプトの作成
39
34
  const inlineScript = document.createElement("script");
40
35
  inlineScript.innerHTML = `
41
- var adstir_vars = {
36
+ var test = {
42
- ver: "4.0",
43
- app_id: "${appId}",
37
+ app_id: "APP_ID",
44
- ad_spot: 1,
45
- center: false
46
38
  };
47
39
  `;
48
- inlineScript.setAttribute("data-adstir", "true");
40
+ inlineScript.setAttribute("data-advertisement", "true");
49
41
  document.body.appendChild(inlineScript);
50
42
 
51
43
  // 3. 外部スクリプトの作成（インラインスクリプトの後に確実に実行されるようにする）
52
44
  const externalScript = document.createElement("script");
53
- externalScript.src = "https://js.ad-stir.com/js/adstir.js";
45
+ externalScript.src = "https://some-ad.js";
54
- externalScript.setAttribute("data-adstir", "true");
46
+ externalScript.setAttribute("data-advertisement", "true");
55
47
  document.body.appendChild(externalScript);
56
48
 
57
49
  // クリーンアップ関数
58
50
  return () => {
59
51
  for (const script of document.querySelectorAll(
60
- 'script[data-adstir="true"]',
52
+ 'script[data-advertisement="true"]',
61
53
  )) {
62
54
  script.remove();
63
55
  }
@@ -66,7 +58,7 @@
66
58
 
67
59
  return (
68
60
  <div
69
- id="adstir-ad-container"
61
+ id="ad-container"
70
62
  style={{ width: "100%", minHeight: "100px" }}
71
63
  />
72
64
  );
@@ -88,7 +80,7 @@
88
80
  - ブラウザのAdBlock機能によって表示がされていないわけではない
89
81
  - app_id が適切であること
90
82
 
91
- また、ブラウザのNetrworkを見る限り `https://js.ad-stir.com/js/adstir.js` は正常にダウンロードできています。
83
+ また、ブラウザのNetrworkを見る限り `https://some-ad.js` は正常にダウンロードできています。
92
84
 
93
85
  ```html
94
86
  <!DOCTYPE html>
@@ -96,19 +88,16 @@
96
88
  <head>
97
89
  <meta charset="UTF-8">
98
90
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
99
- <title>Adstir 広告テスト</title>
91
+ <title>広告テスト</title>
100
92
  </head>
101
93
  <body>
102
- <h1>Adstir 広告テスト</h1>
94
+ <h1>広告テスト</h1>
103
95
  <script type="text/javascript">
104
- var adstir_vars = {
96
+ var test = {
105
- ver: "4.0",
106
- app_id: "MEDIA-xxxxxx",
97
+ app_id: "APP_ID",
107
- ad_spot: 1,
108
- // center: false
109
98
  };
110
99
  </script>
111
- <script type="text/javascript" src="https://js.ad-stir.com/js/adstir.js"></script>
100
+ <script type="text/javascript" src="https://some-ad.js"></script>
112
101
  </body>
113
102
  </html>
114
103
  ```
@@ -117,5 +106,6 @@
117
106
  よろしくお願いします🙇🏻‍♂️
118
107
 
119
108
  ### 補足
120
- - Remix: 2.15.0
121
109
  - React: 18.3.1
110
+
111
+
TypeScriptReact.js
Remix

5

文言の修正

2025/02/18 14:55

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -7,7 +7,7 @@
7
7
  <script type="text/javascript">
8
8
  var adstir_vars = {
9
9
  ver: "4.0",
10
- app_id: "MEDIA-e12ff85b",
10
+ app_id: "MEDIA-xxxxxx",
11
11
  ad_spot: 1,
12
12
  center: false
13
13
  };
@@ -24,7 +24,7 @@
24
24
 
25
25
  ```tsx
26
26
  export function AdstirAd() {
27
- const appId = "MEDIA-e12ff85b";
27
+ const appId = "MEDIA-xxxxxx";
28
28
 
29
29
  useEffect(() => {
30
30
  // 1. 既存のスクリプトがあれば削除（再レンダリング時の対応）
@@ -103,7 +103,7 @@
103
103
  <script type="text/javascript">
104
104
  var adstir_vars = {
105
105
  ver: "4.0",
106
- app_id: "MEDIA-e12ff85b",
106
+ app_id: "MEDIA-xxxxxx",
107
107
  ad_spot: 1,
108
108
  // center: false
109
109
  };
RemixTypeScriptReact.js

4

文章の更新

2025/02/16 14:02

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,7 @@
1
1
  ### 実現したいこと
2
- Remix（React）を使用しています。
3
- 以下のコードを埋め込むことでページ内にAdstirの広告を表示したいです🙇🏻‍♂️
2
+ HTML書かれている以下のscriptタグを、Reactで埋め込むことでページ内にAdstirの広告を表示したいです🙇🏻‍♂️
3
+
4
+ HTMLファイルでは正しく表示できることが確認できていますが、Reactではうまく表示できていません。
4
5
 
5
6
  ```html
6
7
  <script type="text/javascript">
@@ -13,8 +14,6 @@
13
14
  </script>
14
15
  <script type="text/javascript" src="https://js.ad-stir.com/js/adstir.js"></script>
15
16
  ```
16
-
17
-
18
17
 
19
18
  ### 発生している問題・分からないこと
20
19
  ググったりAIに聞いたりしながら以下のようなコードを作成してみましたが、何も表示されません...。
RemixTypeScriptReact.js

3

文章の更新

2025/02/16 13:58

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -89,6 +89,8 @@
89
89
  - ブラウザのAdBlock機能によって表示がされていないわけではない
90
90
  - app_id が適切であること
91
91
 
92
+ また、ブラウザのNetrworkを見る限り `https://js.ad-stir.com/js/adstir.js` は正常にダウンロードできています。
93
+
92
94
  ```html
93
95
  <!DOCTYPE html>
94
96
  <html lang="ja">
RemixTypeScriptReact.js

2

文章の追加

2025/02/16 09:49

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
 
19
19
  ### 発生している問題・分からないこと
20
- 以下のようなコードを作成してみましたが、何も表示されません。
20
+ ググったりAIに聞いたりしながら以下のようなコードを作成してみましたが、何も表示されません...。
21
21
 
22
22
 
23
23
 
@@ -75,7 +75,7 @@
75
75
  ```
76
76
 
77
77
  ### 試したこと・調べたこと
78
- - [ ] teratailやGoogle等で検索した
78
+ - [x] teratailやGoogle等で検索した
79
79
  - [x] ソースコードを自分なりに変更した
80
80
  - [ ] 知人に聞いた
81
81
  - [ ] その他
RemixTypeScriptReact.js

1

文章の修正

2025/02/16 09:36

投稿

er2_adi
er2_adi

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 実現したいこと
2
2
  Remix（React）を使用しています。
3
- 以下のコードを埋め込むことでページ内にAdstirの広告を表示したいです。
3
+ 以下のコードを埋め込むことでページ内にAdstirの広告を表示したいです🙇🏻‍♂️
4
4
 
5
5
  ```html
6
6
  <script type="text/javascript">
@@ -112,6 +112,9 @@
112
112
  </html>
113
113
  ```
114
114
 
115
+ どなたかぜひお力添えいただけるととても助かります！
116
+ よろしくお願いします🙇🏻‍♂️
117
+
115
118
  ### 補足
116
119
  - Remix: 2.15.0
117
120
  - React: 18.3.1
RemixTypeScriptReact.js