【収益化】アドセンスの自動広告をHTML&CSSで設定してみました

ホームページ
この記事は約4分で読めます。

ブログを収益化(マネタイズ)するため、AdSense(アドセンス)の設定をしています。

前回、WordPress(ワードプレス)で、AdSense の広告が表示されるようになりました。

スポンサーリンク

事務所のホームページにも広告を表示

ボクは、行政書士事務所のホームページも運用しています。
そちらは、HTML と CSS で作っています。

ホームページの広告

最初は、行政書士事務所のホームページには、広告を入れない方針でした。
しかし、いろいろ考えてみた結果、広告を入れてみることにしました。
方針変更です。

収益化できれば、それはそれで魅力的です。
それ以上に、広告コードを直接 HTML に入れて、いろいろやってみたいというのが、本音です。

行政書士 矢野浩一事務所 (廃業) - 遺言・相続・家系図のことなら
岐阜県不破郡関ヶ原町にある行政書士 矢野浩一事務所 (廃業)です。遺言・相続手続きの支援、家系図の作成をおもな取り扱い業務としています。わからないことがありましたら、お気軽にお尋ねください。ちなみにブログを日々更新中ですので、よろしければ御覧ください。

まずは、広告コードだけ入れてみる

次のようにして、広告コードを HTMLファイルに追加しました。

ちなみにこの広告コードは、AdSense の利用申請のときに、headタグの中に追加で貼り付けた広告コードと、まったく同じです。
すでにやっている場合は、やる必要がありません。

アドセンスにログイン

まずは、Google AdSense(グーグル・アドセンス)にログインしました。

アドセンスのトップページ

広告コードのコピー

つぎに、AdSense の広告コードをコピーしました。

自動広告

作業手順:

  1. メニュー > 広告の設定 > コンテンツ > 自動広告 へと移動
  2. 「自動広告」画面で、右上の「自動広告を設定」をクリック
サイトで自動広告を設定

作業手順:

  1. 「サイトに自動広告を設定」画面で「コードスニペットをコピー」をクリック

結果として、広告コードがコピーされました。

広告コードの貼り付け

エディタで、AdSense の広告コードを HTMLファイルに貼り付けました。

<head>
  ~
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="favicon.ico">
  <script src="js/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <!-- Google AdSense 広告コード 始まり -->
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-XXXXXXXXXXXXXXXX",
      enable_page_level_ads: true
    });
  </script>
  <!-- Google AdSense 広告コード 終わり -->
</head>

作業手順:

  1. エディタで、自動広告を表示させたい HTMLファイルを開く
  2. headタグの間(<head>と</head>の間)の最後に、広告コードを追加で貼り付け
  3. エディタで、広告コードを貼り付けた HTMLファイルを保存

インターネットで公開

最後に、保存した HTMLファイルをインターネットで公開しました。

しばらくすると、事務所のホームページには、自動広告が表示されていました。

パソコンでの表示は物足りない

まずはパソコンで、自動広告がどのように表示されるか確認してみます。

すると、ほとんどのページは、一番下のフッターのすぐ上に横長のバナー広告が1つ表示されているだけでした。

つぎは、Google Chrome(クローム)を検証モード(モバイル)にして確認してみます。

ホームページの広告

再読み込みすると、いたる所に広告が表示されていました。
何なのでしょうね、この違いは?

あとがき

スマホ

もしかすると、現在のところはモバイル優先(ファースト)で、自動広告の実装や改善を進めているのかも知れません。

物足りない場所には、自分で広告ユニットコードを追加するしかなさそうです。
まだまだ先は長そうです。

コメント

タイトルとURLをコピーしました