記事内広告を追加したらエラーコードがぽーんとな。モバイル分岐タグを追加でサクッと修正。

記事内に広告を入れるかどうかは結構悩んでいたのですが、やってみてアクセスが悪くなったら取ろうということで、試しに記事内広告を追加することにしました。

で、夜中からああでもない、こうでもないと色々試行錯誤してやっと設置したのは良いのですが、そのせいで新たにエラーコードが出現。

全然別件で検証ダイアログを開いたら、真っ赤に表示されたエラーに思わず頭が真っ白に。

このままでは気持ちが悪いので、取りあえず修正しておくことにします。

出ているエラーはadsbygoogle.push() error:〜ってやつ。……何だこれ?

エラーの文字を見ていても、何を言っているのかさっぱり分かりません。ただコレが、エラーでてるんだってばよっていう感じで、怒られている事だけは分かります。そんな警告アラートの文面がこちら。

エラー

“adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0”,

もうね。何を言ってるのかさっぱりさっぱりですよ。と言うわけで、上記エラーメッセージを翻訳にぺたりしてぽちっとな。

adsbygoogle.js:1 Uncaught N {メッセージ: “adsbygoogle.push()エラー:流体レスポンシブ広告は少なくとも250px幅:availableWidth = 0″、

 
なんか、よく判らんが、広告のことで怒られてるってことらしいぞ。

取りあえず、流体レスポンシブル広告はなんたらとあるので、このエラーが広告関係のものだということは判りました。

さて。ここで寝る前の行動を振り返ってみることにしますよー。

 
確か寝る前に、Ad InserterでPC用記事内広告と、モバイル用の記事内広告を追加したんだよなぁ。

エラーが出る前と後で変わったことはPCとモバイル用の記事内広告をそれぞれ設置したことだけです。

と言うことはつまり、エラーは追加したどちらかの広告の設定によって起きていると言うことは判ります。

 
ならば話は早いはず!

と言うことで次へ↓

まずは、PC/モバイル、それぞれの広告を非表示にして、原因を突き止める。

エラーを修正する前に、まずはPC側のエラーなのか、モバイル側のエラーなのか、それとも両方で起こってる事なのかを確認します。

 
PC側の広告を一端止めて……

PC側の広告を一度停止し、再び検証モード。しかし、エラーの状況は変わりません。

 
ほいじゃ次は、モバイル側の広告を一端停止して……

今度はモバイル側の広告停止ボタンをぽちっとな。で、検証を確認すると、

 
消えた!!

2箇所出ていたエラーが綺麗さっぱり消えました。と言うことは、このエラーはモバイル側の広告によって起きているものだと言う事が判りました。

 
で、これをどう修正しろってか?

…………そんな事言ったら元も子もないって。でも、実際一度ここで詰んでいます。だって、修正してよって言われても、自分で作ったコードじゃないからどうして良いか判らんし。

分岐タグでモバイル側の表示の指定をしてあげよう。

そんなわけで再びぐーぐる先生に教えてプリーズ!です。すると……ありましたよ!解決方法のヒントになりそうな情報が!

東田ダダーンさんも、当サイトと同じようなエラーが表示されたらしく、修正した方法を紹介してくれていました。

【Cocoon】GoogleAdSenseでエラーが出た際にやった事 | 東田ダダーン

表示上は問題なくても、裏側を見るとエラーが出てるなんて事、僕は多々あります。。。ほったらかしにしてると、サイトの表示速度の低下に繋がるかもしれません。今記事では当ブログで発生していたアドセンスのエラーの解決方法について書きます。

記事を読んでみると、こう書かれています。

要はソース上にはアドセンスのコードがあるのに、CSS等でdisplay:noneとかしてるとエラーになるということですね。

 
つまり、指定されているサイズが違うとか、サイズが無いよとかそう言った感じだろうか?

まぁ、詳しいことは分からないので、そのまま読み進めていきましょう。すると、分岐条件がどうこうという項目を見つけました。

何やら、表示したい端末によって、広告をこんな風に表示してねという指定をしておくということらしいです。

この作業は以前にもやった覚えがあります。……そうです!プレビュー画面では広告を表示しないで下さい指定の時の分岐条件ですよ!

一度やったことのある作業なので、やり方は過去記事を見れば何となくわかるはず!

Ad Inserterの編集画面で、分岐条件のwp_is_mobile()を追加すると……

思ったよりも早く解決しそうだと思いながら、Ad Inserterの設定画面へ移動。

分岐タグ-1

今回、エラー修正前に設定していたコードはこの様な感じです。分岐タグは、プレビューでの確認を解除するための【!is_preview()】 で設定していました。

PC作業でモバイルではプレビュー表示をする事がないのであれば、この分岐条件は入れる必要が無いと思いますが、念のためと思い指定していたものです。

とはいえ、記事の新規作成も編集もPCでしか行わないので、特にこの分岐条件って必要ないんですよね、自分の場合。

なので、これをそのまま置き換えることで修正していくことにしました。

修正後のコードはこんな感じ。

分岐タグの修正-2

手順は簡単で、【!is_preview()】という要素を【wp_is_mobile() 】に変更して再保存するだけ。これでエラーメッセージが消えました!やったー!

今回使ったコードはこんな感じです。

スポンサーリンク<br> 
<?php if( wp_is_mobile() ){ ?> 

// ここにモバイルで表示したいアドセンスのコードを貼る 

<?php }; ?>

コードの編集は念のためPHP編集モードで行っておきます。ココをぽちっとな。

php

今回は、PCとモバイルで別の広告を作成し設定してているので【wp_is_mobile()】で分岐条件を設定してモバイルだとこの表示にと切り替えていますが、広告を分け無い場合はこの修正はできないかもしれません。

ただ、PCとモバイルを別で設定している場合、adsbygoogle.push() error:〜というエラーは【wp_is_mobile()】で分岐条件を設定してあげれば修正することができます。

Ad Inserterは、設定画面が日本語化されていないので意味を調べながら触るというめんどくささはありますが、編集画面になれてしまえば操作は簡単に行えるので、是非修正してあげてください。

スポンサーリンク