Day31 なんで Google Adsense 表示されないの?その2

今日は昨日からの続きです。

昨日からなんでだろーー!って思って調べている Google Adsense 表示されない問題。なんと昨日から今日までにかけて1度だけ成功しているパターンがあったっぽいのです。
証拠はこちら

どの設定のときじゃーーーーーー!

さて、わたしのほうの仮説もいろいろ変動してきました。問題点は2つです。

1つ目は、adsbygoogle.js が削除されちゃう?のかどうか。

2つ目は、Advanced Ads の設定が悪くて、adsbygoogle.js が表示されていないのではないか?

さて、1つ目を解消するために、ソースコードを見てみましょう。

まず、思い切って、Advanced Ads プラグインをいったん削除しました。設定も同時に削除するチェックを入れました。そのため、客観的に判断できると思います。

外観>テーマエディターから、いま使っている Theme のファイルの内容を変更できますので、してみます。

Twenty Nineteen: 個別投稿 (single.php) の section の前後に aaaaa bbbb を入力してみます。

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

aaaaaa <?php // ←追加したところ ?>

<section id="primary" class="content-area">
<main id="main" class="site-main">
<?php
// ゴニョゴニョ
?>
</main><!-- #main -->
</section><!-- #primary -->

bbbbbb <?php // ←追加したところ ?>

<?php
get_footer();

これをベースに、記事を見ます。

タイトルの下の部分と、コメントの下の部分にそれぞれ、aaaaとbbbbが挿入されました。この修正内容はトップページには表示されなかったということで、投稿にのみ効いていると思いました。なのでこのまま進みましょう。

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

aaaaaa <?php // ←追加したところ ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- スクエアレスポンシブ(記事上) -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<section id="primary" class="content-area">
<main id="main" class="site-main">
<?php
// ゴニョゴニョ
?>
</main><!-- #main -->
</section><!-- #primary -->

bbbbbb <?php // ←追加したところ ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- スクエアレスポンシブ(記事下) -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<?php
get_footer();

次にこの aaaaa と bbbbb のところに、Google Adsense 広告に置き換えてみます。

ここで表示してみたところ、やっぱり出ていません。ソースコードを見てみると、やはり表示されません!

先ほどソースコードをお見せしましたが、その場所の adsbygoogle.js が呼び出されていないようです。えーー?

script async とは??

<script>: スクリプト要素https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script

HTML の <script> 要素は、実行できるコードを埋め込んだり参照したりするために使用されます。ふつうは JavaScript のコードの埋め込みや参照に使用されます。

<script> 要素は WebGL の GLSL shader プログラミング言語等の他の言語にも使用することができます。
この要素にはグローバル属性があります。

asyncHTML5 これは論理属性で、可能であればスクリプトを非同期で読み込むべきであることを示します。

この属性は src 属性がない場合 (つまり、インラインスクリプトの場合) に使用してはいけません。そのような場合は効果がありません。

ブラウザーはふつう、最も悪いシナリオを想定し、 HTML の解釈中は同期的にスクリプトを読み込みます (つまり、 async="false" です)

(document.createElement() を使用して) 動的に挿入されたスクリプトは、既定で非同期に読み込まれますので、同期的に読み込まれる (すなわち挿入順に読み込まれる) スクリプトには async="false" を設定してください。
ブラウザーの対応状況についてはブラウザーの対応をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。

うおおおおん。async はインライン要素内では使えないんですって!

ついでにこんな記事も見つけました。

script要素の新常識・安易にdefer/async属性を付けてはいけない。

script要素の新常識・安易にdefer/async属性を付けてはいけない - Qiita # script要素の位置とasync/defer `script`要素は`body`の末尾に記述するのが定説ですが、あるサイトについて`script`要素の記述位置や`async`/`defer`が及ぼすパフォーマンスへの影響を実...
 qiita.com

以下の点を注意しながら使っています。うろおぼえなので別の機会にプラクティスをまとめてみたいところです。

インラインスクリプトにはasyncが使えないので注意。loadイベントにくるむなど実行遅延が必要かも。DOMContentLoadedイベントを受け取れない。その後にスクリプトが実行されるので当然ながら。jQuery.readyは問題なし。document.readyStateを見て、読み込み後であれば即時実行するから。JavaScriptに依存するレイアウトは少なくともファーストビューでは避ける。カルーセルスライダーなどはJavaScriptオフでも表示崩れがないものを使う。asyncを付けた要素間の実行順序は入れ替わる可能性があるので依存関係には要注意。ただしChromeでは今のところ実行順序の入れ替わりが確認できないので詳細は要調査。

だそうです。ということは、async を外してみたらどうかな?

<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

うーんこれでも adsbygoogle.jp を表示することがダメかああーーなんでだ??

うーん。またあしたも続きやります。。。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください