ウィジェットを利用して広告(AdSense)を表示する方法

広告設定
この記事は約3分で読めます。

Cocoonでは、テーマ設定から手軽に広告表示出来るようになっています。

広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

ただ、ウィジェットによるより自由度の高い広告設定にも対応しています。

以下では、「ウィジェットによる広告設定方法」について説明したいと思います。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

広告(AdSense)コードの設定

Google AdSenseからの広告コードの取得方法は以下の記事を参考にしてください。

広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

まずAdSenseコードの設定ですが、「Cocoon設定→広告→広告コード」のテーマの広告設定にコードを入力している場合は、ウィジェット側では、新たにコードを入力する必要ありません。

CocoonのAdSenseコード設定エリア

「広告ユニットごとにパフォーマンスを計測したい」なんて場合は、広告ウィジェットに個別のAdSenseコードを入力することにより、対応できる仕様になっています。

ウィジェットで広告の挿入

あとは、WordPress管理画面の「ウィジェット」画面を開きます。

「PC用広告」ウィジェットは、パソコンのみ(768pxより大きな画面)で表示するための広告を制御します。

CocoonのPC用広告ウィジェット

「モバイル用広告」ウィジェットは、モバイルでのみ(768px以下の画面)表示するウィジェットを制御します。

Cocoonのモバイル用広告ウィジェット

あとは、これらのウィジェットをマウスでドラッグして、「表示したいウィジェットエリア」にドロップします。

設定可能なウィジェットエリアはこちら。

Cocoonテーマの設定可能なウィジェットエリア

ウィジェットエリアに「広告ウィジェット」を放り込むと以下のように表示されます。

ウィジェットエリアに放り込んだPC用広告ウィジェット

AdSenseコードは入力せずとも、「Cocoon設定→広告→広告コード」で入力したものが利用されます。

広告ユニットごとにパフォーマンスを計測したい場合は、ここに新たな広告コードを入力してください。

広告ウィジェットごとにパフォーマンスを計測したい場合はAdSenseコードを入力

ちなみに、ウィジェットの設定にある「広告フォーマット」を変更することによって、ユニットの表示タイプを切り替えて広告掲載させることが可能です。

Cocoonの広告ウィジェットの広告フォーマット設定

上記のように、自由な「広告ユニット表示形式」を選んで、パフォーマンスの高い表示形式を導き出しやすい仕様になっています。

もちろん、各自でパフォーマンス観測は必要になります。

「サイドバー」もしくは「サイドバースクロール追従」ウィジェットエリアに「広告」ウィジェット入れた場合、モバイル画面(834px以下)では表示されません。これはモバイルボタンを押して出てくるサイドバーでは「誤クリック」を招きやすく、利用している広告がAdSenseだった場合Googleに「誤クリック誘導サイト」と認識され、広告停止になる可能性もあることから、このような仕様にしています。

モバイルでのサイドバーでどうしても広告を挿入したい場合は「テキスト」・「カスタムHTML」ウィジェットなどをご利用ください。

まとめ

このように、Cocoonではウィジェットエリアを用いた自由な広告表示も行うことが可能です。

また、出来る限り設定の負担を減らせるように、最小限のコード入力だけで広告表示できる仕様に作ったつもりです。

これらの機能で、多少なりともサイトの広告パフォーマンスが上がれば幸いです。

コメント テーマの質問はフォーラムへ

  1. まてお より:

    教えてください

    「PC用広告」と「モバイル用広告」別々にありますが
    PCとモバイル兼用の広告ウィジェットがないのはどうしてでようか

    PCとスマホに同じ種類の広告を表示させるには
    各ウィジェットに同じコードを入れるしかないのでしょうか?

    カスタムHTMLウィジェットでは広告の制御ができないので

    よろしくお願いします

    • わいひら わいひら より:

      PCとモバイル兼用の広告ウィジェットがないのはどうしてでようか

      ズバリ言うと、後回しにしていたら忘れてしまったというのが理由として一番近い気がします^^;

      兼用の広告ウィジェットを実装したものを以下にアップしました。
      https://github.com/yhira/cocoon/archive/master.zip
      よろしければ、試してみていただけると騒いです。

  2. トミー より:

    はじめまして。
    こちらで質問する内容でなかったら、ごめんなさい。

    Google Adsenseのアカウント有効化前の段階なのですが、
    Cocoon設定>広告>アドセンス設定では、403エラーが出てしまいます。scriptタグをのぞいてみました(?)が、エラーのようです。(有効化前のコードは、広告の種類などを設定できないのでコードも違う感じです。)

    Cocoonを使用しているウェブで、アカウント有効化するためには、どこにコードを記入すればいいのでしょうか?

    よろしくお願い申し上げます。

    • わいひら わいひら より:

      何かセキュリティー関係のプラグインをインストールされていますか?
      インストールしている場合は、一度セキュリティー関係のプラグインを無効にして試してみてください。

      もしそれでもうまくいかないようであれば、最低限以下のように入力すればOKです。

      data-ad-client="ca-pub-270654XXXXXXXXXXX"
      data-ad-slot="54XXXXXXXXX"

      とりあえず、IDが2つわかればOKです。

  3. スロカイザー より:

    はじめまして、初心者で困ってます。
    グーグルアドセンスのコードを広告のところにはりつけました。
    ブログを見るとブログのタイトルの下に広告が3つくらい出てそのうちの
    一番上の部分だけ HTTP 400 Web ページが見つかりません と出ます。
    ブラウザ変えたり違うPCでも見てみましたが一緒でした。
    何が原因でしょうか?お知恵をお貸しくださいませ。

    • わいひら わいひら より:

      コメントの案内もあるように、フォーラムの方に以下の情報とともに、書き込んでいただけると助かります。

      ・不具合が出ているページのURL
      ・状態のキャプチャ画像

      コメントだと、機能が貧弱なので、画像などがアップロードできません。
      上記コメントのコピペで良いので、フォーラムにトピックを立てていただければと思います。
      https://wp-cocoon.com/community/cocoon-theme/

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