PR

Cocoon 関連コンテンツユニットの設置方法

スポンサーリンク
スポンサーリンク

Cocoon 関連コンテンツユニット設置方法

WordPressの無料ブログテーマ「Cocoon」に、Googleアドセンスの広告ユニット「関連コンテンツユニット」を設置する方法をご紹介します。

Cocoonは無料とは思えないほど多機能なブログテーマで、Googleアドセンス広告もCocoonの広告設定機能を使うと簡単に設置できます。

ただし、関連コンテンツユニットはCocoonの広告設定機能を使っても設置できません。

Cocoonに関連コンテンツユニットを設置する場合は、アドセンスから広告コードを別途で取得して、関連コンテンツユニット用のウィジェットを作成する必要があります。

AMP機能を有効化している場合は、AMPページ向けのウィジェットも必要です。

あと、Cocoonの関連記事設定に「AdSense関連コンテンツユニット」の表示タイプがありますが、こちらを選択すると広告が表示されないので注意してください。

関連コンテンツユニットの解放には条件があって、サイトのトラフィック量とページ数の最低要件を満たさないと解放されませんが、広告の収益性は高いと言われています。

Cocoonブログに広告を設置するなら、ぜひ関連コンテンツユニットも追加してください。

スポンサーリンク

関連コンテンツユニット 広告コード取得

では、Cocoonに関連コンテンツユニットを設置してみましょう。当然ながら、Googleアドセンスで関連コンテンツユニットが解放されていることが条件です。

あと、自動広告の場合は、広告のフォーマットから関連コンテンツを追加して自動表示できるので、コードの作成や設置は不要です。

まず最初に関連コンテンツユニットの広告コードを取得します。Googleアドセンスの左メニューから「広告」に進みます。

関連コンテンツユニットの作成

「広告ユニット」に進み、新しい広告ユニットの作成から「関連コンテンツ」を選びます。

関連コンテンツユニットの作成

「新しい関連コンテンツユニット」で、広告ユニットをカスタマイズします。

ここで設定できるのは「広告オプション」「スタイル」「サイズ」の3点ですが、通常は変更不要、デフォルトのままでOKです。右下の「保存してコードを取得」をクリックします。

関連コンテンツユニット 広告コード取得

関連コンテンツユニットの広告コードが表示されました。このコードをCocoonで作成したウィジェットに貼り付けます。コードをコピーして「作業完了」をクリックしてください。

関連コンテンツユニット 広告コード

関連コンテンツユニット設置 ウィジェット設定

続いて関連コンテンツユニット用のウィジェットを設定します。Cocoonには様々なウィジェットが用意されているので、広告の設定や表示位置変更も簡単にできます。

ダッシュボードの左メニュー「外観」から「ウィジェット」を選択して、「広告」を選びます。

Cocoon 関連コンテンツユニット設定

ウィジェットの位置を決めて「ウィジェットを追加」します。いわしブログでは「投稿SNSボタン上」にしましたが、広告表示位置は各自の好みで決めてください。

Cocoon 関連コンテンツユニット設定

広告タグに関連コンテンツユニットの広告コードを貼り付けます。

関連コンテンツユニット コード貼り付け

広告フォーマットはそのままです。関連コンテンツユニットはスポンサーリンクの表示がなくても問題ないので、「広告ラベルを表示する」はチェックを外します。

AMPページを有効にしている場合は、AMP用の関連コンテンツユニットを別途設定するので、表示設定からウィジェットの表示を「チェック・入力したページで非表示」にして、ページタブのAMPユニットをチェックします。

ウィジェットに広告を設定したら「保存」をお忘れなく。

関連コンテンツユニット 表示設定

これで関連コンテンツユニットの設置は完了です。広告はすぐに配信されないので、広告スペースはしばらく空白になりますが、30分~1時間ほど待てば広告が表示されるようになります。

スポンサーリンク

AMPページに関連コンテンツユニットを設置する

CocoonでAMP機能を有効化している場合は、AMPページ向けのウィジェットを別途で作成して、関連コンテンツユニットを設置します。

関連コンテンツユニットの広告コードをそのままAMPページで使うと、一応広告は表示されますが、関連コンテンツが一部しか表示されないので効果が半減します。

左は通常ページをスマホで表示しています。関連コンテンツと広告が通常通り縦長に並んでいますが、AMPページでは関連コンテンツが3つしか表示されていませんね。

関連コンテンツユニット AMPページ

AMPページに関連コンテンツユニットを正しく表示させるため、AMPページ向けの広告を設置しましょう。ここではコード作成の流れや設置方法を簡単に説明します。

まずは先ほど作成した関連コンテンツユニットの広告コードをチェックします。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードの5行目と6行目にある赤い部分「data-ad-client(サイト運営者ID)」と「data-ad-slot(広告ユニットID)」をコピーしてください。

data-ad-client=”ca-pub-1234567890123456
data-ad-slot=”1234567890

続いてAMPページ用コード内のサイト運営者IDと、広告ユニットIDを自分のIDに変更します。

<amp-ad
layout="fixed-height"
height="800"
type="adsense"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890">
</amp-ad>

上記のAMPページ用コードに、自分のサイト運営者IDと広告ユニットIDを入れると、そのまま関連コンテンツユニットの広告コードとして利用できます。

あとは同じ位置にAMP用のカスタムHTMLウィジェットを作成して、広告コードを貼り付けます。広告ウィジェットでは関連コンテンツが一部しか表示されないので注意してください。

広告ラベルは不要、ウィジェットの表示は「チェック・入力したページで表示」にして、「ページ」タブ内の「AMPページ」にチェックを入れて「保存」してください。

AMPページ 広告ウィジェット設定

コード内のheightを変更すると縦幅が変わり、広告と記事のコマ数を増減させることができます。heightを800にすると、広告が2コマ、記事へのリンクが6コマ表示されます。

関連コンテンツユニットの詳しい設置方法やカスタマイズは、以下の記事を参照してください。

CocoonのAMPページに関連コンテンツユニットを設置する
ブログテーマ「Cocoon」のAMPページにGoogleアドセンスの関連コンテンツユニットを設置したので、その方法をご紹介します。関連コンテンツユニットの広告コードは、そのまま設置してもAMPページで表示されないので、コードをAMPページ向けに修正します。

Cocoonで関連コンテンツユニットが表示されない場合

Cocoonで関連コンテンツユニットが表示されない場合は、設定方法を見直してください。

まずは「Cocoon設定」から「投稿」タブをクリックします。

Cocoon設定

下に進み、関連記事設定の表示タイプをチェックします。ここで「AdSense関連コンテンツユニット」を選択しても、広告は表示されません。

Cocoon AdSense関連コンテンツユニット設定

最初に関連コンテンツユニットを設定した時はうまく表示されませんでしたが、原因はここでした。説明が紛らわしいので注意してください。

関連コンテンツユニットだけでなく、他の広告も全て表示されない場合は、広告の設定ミスやアドセンスポリシー違反による広告配信の停止などが考えられます。

スポンサーリンク

関連コンテンツのサイト設定

アドセンスの管理画面から、関連コンテンツの詳細設定ができるようになりました。

左メニューの「サイト」→「コンテンツが一致」に進み、関連コンテンツのサイト設定に表示されているサイト名をクリックします。

関連コンテンツのサイト設定

ここで関連コンテンツの設定ができます。設定項目は「新しさ」「ブロックリスト」「優先コンテンツ」の3つで、各項目の「設定」をクリックすると設定が表示されます。

関連コンテンツ 現在の設定

新しさ
関連コンテンツに表示される記事の新しさを指定します。期間は「期間指定なし」を選ぶと全期間の記事が対象になり、「新しい順」は新しい記事を優先して表示します。

サイトの記事数によって対象期間は変わり、トピックの類似性などを元に自動で最適化されます。

関連コンテンツ設定 新しさ

ブロックリスト
関連コンテンツに表示したくないページやサブドメイン、セクションをブロックします。

URLを追加する時は「このページだけをブロック」でURLが一致するページだけブロック、「このページと、このセクションやサブドメインに属するすべてのページをブロック」で、同じURLパスを使うページやサブドメイン全てをブロックします。

関連コンテンツ設定
優先コンテンツのリストに記事のURLを登録すると、関連コンテンツユニットで頻繁に記事を表示させることができます。

関連コンテンツ設定 優先コンテンツ

登録したURLが複数ある場合は、最低でもリスト内の1記事が表示されます。

関連コンテンツ設定 優先コンテンツリスト

関連コンテンツユニットのカスタマイズ

関連コンテンツユニットは、広告コードにパラメーターを追加することで、レイアウトを変更したり、行数と列数の指定などのカスタマイズが可能です。

Cocoonブログのスタイルに合わせて、広告をカスタマイズしてみるのも手です。

レスポンシブ対応の関連コンテンツ ユニットを特定のレイアウトで表示したい場合は、広告コードにパラメータを追加します。
レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法 – AdSense ヘルプ

ちなみに、アドセンス広告コードの変更は禁止されていますが、上記内の方法で関連コンテンツのコードを修正した場合は、アドセンスのポリシー違反とみなされません。

関連コンテンツユニットの広告は収益性が高いと言われています。Cocoonでブログを立ち上げたら、ぜひ関連コンテンツユニットも追加してください。

以下のページでCocoonのカスタマイズ方法をいろいろ紹介しています。

ブログテーマ Cocoonの使い方とカスタマイズ
いわしブログで利用中のブログテーマ「Cocoon」の記事一覧です。このテーマは無料とは思えないほど多機能で、SEO・ページ表示の高速化・モバイルフレンドリー。アドセンス広告追加といった機能はもちろん、AMPの対応もチェック一つで完了します。
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました