画面を更新することなくAdsense広告を切り替える方法。

いつもお世話になっています。

現在、黒色から白色へJavascriptで切り替えるWebサイトを実装しており、その際に同時に画面を更新することなくGoogleのAdsense広告も変更ができたらと取り組んでいます。
ユーザーが画面を更新した際には、phpからcookieを判定することで広告の切り替えに成功しているのですが、画面を更新せずにAdsenseを変更することは可能でしょうか。

Javascriptを用いて以下のように設定してみましたが、<script>タグの部分に入るとエラーではじかれてしまいました。

<!-- HTML -->

<p id="black_color">黒色</p><!-- ここをクリックでJavascriptを適用させます。 -->
<!-- ここにGoogleの広告が入っていますます。 -->
<div class="ads_area">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-********"
     data-ad-slot="********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<!-- Javascript -->

<script>
document.getElementById('black_color').addEventListener('click' ,function(){
	let val = document.getElementById('ads_area');

    //　ここで切り替えを試みましたが、<script>がエラーではじかれました。
	val.innerHTML = `<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-********"
     data-ad-slot="********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>`;
});
</script>

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

回答1件

ベストアンサー

GoogleのAdsense広告を画面を更新させることなく切り替える最適な方法

は、分からないのですが、何か参考になればいいなと思って回答してみますね。。。

「エラーではじかれた」というのが、どんな状況なのか不明ですが、
まず見た感じ、javascript的にエラーになっているのではないかと思います。

javascript
1    val.innerHTML = `<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
2<ins class="adsbygoogle"
3     style="display:block"
4     data-ad-format="autorelaxed"
5     data-ad-client="ca-pub-********"
6     data-ad-slot="********"></ins>
7<script>
8     (adsbygoogle = window.adsbygoogle || []).push({});
9</script>`;

</script>の締めタグを勘違いされないよう、バッククォート内の「</script>」の「/」をエスケープしてあげないとダメそうです。

ただし、上記の問題が解決できたとしても・・・。

.innerHTMLに「文字列の<script>タグ」を入れたところで、
ただ「html上の文字列（<script>タグなので画面上には見えない）」にしかならないので、
scriptの処理も実行させたいならcreateElementとかで要素作って追加すべきかと思われます。

例えば、下記のコードの場合、
「黒色を押したよ」のアラートは表示されますが、
「赤色を押したよ」のアラートは表示されません。

html
1<html>
2<head>
3<meta charset="UTF-8">
4<title>test</title>
5</head>
6<body>
7<p id="black_color">黒色</p>
8<p id="red_color">赤色</p>
9<div id="ads_area">
10</div>
11<script type="text/javascript">
12//黒色
13document.getElementById('black_color').addEventListener('click' ,function(){
14	let val = document.getElementById('ads_area');
15        val.innerHTML = '';
16	
17	let s = document.createElement('script');
18	s.innerHTML = `alert("黒色を押したよ");`;
19	val.appendChild(s);
20});
21
22//赤色
23document.getElementById('red_color').addEventListener('click' ,function(){
24	let val = document.getElementById('ads_area');
25	val.innerHTML = `<script>alert("赤色を押したよ");</script>`;
26});
27</script>
28</body>
29</html>