Rails(Turbolinks)でGoogle AdSenseを利用

TurbolinksはPjax(pushState + Ajax)を実現するためのライブラリで、Rails 5では標準で有効になっています。Turbolinksを使うと、ページ遷移時に画面全体の読み込みが行われないため、非常にスムーズな操作性を実現することができます。

しかし、Turbolinksが適用されたサイトにGoogle AdSense(Googleが提供する広告配信サービス)を導入すると、ページ遷移後に広告が正しく表示されない問題が発生する場合があります。

これを防ぐには、Turbolinksによる画面の読み込みをトリガとして、新たに表示された広告ユニットを認識させる処理を加える必要があります。

例えば、自動サイズの広告ユニットを表示させる場合、Turbolinksを適用させていない通常のサイトでは、<head>タグ内に

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

を追加した上で、HTMLの広告を表示させたい場所に次のようなコードを挿入します。一つのページに複数の広告ユニットを表示することも可能です。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

一方、Turbolinksが適用されたサイトでは、<head>内でのadsbygoogle.jsの読み込みは同じですが、広告を表示させたい場所には<ins>タグのみを挿入し、

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

その上で次のコードを<head>タグ内に挿入します。(外部Javascriptファイルに切り出して、読み込ませてもOKです。)turbolinks:loadに対するイベントリスナを設定することで、初回表示時やTurbolinksによる画面遷移時に処理が走ります。

<script>
  document.addEventListener('turbolinks:load', function () {
    var ads = document.querySelectorAll('.adsbygoogle');
    if (ads.length > 0) {
      ads.forEach(function (ad) {
        if (ad.firstChild) {
          ad.removeChild(ad.firstChild);
        }
        window.adsbygoogle = window.adsbygoogle || [];
        window.adsbygoogle.push({});
      });
    }
  });
</script>

ここでは、 adsに格納された<ins>要素を一つ一つ走査し、ブラウザバック等で既に広告の実体が挿入されている<ins>に関しては初期化を行った上で、 window.adsbygoogleに対して空のハッシュを挿入することで、adsbygoogle.jsに対して広告ユニットの存在を知らせています。

以上で、Turbolinksが利用されたサイトでもGoogle AdSenseによる広告が正しく表示されるようになります。

Comment (1) Write a comment

  1. Pingback: RailsでGoogle Adsenseのレスポンシブル広告を表示するやり方 | N-BLOGΣ(゜Д゜)カッ!

コメントを残す

Required fields are marked *.


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

Top