2021-10-14 2021-10-14
BlogManagement, Google, GoogleAdsense

Google Adsense広告の横長設定の検証と設定方法

大変残念ながら, 本サイトの記事のトップにGoogle Adsense広告を追加しました.

理由は, 本サイト運営の収益化に少しでも近づくと助かるなぁ, です.

ただし, ここで実際に追加してみて困ったことは, Google Adsense広告のサイズです.

Google Adsense広告のディスプレイ広告において,

広告サイズが初期設定のままだと, 結構な縦幅, 横幅の広告が表示されてしまい, サイト自体の可読性が下がります.
一方で, 収益が少しでも出たら助かるので, 広告は追加したい...

そんなアンビバレントな状況にあるため, ひとまず, どうにかして強制的に横長広告を表示する方法がないか調べました.

結論としては,

完璧に強制横長広告にするのは難しいようですが,
iPhone, iPad, PCの大体の表示設定において横長になる設定はできた

というところです.

結論

まず, 結論の設定方法を紹介します.

今回設定するのは, Google Adsense広告のディスプレイ広告における例です.

Google Adsense広告の種類:
ディスプレイ広告
どこにでも設置できることを目的とした広告. 処理速度が早く, ページの表示速度への影響が他の広告よりも早い.
今回設定するもの
インフィード広告
記事一覧のような箇所に, 紛れて追加される広告
記事内広告
記事内に追加できる広告. 処理速度が遅く, ページ表示速度がかなり遅くなるため, 個人的にはあまり使用したくない.
検索エンジン
検索結果のページ内に広告が入ったりするタイプで, 今回の目的とは異なる.

設定方法

広告ユニットの選択

Google Adsenseにログインし, 広告 / サマリーの広告ユニットごとをクリックします.

ディスプレイ広告をクリックします.

ad-types

広告ユニットの作成

左上にある, 広告ユニットの名前を入力 に広告名 (自分がわかれば良いので何でもよいです. 下図ではad-landscape-testとしました) を記入し, 右下の保存をクリックします.

広告サイズはレスポンシブ, 固定の2種類がありますが, 固定にすると広告が表示されないこともあり面倒なので, レスポンシブのままとしています.
ディスプレイ広告のプレビューはあくまでプレビューなので, ここでスクエア, 横長タイプ, 縦長タイプのいずれを選択しても, そのタイプの広告に固定されることはないです.

ad-name

広告のhtmlコード

広告のhtmlコードが表示されます.

これを自分のサイトに埋め込めば, 広告を表示すること自体は可能です.
1つのページに複数の広告を表示する設定方法については, 別記事をご覧ください.

ad-code

広告フォーマットの変更

上記のコードをそのまま貼るだけでは, スクエア, 横長, 縦長のいずれにもなりえます. そこで, コードを下記のように変更します.


変更前: data-ad-format="auto"
変更後: data-ad-format="horizontal"

広告タイプをauto (自動) から horizontal (横長, 水平) を優先的に表示するように変更するということを意味します.

縦長 (vertical) にすると縦長優先になります.

注意点は, この設定が絶対的なものではなく, あくまで優先表示であるという点です.

すなわち, horizontalに設定しても, スクエア表示されることがありえます.

広告をwidth指定したdivで囲む

そこで, この広告コードをdivで囲んで横幅を指定し, ある程度コントロールできるようにします. 具体的には下記のように設定します.

html


<!DOCTYPE html>
<html lang="ja">
<head>
  :
  :
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678901234567890" crossorigin="anonymous"></script>
  :
  :
</head>
<body>
  :
  :
  <div class="ad-responsive">
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-12345678901234567890"
      data-ad-slot="1234567890"
      data-ad-format="horizontal"
      data-full-width-responsive="true"></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
  :
  :
</body>
</html>

data-ad-client , data-ad-slot は人, 広告によって値が異なります

css


/* Responsive Design ############## */
/* iPhone Portrait ================ */
.ad-responsive {
  width: 250px;
}
/* iPhone Landscape, iPad and PC == */
@media screen and (min-width:600px) {
  .ad-responsive {
    width: 100%;
  }
}
/* PC ============================= */
@media screen and (min-width:1200px) {
  .ad-responsive {
    width: 1200px;
  }
}

iPhoneなどのスマホ縦長表示では, 横幅を250pxにしています
iPhoneなどのスマホの横縦表示 (横幅 600px以上, 1200px未満) では, 横幅を100%にしています
PC画面など (横幅1200px以上) では, 横幅を1200pxにしています

以上で設定は終わりです.

以降は, 上記のような結論にいたった検証結果をお伝えします.

検証

iPhone縦長表示を例に少し上述しましたが, divで横幅をきっちりooo pxと設定した場合でも, Google広告はその幅を超えてくることがあります.

場合によってはスクエア広告になってデカデカと表示されてしまいます.

理由は不明で, その条件を奇妙なのですが, Googleの仕様によるものだと思います.

ですので, 以下に, 様々な条件下での広告表示結果を検証しましたので, こんなものなのか, と理解する一助になれば幸いです.

検証環境

メイン検証機

Chrome on Macbook Air (M1 2020)
Safari on Macbook Air (M1 2020)
Chrome on iPhone 8
Safari on iPhone 8
Chrome on iPad Pro 12.9

サブ検証機 (店頭機で少しだけ検証)

Safari on iPhone 13 mini
Safari on iPhone 13
Safari on iPhone 13 pro
Safari on iPhone 13 pro max
Safari on iPad mini (2021)

→ https ではなく, httpでのアクセスだと少し挙動が変わるかも?

検証ページ一覧

検証ページは下記の通りです

1つのページに多数の広告を貼り付けている検証ページについては, すべての広告が表示されない場合があります. その場合は, 何回かリロードすると読み込めることがあります.

広告の最小表示可能横幅

検証結果

Googleの公式ページには, (ディスプレイ広告ではなく) 記事内広告に関する記述ではありますが, 250pxが最小横幅との記載 :

記事内レスポンシブ広告のサイズ
記事内広告はレスポンシブ広告であり、ユーザーが使っているデバイスに応じてサイズが自動的に調整されます。縦表示のモバイル端末では、記事内広告は画面サイズの横幅いっぱいに表示されます。モバイル端末でその他の表示方法を使用している場合やパソコンの場合、記事内広告の横幅は常に、親コンテナ（<div>、<iframe> など）の幅と等しくなります（記事内広告の最小幅は 250 ピクセルです）。記事内広告の高さは、AdSense で自動的に調整されます。

があります.

そこで, 実際にディスプレイ広告について検証すると234px程度が限界のようでした.

最小横幅の検証ページ

minimum-ad

広告を取り囲むdivを, 上から順に, 230px, 231px, ... という各横幅で変更した結果, 234px未満では広告が表示されず, 234px以上で初めて表示されるようになりました.

検証に使用したコードは下記です.

検証コード

html


    :
    :
    <h3>width: 230px</h3>
    <div class="ad ad-w230">
        <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-12345678901234567890"
            data-ad-slot="1234567890"
            data-ad-format="horizontal"
            data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <h3>width: 231px</h3>
    <div class="ad ad-w231">
        <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-12345678901234567890"
            data-ad-slot="1234567890"
            data-ad-format="horizontal"
            data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    :
    :


html {
  text-align: center;
  background-color: aqua;
}

.ad {
  background-color: #c97171;
  height: auto;
  padding: 0;
  margin: 0px auto 50px auto;
}

.ad-w230 {width: 230px;}
.ad-w231 {width: 231px;}
:
:

実際の広告の例 (最小結果, 234px)

-----ここから-----

-----ここまで-----

問題

問題となる表示をピックアップして紹介します.

勝手にスクエア表示問題

問題内容

下図は, 広告を囲ったdivのwidthを250px, 300pxに設定した上で, 表示横幅を375px (iPhone 8) にした場合での結果です.

250px設定では, 想定どおりに横長広告で表示されているにも関わらず,
300px設定では, スクエア広告に切り替わって表示されてしまい, 画面を大きく占有してしまっています

わかったこと

この検証結果により,

iPhone縦長表示においては, 250px表示が良さそう

だということがわかりました.

実際の広告の例

OK: 250px

-----ここから-----

-----ここまで-----

NG: 300px

-----ここから-----

-----ここまで-----

勝手に横幅超えてくる問題

問題内容

下図は広告を囲ったdivの横幅を250px, ..., 500pxに設定した上で, 表示横幅を375px (iPhone 8) にした場合での結果です.

250, 300, 350, 450px設定については想定通りの横幅で表示されているのですが,
400, 500px設定の場合, div要素の横幅が100%のように広がってしまっていることに加えて, 広告自体の横幅を600pxほどにまで広がって表示されてしまっています.

div幅 [px]	結果 (表示横幅 1680px, PC想定)
250		OK
300		OK
350		OK
400		NG (拡張)
450		OK
500		NG (拡張)

わかったこと

この検証結果により,

PC等のある程度横幅がある場合においては,
- width: 100%にしてしまうか
- 横幅が広すぎるならば, width: 1200pxなどとして制限するするのが良さそう

だということがわかりました.

検証コード例

上記の問題に関する検証コードは最小横幅の検証時と同様で, 下記のようなものです.

250pxなどの具体的なwidth (横幅) については適宜変更しています.

html


    :
    :
    <h3>width: 250px</h3>
    <div class="ad ad-w250">
        <ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-12345678901234567890"
            data-ad-slot="1234567890"
            data-ad-format="horizontal"
            data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    :
    :


html {
  text-align: center;
  background-color: aqua;
}

.ad {
  background-color: #c97171;
  height: auto;
  padding: 0;
  margin: 0px auto 50px auto;
}

.ad-w250 {width: 250px;}