うえのブログ

気になったこと、思い立ったこと、調べてみたことなどを書き留める場として使っています。

関連コンテンツをカスタマイズしてより効果的な広告配置を追求してみる

f:id:uenoyou111:20181021172554j:plain

関連コンテンツはカスタマイズ出来ないと思ってませんか?

 

これはGoogleが公式に認めているカスタマイズで、コードを挿入することである程度好みなデザインに仕上げる事が出来ます。

 

この記事で説明されている例は、AdSense 広告コードの許可されている変更方法です。これらの方法で関連コンテンツのコードを修正した場合は、AdSense プログラム ポリシー違反とみなされません。

レスポンシブ対応の関連コンテンツ ユニットをカスタマイズする方法 - AdSense ヘルプ

 

前から変えたかったんですよねぇ…ということで、実際にやってみた内容と種類についてまとめていきます。

 

関連コンテンツって何?って方はこちらから。

 

 

関連コンテンツのカスタマイズ

 

まずは導入前の様子。PC版。

 

f:id:uenoyou111:20181021172739j:plain

 

スマホ版

 

f:id:uenoyou111:20181021173715j:plain

 

そう、多分ふっつーに導入すればこんな感じだと思うんですよね。

 

これは何もカスタマイズしていない状態です。

 

ここにとあるコードを入れて、このデザインにあったカスタマイズを自分なりに模索してみると…?

 

f:id:uenoyou111:20181021184357j:plain

 

f:id:uenoyou111:20181021173902j:plain

どん!

 

こんな感じになりました。

 

私が導入しているブログデザインがそもそもカード型で、PCから見ると横に3列並ぶようになっているのです。

 

重さを軽減するために6記事の表示にしてますが、これに合わせて関連コンテンツも3×3のカード型にしました。

 

表示に関連性をもたせつつ、スマホ表示もスッキリ!

 

(関連記事も表示数が少しだけ増えたので、ちょっと見てくれる割合上がるかなーという淡い期待)

 

コードの種類

 

※解放型の関連コンテンツを取得している事が条件となります。

 

ここで自分がカスタマイズしたいコードを選んで、指定の場所へコードを挿入していきます。

 

6種類のレイアウトがあるので、まずはコードと実際に使った状態を画像で説明していきます。

 

気に入ったものがあれば、後述する指定場所へコードを挿入する流れです。

 

あと戻すの忘れちゃったので、配列を3×3にした状態で進めていきます。

 

1.テキストのみ

 

data-matched-content-ui-type="text"

 

f:id:uenoyou111:20181021182100j:plain

 

2.カード型テキスト

 

data-matched-content-ui-type="text_card"

 

f:id:uenoyou111:20181021182518j:plain

 

3.画像とテキストを横に並べる

 

data-matched-content-ui-type="image_sidebyside"

 

f:id:uenoyou111:20181021183412j:plain

 

4.画像とテキストを横に並べてカード型に

 

data-matched-content-ui-type="image_card_sidebyside"

 

f:id:uenoyou111:20181021183721j:plain

 

5.画像の下にテキスト

 

data-matched-content-ui-type="image_card_sidebyside"

 

f:id:uenoyou111:20181021183940j:plain

 

6.カード型で画像上テキスト下

 

data-matched-content-ui-type="image_card_stacked"

 

f:id:uenoyou111:20181021184357j:plain

 

以上です。気に入ったコードありました?

 

次は挿入位置です。

 

コードの挿入位置

 

アドセンスにログインし、広告の設定→広告ユニットと進んでいき、関連コンテンツのコードを取得します。

 

<script async src="//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>

 

恐らくこんな感じになっているかと思います。ちなみにこのコードは番号を改変しているので使えませぬ。

 

この上から六行目

 

data-ad-slot="1234567890"></ins>

 

この7890”の間に任意のコードを挿入していきます。

 

私が使っているカード型を入れるなら

 

<script async src="//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"
     data-matched-content-ui-type="image_card_stacked"
></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

という感じになります。

 

うっかり>の後ろに配置しちゃうとコードがそのまま表示されたり、反映されなかったりしますのでご注意を!

 

行数と列数の指定

 

横の枚数を指定するには、下記のコードを入れて数字を変更します。

data-matched-content-rows-num="3"

 

縦の枚数はこちら

data-matched-content-columns-num="3"

 

これで縦9×横9でブログデザインに馴染んだ感じになりました。

 

<script async src="//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"
  data-matched-content-ui-type="image_card_stacked"
     data-matched-content-columns-num="3" data-matched-content-rows-num="3" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

 

まとめるとこんな感じ。

 

 

まとめ

 

基本的にアドセンスのコードは改変不可ですが、最初からデザインが用意されているのは嬉しい限りです。

 

自動広告とどっち使うのがいいの?という方は、ぜひこちらも確認してみて下さい。

 

ある程度管理が出来る方なら、位置やデザインを変更してより使いやすい形に最適化できますね。

 

 

 

ではでは(`・ω・´)ゞ