Adnsense広告をスマホとPCでダブルレクタングルに切り替える方法

2018年2月にはAdsenseで「自動広告」が登場しましたね。
自動最適化で勝手にサイト内にAdsense広告が挿入されるので、完全に管理が必要なくなり便利に。

自分のメインサイトは「Adsenseは添えるだけ」だったのですが、自動広告に切り替えたら収益が40%ほど伸びました。

さて今回はAdsenseのダブルレクタングル広告をPCビューとスマホビューで切り替えて収益を上げようという方法です。

【このページのもくじ↓】

AdsenseはダブルレクタングルがPCビューでは最も収益率が高いかも

Adsenseで最も収益率の高いと言われる338×280のレクタングル広告(大)ですが、サイトによってはPCビューでは336×280を横に2つ並べる「ダブルレクタングル」を採用しているところも多いです。

事実ダブルレクタングルは最も収益率の高い336×280が2つになるので収益率アップしたという話も結構聞きます。

しかしダブルレクタングルはスマホデビューだと邪魔

しかし上記のAdsenseのダブルレクタングルだと、PCビューでは横に2つ並んで問題ないのですが、レスポンシブデザインのサイト(最近の殆どのブログがWordPressのレスポンシブ対応テーマを使っている)の場合には、回り込んで縦に336×280のAdsense広告が2つ並んでしまいます。

2018年時点でAndsense広告が1ページの上限などの規制が緩和されたとはいえ、ユーザー目線でもハッキリ言って縦に2つは邪魔です。いくら収益率を上げたくても広告ギラギラ過ぎます。

スマホビューは1つ、PCビューは2つのAdsense広告を表示する方法

という事でAdsense広告を

PCビューの場合：336×280のダブルレクタングルを表示
スマホビューの場合；300×250のレクタングル広告を表示

という風にユーザーがどのデバイスからアクセスしているかで、自動切換えするように書きましょう。

<?php if (wp_is_mobile()) :?>
<p><center>Sponsored Link</center></p>
<center>
★ここにスマホビュー用のAdsense広告コード★
</center>
<?php else: ?>
<p><?center>Sponsored Link</center></p>
<table>
<tr>
<td><?center>★ここにPCビュー用Adsenseコード(左)★</center></td>
<td><?center>★ここにPCビュー用Adsenseコード(右)★</center></td>
</tr>
</table>
<?php endif; ?>

どこに書くの？phpはショートコードでは機能しない

ただ上記のコードはphpで「スマホビューの場合」と「そうでない場合」を判断しているのですが、このphpコードはショートコードなどでは機能しません。

例えばWordPressの有名どころのプラグインで言うと、

Master Post Advert：moreタグ直下に設定したコードを自動挿入するプラグイン
Post Snippets：複数のショートコードを設定登録し、記事投稿画面から呼び出せる

などが自分もよくお世話になっている便利なショートコード系のプラグインですが、これらのプラングインに上記のphpの分岐のコードを記載してもうまく機能しません。

そこで…

直接function.phpへmoreタグ直下に挿入する関数を書く

「先ほどのPCビューとスマホビューの分岐phpコードを、moreタグ直下に自動挿入する」という記述をFunction.phpへ直接関数を書きます。

Function.phpが何なのかなどは割愛しますが、記述をミスすると画面が真っ白になってサーバーから書き換えないといけないので慎重に。

このサイトの最初のh2タグの前にも設定してありますが、Function.phpには以下を記述しています↓

/* moreタグ直後にアドセンスを表示 */
add_filter('the_content', 'adMoreReplace');
 
function adMoreReplace($contentData) {
    if (is_mobile()) {
        $adTags = 
<<<EOF
<center><p style="margin:0;font-size:90%;">Sponsored Link</p></center>
<center>★Adsense_300×250★</center>
EOF;
    } else {
        $adTags = 
<<< EOF
<center><p style="margin:0;font-size:90%;">Sponsored Link</p></center>
<table style="margin:0;"><tr>
<td>★Adsense_336×280_左★</td>
<td>★Adsense_336×280_右★</td>
</tr></table></center>
EOF;
    }
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);   
    return $contentData;
}

コードの参考：記事上部のmoreタグにアドセンスを挿入する方法【PC・スマホ切り替え】