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

広告設定

2018.02.202023.10.21

この記事は約3分で読めます。

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

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

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

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

目次

広告（AdSense）コードの設定

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

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

まておより:

2018年4月24日 08:53

教えてください

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

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

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

よろしくお願いします
- わいひらより:
  
  2018年4月25日 00:39
  
  PCとモバイル兼用の広告ウィジェットがないのはどうしてでようか
  
  ズバリ言うと、後回しにしていたら忘れてしまったというのが理由として一番近い気がします^^;
  
  兼用の広告ウィジェットを実装したものを以下にアップしました。
  https://github.com/yhira/cocoon/archive/master.zip
  よろしければ、試してみていただけると騒いです。
トミーより:

2018年5月14日 14:04

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

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

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

よろしくお願い申し上げます。
- わいひらより:
  
  2018年5月16日 20:11
  何かセキュリティー関係のプラグインをインストールされていますか？
  インストールしている場合は、一度セキュリティー関係のプラグインを無効にして試してみてください。
  
  もしそれでもうまくいかないようであれば、最低限以下のように入力すればOKです。
```
data-ad-client="ca-pub-270654XXXXXXXXXXX"
data-ad-slot="54XXXXXXXXX"
```
  とりあえず、IDが2つわかればOKです。
スロカイザーより:

2018年12月10日 20:45

はじめまして、初心者で困ってます。
グーグルアドセンスのコードを広告のところにはりつけました。
ブログを見るとブログのタイトルの下に広告が3つくらい出てそのうちの
一番上の部分だけ HTTP 400 Web ページが見つかりませんと出ます。
ブラウザ変えたり違うＰＣでも見てみましたが一緒でした。
何が原因でしょうか？お知恵をお貸しくださいませ。
- わいひらより:
  
  2018年12月10日 22:01
  
  コメントの案内もあるように、フォーラムの方に以下の情報とともに、書き込んでいただけると助かります。
  
  ・不具合が出ているページのURL
  ・状態のキャプチャ画像
  
  コメントだと、機能が貧弱なので、画像などがアップロードできません。
  上記コメントのコピペで良いので、フォーラムにトピックを立てていただければと思います。
  https://wp-cocoon.com/community/cocoon-theme/

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

'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);