LoginSignup
@noge2000

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Javascriptの変数にAdsenseコードを格納して呼び出したい

Q&A

JavaScript

解決したいこと

WordPress固定ページ内でJavascript変数strにAdsenseコードを格納して、その後呼び出して表示させたいのですが、エスケープの記述の仕方が悪いのか何も表示されません。
レベルの低い質問でお恥ずかしい限りなのですが、正しく表示される記述を教えていただけると幸いです。

※他のAdsenseコードは同ページ内で既に安定して表示されている状態です

該当するソースコード

Javascript

#【格納したいコードの文字列】
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-〇〇〇〇〇〇〇"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-〇〇〇〇〇〇〇"
     data-ad-slot="△△△△△△△"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
# ============


<script>
let str = '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-〇〇〇〇〇〇〇"\n';
str += '     crossorigin="anonymous"><\/script>\n';
str += '<ins class="adsbygoogle"\n';
str += '     style="display:block"\n';
str += '     data-ad-client="ca-pub-〇〇〇〇〇〇〇"\n';
str += '     data-ad-slot="△△△△△△△\n';
str += '     data-ad-format="auto"\n';
str += '     data-full-width-responsive="true"></ins>\n';
str += '<script>\n';
str += '     (adsbygoogle = window.adsbygoogle || []).push({});\n';
str += '<\/script>\n';
document.write(str);
</script>

自分で試したこと

Webで調べてみたところ、同様にJavascriptの変数にAdsenseコードを格納した方がいまして、その方のページを参考にしました。
https://xn--web-s70e101eh74aq95bj6d.xn--vcki1fxh883oon2c.com/%E8%A8%98%E4%BA%8B/77/

そのページ内で
・改行文字のエスケープ
・scriptタグ前のバックスラッシュのエスケープ
が必要な旨があったので模倣しましたが、うまく表示されず詰まっている状況です。
scriptタグまわりの記述に問題があると思って色々試しているのですが。。。

ご教授どうか宜しくお願いいたします。

【2023/11/20 13:59追記】
コード一部修正しました。
加算代入演算子を使用し、全角スペースを排除しました。

0 likes

3Answer

HalHarada
@HalHarada
<ins class="adsbygoogle"
     style="display:block"

str = str　+ '<ins class="adsbygoogle"';
str = str　+ '     style="display:block"';

そもそも、HTMLは改行不要です。

str += '<ins の表記できたような。。

script async src=。。。のasyncは重いコンテンツでその威力を発揮しますが、この場合ロード前に、実行され、メソッドが無いでエラーになるのでは？

document.write(str);

document.queryselector("#···").innerHTML = str;

私ならinnerHTMLを用います。

0Like
SurferOnWww
@SurferOnWww

他のAdsenseコードは同ページ内で既に安定して表示されている状態です

「他のAdsenseコード」とどう違うのでしょう？

【追記 2023/11/21 12:55】

下のコメント欄で「あとで、ご参考に、自分が試した結果を追記しておきます」と書いた件です。

要求・応答を Fiddler などのキャプチャツールで見るとか、ブラウザで開発者ツールを使ってみるとかして、うまくいく場合とダメな場合の違いを調べるとそこにヒントが見つかるかもしれません。

自分の開発環境（Windows 10, IIS Express, localhost）で、質問に書いてあったコードの下の方のスクリプトを以下のように html にコピペして試してみました。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        let str = '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-〇〇〇〇〇〇〇"\n';
        str += '     crossorigin="anonymous"><\/script>\n';
        str += '<ins class="adsbygoogle"\n';
        str += '     style="display:block"\n';
        str += '     data-ad-client="ca-pub-〇〇〇〇〇〇〇"\n';
        str += '     data-ad-slot="△△△△△△△\n';
        str += '     data-ad-format="auto"\n';
        str += '     data-full-width-responsive="true"></ins>\n';
        str += '<script>\n';
        str += '     (adsbygoogle = window.adsbygoogle || []).push({});\n';
        str += '<\/script>\n';
        document.write(str);
    </script>
</head>
<body>
</body>
</html>

結果、Fiddler で要求・応答をキャプチャして内容を見ると以下のように pagead2.googlesyndication.com に要求が出て、200 応答が返ってきて JavaScript がダウンロードされ、

fiddler.png

スクリプトが動いて以下のように DOM が書き換えられます。(Chrome の開発者ツールの画像）

ad.png

そこからさらに要求が出て広告が表示されるということのようですが、要求に対して 400 Bad Request 応答が返ってきて失敗しています。

ad2.png

以上、ダメな場合ですが、これとうまくいく場合の結果とを比較すると、そこにヒントが見つかるかもしれません。

0Like

Comments

  1. @noge2000

    Questioner

    お返事ありがとうございます。

    ＞「他のAdsenseコード」とどう違うのでしょう？
    WordPress投稿画面にて直接コードを書き込んだものは当たり前ですが正しく表示されていて、今回実現させたい「Javascriptで一度変数に格納してから出力したい」がうまくいってない状況です。

    Adsenseはページに埋め込んだ直後は広告表示が不安定ですが、それが原因ではないという意味で「他のAdsenseコードは同ページ内で既に安定して表示されている状態です」と追記させていただきました。

  2. @SurferOnWww

    質問者さんのスクリプトをコピペして試してみましたが、動いてはいます。正しく動いているかどうかは分かりませんが。ブラウザの開発者ツールで、うまくいく場合とダメな場合の結果を比較してみてはいかがですか。そこに解決のためのヒントが見つかるかも知れません。

    あとで、ご参考に、自分が試した結果を追記しておきます。

  3. @noge2000

    Questioner

    ありがとうございます。
    開発者ツールのほうで試してみたいと思います。

STSynthe
@STSynthe

正しく表示される記述を教えて

エスケープの記述の仕方が悪い

そうです。エスケープの記述不足です。

あなたは

バックスラッシュのエスケープ

と自分でヒントを書いているにもかかわらず提示されてるコード src="https://pagead　や</ins> の各所でエスケープもれがあります。よく確認なさって下さい。

それと QiitaのMarkdownのコードでも警告されてるはずですが

str = str　+ '...';

str　+に全角スペースをまぜるのは辞めましょう。そして冗長なので

str += '...';

+=加算代入演算子を使いましょう。意味は同じですが前者の方法では諄いです。

文字エスケープについても再確認しましょう。

この間違いはちゃんとしたエディタ（VSCなど）を使えば警告してくるので防げた問題です。WPのプレーンなフォームで直打ちしてしまうのは避けましょう。

0Like

Comments

  1. @noge2000

    Questioner

    お返事ありがとうございます。

    全角スペースの混在、大変失礼しました。申し訳ありません。
    また他の方からもありましたが加算代入演算子についてもご指摘ありがとうございます。

    スラッシュのエスケープについてですが、格納する文字列内スラッシュをすべてエスケープしてもやはり表示はされませんでした。

    格納する文字列を例えば

    str = '<a href="https://www.google.com/">google</a>'

    とした場合には正しく表示されるので、スラッシュのエスケープが問題になっているわけではなさそうなのです。。。

  2. @STSynthe

    日本語版MDNには書かれていませんがdocument.write()の使用は推奨されてません。よってすべてのブラウザで動作的な保証もないために

    結果、scriptタグにasyncが指定されてると無視される現象が発生する。

    可能であればPHP側（プラグイン制御）でタグ出力させるのが望ましいです。

    同期方式に置き換えるなら可能性はあります。
    https://support.google.com/adsense/answer/9183243?hl=ja

  3. @noge2000

    Questioner

    ありがとうございます

    asyncが指定されてると無視されるというのは可能性高そうですね。
    同期方式と合わせていろいろ試してみたいと思います。

Your answer might help someone💌

LoginSign Up