Google Adsenseが表示されない問題を解決してみた

はやり目が全然なおらずに、在宅勤務が続いているHeyGです。

以前投稿していた

Google Adsenseをレスポンシブにしてみた

Google Adsenseをレスポンシブにしてみた

この記事にて、

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

とか出たときに

$(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})

を書けばいけるじゃないかと言っている記事があり、

そんなわけあるかい！

と突っ込んでいましたが

いけました。

ということで、どうやったのか忘れないためにも書いていこうと思います。

1. Google Adsenseが表示されない理由
2. Google Adsenseに高さや幅が設定されるタイミング
3. Google Adsenseタグを正しく設置する
4. まとめ

Google Adsenseが表示されない理由

そもそもここを履き違えていました。

正常に表示される流れとしては

Adsenseとして挿入したタグ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- carousell -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-hogehoge"
     data-ad-slot="hogehoge"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

の順番が来たら読み込まれ表示される。

もし高さや幅をパーセント指定などにしていた場合は

設置した親要素

<div class="parent-div" style="width:300px;height:250px">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- carousell -->
  <ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:100%"
     data-ad-client="ca-pub-hogehoge"
     data-ad-slot="hogehoge"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

上記なら.parent-divから高さや幅を参照して表示してくれる。

上記を行っているにも関わらず、表示されない理由は

.parent-divの親要素などの高さや幅が0だった場合、.parent-div に高さや幅を設定したからと言って必ずしもパーセント指定が有効に働くわけではない。

ということ

なので

Google Adsenseを設置した親要素が適切なタイミングできちんと表示される枠(高さや幅)を保持しているか

が重要

この適切なタイミングというのがミソだったことを私は理解していませんでした。

Google Adsenseに高さや幅が設定されるタイミング

私のブログのadsenseも全くと言っていいほど表示されなくなっていたので

よくよくじーっとコードを見つめてみました…

そして私は気づいてしまいました。

(adsbygoogle = window.adsbygoogle || []).push({});

このコードの存在に…

pushって書いてあるじゃないですか…

しかも丁寧にadsbygoogleって名前までつけてくれてるのに

なんで気づかなかったんでしょうね

よく分かるかいせつー。

pushというのはプログラムの世界で言うと

指定した要素などを追加することを指している。

例えていうなら

箱があって、そこにおもちゃを入れていく場合

箱.push(おもちゃ)

となるわけだ

なので前述の

(adsbygoogle = window.adsbygoogle || []).push({});

このコードは

Google Adsenseの箱に新しい要素を追加しちゃうよ

という事になる。

コードが実行されたタイミングである程度の初期化処理が走っているというわけ。

中身のコードを見ていないので、殆どが推測になるが

(adsbygoogle = window.adsbygoogle || []).push({});

を遅延させて読み込み、表示されない問題を解決させていた

$(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})

これらは複数のGoogle Adsenseが使われている場合におかしな挙動になる。

それは以下のように

<html>
<head>
  <link rel="stylesheet" href="http://example.com/example.css">
  <script src="http://example.com/jquery.min.js"></script>
  <script src="http://example.com/example.js"></script>
</head>
<body>
  <div class="test-block1">
    テスト1要素
      <div class="adsnese1">
        // 一つ目のGoogle Adsense
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:inline-block;width:100%;height:100%"
             data-ad-client="ca-pub-hogehoge"
             data-ad-slot="hogehoge"></ins>
        <script>
          $(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})});
        </script>
      </div>
  </div>
  <div class="test-block2">
    テスト2要素
      <div class="adsnese2">
        // 二つ目のGoogle Adsense
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:inline-block;width:300px;height:250px"
             data-ad-client="ca-pub-hogehoge"
             data-ad-slot="hogehoge"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
  </div>
</body>
</html>

としてしまうと、

一つ目のGoogleAdsenseが、二つめのpushで初期化されてしまい挙動がおかしくなってしまう

というもの

ここまで分かればあとは簡単

Google Adsenseタグを正しく設置する

Google Adsenseタグ自体は前述した

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- carousell -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-hogehoge"
     data-ad-slot="hogehoge"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のコードになる。

Google Adsenseを複数設置する場合でも

このコードをコピペすれば問題なく動くだろう。

しかし、もう少し短くできる

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-hogehoge"
     data-ad-slot="hogehoge">
</ins>

こんな具合だ

あれ？scriptとか読み込んであげないの？

と思った方も多いかもしれないが

(adsbygoogle = window.adsbygoogle || []).push({});

を毎回記述してしまうことこそが、諸悪の根源ということを忘れてはいけない。

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

こちらに関してはfooterなどでJSファイルを読み込んだ後にでも一回だけ記述すれば問題ない

最終的な形としては

<html>
<head>
  <link rel="stylesheet" href="http://example.com/example.css">
</head>
<body>
  ...
  ...
  ...
  ...
  <script src="http://example.com/jquery.min.js"></script>
  <script src="http://example.com/example.js"></script>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    $(window).load(function() {
      $('ins.adsbygoogle').each(function() {
        (adsbygoogle = window.adsbygoogle || []).push({});
      });
    });
  </script>
</body>
</html>

このようにすれば問題なく動作する。

$(‘ins.adsbygoogle’).each(function() {
(adsbygoogle = window.adsbygoogle || []).push({});
});

この部分は

<ins class=”adsbygoogle”>

となっているものの数だけpushしましょうという意味

$(window).load

にした訳としては、広告自体を直ぐに表示させたいシチュエーションは余りないだろうし

何分もまたないと表示されない訳ではないからだ。

あわせて、プラグインを使っている場合など、どのタイミングで実行しているかを把握する必要もなくなってくる。

まとめ

コピペばかりして、理解せずに実装していると、どつぼにはまるよ

コードはきちんと読んで、適切に実装しましょう。

それではまた。

Google Adsenseが表示されない問題を解決してみた

Google Adsenseが表示されない理由

Google Adsenseに高さや幅が設定されるタイミング

Google Adsenseタグを正しく設置する

まとめ

開発カテゴリの最新記事

Azureの既存VMをSSL対応してみた

WooCommerceの表示文字を変更してみた

Google Adsenseが表示されない問題を解決してみた

WordPressでKeyCDNからCloudFrontに乗り換えてみた

WordPressでKeyCDNを使ってみた

Facebookページの投稿にAPIでいいねしてみた