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

f:id:uenoyou111:20181021172554j:plain

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

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

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

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

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

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

関連コンテンツのカスタマイズ
コードの種類
まとめ

コードの種類

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

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

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

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

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

１．テキストのみ

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

f:id:uenoyou111:20181021182100j:plain

２．カード型テキスト

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

f:id:uenoyou111:20181021182518j:plain

３．画像とテキストを横に並べる

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

f:id:uenoyou111:20181021183412j:plain

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

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

f:id:uenoyou111:20181021183721j:plain

５．画像の下にテキスト

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

f:id:uenoyou111:20181021183940j:plain

６．カード型で画像上テキスト下

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>

まとめるとこんな感じ。

まとめ

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

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

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

ではでは(｀･ω･´)ゞ

うえのブログ

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