Barba.js(Pjax)でGoogle Adsenseを遷移毎に表示する方法

Barba.jsを使用してサイト作成を行った場合、画面遷移ごとに広告が読み込み直されず、真っ白になってしまいます。この記事ではBarba.jsを使用したサイトでGoogle広告をページ遷移ごとにうまい具合に表示する方法について解説しています。

解決方法の候補

その1. Javascriptで広告退避

まず画面遷移前にJavaScriptで広告のHTMLを一度退避し、画面遷移後に再び広告をあるべき場所に挿入する方法を考えましたが、結果から言うとこちらは試していません。理由としては、画面がページごとに動的に変わる場合制御が複雑になるためです。こちらは奥の手として取っておくとして、他の方法を探したところ2が見つかりました。

その2. GoogleアドマネージャーのAPIを使用して広告の再表示を行う

GoogleアドマネージャーのAPIを使えば広告の表示が実装できることがわかりこちらを利用することにしました。

Googleアドマネージャーって何?
Googleアドマネージャーとは…
Googleアドマネージャーとはホスト型の総合的な広告配信プラットフォームです。アドマネージャー上で広告の掲載や出稿を行うことができます。また、GoogleアドマネージャーとGoogle Adsenseは連携されているため、Google Adsenseに登録されている広告もアドマネージャー経由で自動的に掲載する事ができます。
注意 アドマネージャーはディスプレイ広告専門なので、Infeed広告は取り扱っていません。

Step 1. Googleアドマネージャーへの登録

では早速始めていきましょう。まずはGoogleアドマネージャーに登録する必要があります。
Googleアドセンスの審査が通っていれば、アドマネージャーの審査は問題なく通ります。
以下のURLから登録を行なってください。

Google Ad Manger

Step 2. 広告表示のためのコードを取得

Googleアドマネージャーに登録した後は、まず表示する広告を作成しましょう

広告ユニットの作成

広告ユニット作成しましょう。
以下の画像に従って広告ユニットを作成してください。

新しいユニット作成
新しい広告ユニットから「現在のレベル」を選択してユニットを作成します。

広告作成1
画像サイズは設置する部分に合わせて適宜選択しましょう。

広告作成2
更新頻度は『更新しない』を選択してください。

広告タグの作成

次に先程作成したユニットから広告のタグの作成を行います。

GoogleAdタグ作成1
先程作ったユニットを選択し、タグを作成をクリックします。

GoogleAdタグ作成2
デフォルトのまま進んで問題ないので、そのまま『次へ』を押しましょう。(タグタイプは『Googleサイト運営者タグ』になっているはずです。)

GoogleAdタグ作成3
広告のタグが作成できたら、2つのスクリプトのコピーと以下の情報をメモしておきましょう。

  • 広告パス
  • 広告サイズ
  • 広告ID

これで実装の準備ができました。
次にこれらの情報を使ってBarba.jsを使用した広告を表示を行います。

ちなみにGoogleアドマネージャーのAPIリファレンスはこちらをご覧ください。

Google Ad Manger APIリファレンス

Step 3. まずは広告が表示されるか確認しましょう。

まずは、広告が問題なく表示されることを確認しましょう。
先程コピーしておいたスクリプトをそれぞれHeadタグ内と広告を表示したい場所に貼り付けて表示されるかを確認します。

Headタグ内への記述

まずは広告表示に必要なスクリプトの読み込みをHeadタグ内に貼り付けます。

広告を表示したい場所にへの埋込

次に広告を表示したい場所に先ほど取得したHTMLをペーストします。
この段階では画面をリロードした時のみ広告が表示されるようになります。

注意 Googleアドマネージャーの反映には2時間から遅くて半日ほどかかります。

Step.4 Barba.jsとアドマネージャーの連携

先程の工程で問題なく表示されることが確認できたら、いよいよBarba.jsと連携を行います。

Step1. 画面遷移前に広告表示をクリア

まず画面遷移前に広告の表示をクリアします。以下のコードを参考にしてください。

画面遷移後に広告の更新及び表示を行います。

画面遷移後に広告の更新と表示を行います。
広告の更新(update)、画面ごとに異なる広告を出すために実装し、広告の表示は画面遷移後に非表示となっている広告を再表示するために使用します。
では以下のコードを参照ください。

これで画面遷移ごとにGoogleの広告が表示されるようになったと思います。

あとがき

こちらのサイトで配布しているBarba.js内蔵テーマの『Pjax Blog』なら、Googleアドマネージャー表示ウィジェット(有料版でのみ)がありますので簡単に設定することができます。

最新記事