【Adsense】非同期リンク広告を可変にしてレスポンシブデザインに対応させる

Pocket

 Adsenseにレスポンシブデザイン用の広告ユニットが登場して久しいですが、リンク広告は自動で可変しないので横幅に合わせて分岐処理を書かないといけません。

 広告コードの修正に関してのサンプルと注意点はAdsenseのヘルプに書かれていますが、非同期のリンク広告に関しては、少し中途半端な記述になっていると思います。特に、リンク広告を 468×15 から 200×90 に切り替える時にはどうしたら良いのか迷ってしまいます。

 パッと見たところでは日本語の記事は見当たらず、Digital Internals にちょっと見栄えの悪いコードが投稿されていたので、もう少し見栄え良くスマートに書けないかと試行錯誤してみました。

 まず、コードの説明の前に大切なことを1つお伝えしておきます。広告コードを修正するときには、やってはいけないことがあり、明文化されています。

  • 1.display:none などを使用して広告ユニットを隠す(ただし、レスポンシブ広告ユニット)を実装している場合を除きます)
  • 2.コンテンツを覆い隠すような方法で AdSense 広告コードを設定する
  • 3.何らかの方法で 1 ページに 4 つ以上の AdSense 広告ユニットを表示する
  • 4.非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する
  • 5.メールやソフトウェアで広告を配信する
  • 6.広告ユニットをフロート表示させ、ユーザーの注意を不当に引き付ける

 また、リンクユニットのコード修正に関してはアドセンスチームから許可がおりてます。

 上記のことから公開するコードは個人的には規約違反ではないと自信満々ではありますが、各自自己責任で使用してください。コード使用の結果として発生した損害は負えませんのであらかじめご了承ください。

 それでは、リンク広告のコード修正でレスポンシブに対応する記述方法と説明です。

 まずは最終形のコードから公開です。感の良い方はこれだけでご理解いただけるかと思います。

 それでは説明をしていきます。今回は、表示横幅が960px以上の場合は 468×15 、960px未満の場合は 200×90 のリンク広告を表示するようにしました。

 まずは、adsenseの管理画面で 468×15 と 200×90 のリンク広告をそれぞれ作ってください。出来た非同期のコードはこんな感じになると思います。

 4行目から7行目,15行目-18行目をハイライトしていますが、2つの広告コードをよく見ると、この<ins>タグのアトリュビュート以外に違いがありません。もっとよく見ると、

 style の width, height と data-ad-slot の3つの値が違うだけとなっています。ということは、この3つの要素の値を書き換えれば良いということです。逆に言うと、他は固定ですから、まずは書き換える部分だけを消したコードを作ってしまいます。

 あとは、条件に合わせて width, height, data-ad-slotの値を入れれば完成です。しかし、どう挿入していいのか謎ですよね。それは、

 で実現いたします。この部分が何をしてるのかよくわからなかったのですが、Google提供のサンプルコードを見ていると、<ins>タグ内のアトリュビュート、もしくはエレメントを書き換えることが可能なようです。「window.adsbygoogle || []」は window.adsbygoogle を新しい配列にコピーしたということでしょうか?わかる方、後学のためにご教示ください。

 <ins>タグ内の書き換え方としましては、paramsキーを使います。

 となります。width が google_ad_width、height が google_ad_height、data-ad-slot が google_ad_slot に対応しています。あとは、任意で作成した配列google_ads_paramsに[width,height,data-ad-slot]の順序で、条件にあった値を入れれば完成です。今回は横幅を960pxに基準を定めると決めましたので、このようなJsになります。

 となり、一番初めに書いた完成形のコードが出来上がったわけです。以上が、非同期のリンク広告をレスポンシブデザインに対応するように切り替えるためのコードとなります。

 より細かく切り替えたい方は、リンク広告の種類を沢山作り、画面の横幅で条件分岐を増やせば良いです。また、div の横幅に合わせて可変させる事も可能です。

 問題点というか、どうしようもない点としては、ブラウザのウィンドウの幅が可変できる場合に、可変しても広告コードが切り替わらないという点だけです。これは、同一ページ上での動的な再読み込みと解釈されると Adsense の利用規約に引っかかると思うので諦めています。

 それでは、みなさん、良いインターネットライフをお楽しみください。

Pocket

コメントを残す

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


*