WordPress サイト運営

デスクトップ/モバイル/AMPで広告コードを切り替える方法

投稿日:2018年1月14日 更新日:

ASP登録して、いざ広告を表示しようとしてみると考えることが多いことに気づきました。パソコン、モバイル、AMPで表示したい広告コードは違いますよね?そして一つのコードを挿入するだけでなく、広告コードを選択しながら表示しようとすると更に難解になります。皆さんどうやっているのでしょうか?

switch ad title

※本稿の内容ははまとりねっとの環境で採用したものです。ご自分の環境で行う際は十分注意して行ってください。

<スポンサーリンク>

1. 広告コードを切り替えたい理由

今までGoogle AdSenseだけを使っていましたが、A8.netも試してみようと思いました。A8.netに登録して、広告コードを貼り付けようとして固まりました。

「どうやったらいいかわからない」

まずはなんで固まったのかを説明させていただきたいと思います。

1.1. 何故固まったのか?

主題は「Google AdSenseとA8.netの広告を表示したい」です。

2018年1月時点、はまとりねっとではGoogle AdSenseの広告を「QuickStart+Ad Inserter」で表示しています。通常広告(デスクトップ+モバイル)はQuickStart広告、AMP広告はAd Inserterで行っています。

Google AdSenseでは、QuickStart広告使っていれば、AMP広告以外やることないですし、広告の内容も勝手に切り替わってくれるので、一律で広告コードを貼り付ければそれで完了でした。

ところが、A8.netで考えると”一律で”というわけにはいきません。投稿ごとに、「貼りたい場所に」、「貼りたいコード」を入れ込んであげる必要があります。ヘッダー、フッター、サイドに表示する広告は、サイトで統一された広告になるので、枠組みやウィジェットに直接コードを埋め込んでしまっても良いと思いましたが、投稿自体に入れ込む広告はそうもいきません。これは「切り替えない限りうまく扱うことができない」と思って、手が完全に止まりました。

※上記理由からヘッダー、フッター、サイドの広告表示に関しては本稿では触れません。

1.2. どのように表示したいか?

私の基本的な表示イメージは以下のような感じになります。

  • デスクトップではレクタングル(336×280)を二つ横並びで表示する
  • モバイルではレクタングル(300×250)を一つ表示する
  • AMPではレクタングル(300×250)を一つ表示する

デスクトップではレクタングル2つ並べたいですが、モバイルでは1つに減らしたいですし、サイズもモバイルに合わせたサイズにしたいです。モバイルとAMPでは同じサイズですが、広告コードがそもそも違うので、切り替えなければなりません。

1.3. 切り替えの方式

ネットを検索していくと、直接PHPに広告コードを書き込むような手法は沢山でてきます。しかし、投稿ごとに広告を選ぶようなパターンだと対応が難しいです。

そんな中、とても良いヒントになる投稿をみつけました

ショートコードを使うことで切り替える方式です。この投稿ではSimplicity前提の内容になっていて、通常+AMP対応となっていますが、とても汎用性の高いアイディアです。ここを原点として、発展した形で実装しようと思います。

2. その前にAMPの広告コードを扱う問題がある

本題に行く前に、こちらをクリアしておかないと全く進められないので、この問題の解決からになります。

2.1. 広告コード(AMP)の問題とは何か?

WordPressのエディターはビジュアルエディター、テキストエディターと2種類のインターフェースが準備されています。

広告コードはテキストエディターで貼り付けるものですが、WordPressにはテキストエディターからビジュアルエディターに切り替える際に不要な(とWordPressが考えている)タグを削除する機能が備わっています。これに<amp-ad>タグはもろに引っかかり、テキストエディターで記載したAMP広告用のコードはビジュアルエディターに切り替えた際に消えてしまいます

これを回避するには、テキストエディターでAMP広告用のコードを貼り付けた後にそのまま保存(公開)してあげる必要があります。これはビジュアルエディターが使えないというのにほぼ等しい状態です。

私自身はビジュアルエディターがメインなので、非常に困る仕様です。

2.2. 広告コード(AMP)の解決方法

WordPressのエディターはTinyMCEというオープンソースを採用しています。よくTinyMCE Advancedというプラグインが使われていますが、これはWordPressに付属している標準のTinyMCEを強化するという意味でAdvancedというわけですね。

TinyMCEのタグ削除機能はコントロールすることができます。つまり、TinyMCEに「<amp-ad>タグは削除しない」ということを教えてあげればよいということになります。

それを教えてあげる属性はextended_valid_elementsになります。説明は以下のリンクを参照してください。

この属性を扱う方法は2つあります。一つはPHPに直接書く方法で、もう一つはプラグインを使って指定する方法です。

「プラグインを多用するのは良くない」と言われそうですが、私はプラグインを入れる方法を選択しました。使用したプラグインの名前は「Advanced TinyMCE Configuration」です。これを使えば直接PHPを変更する必要が無いので、スクリプトのミスが無いというのがメリットです。私はスクリプトミスって真っ白にしてしまうので。。。

2.3. Advanced TinyMCE Configurationでの設定方法

インストール/有効化の手順は少し端折って説明します。

2.3.1. インストール/有効化

ダッシュボード>プラグイン>新規追加

”Advanced TinyMCE Configuration”でキーワード検索をかけると見つかります。

tinymce-config01

見つかったら右上の”インストール”ボタンを押下、インストールが終わったら”有効化”ボタンを押下で終わりです。

ここで確認しているAdvanced TinyMCE Configurationのバージョンは1.3です。WordPressは4.8.4で稼働しています。

2.3.2. 設定

上述の通り”extended_valid_elements”に”<amp-ad>”を指定してあげるだけです。

設定>TinyMCE Config

ここでOption nameとValueを入力します。

tinymce-config02

Option nameには「extended_valid_elements」を指定します。

Valueには「amp-ad[*]」を指定します。

最後に”Save Changes”を押下して完了です。

これで、テキストエディターで貼り付けたAMP広告(<amp-ad>タグ)はビジュアルエディターに切り替えても消えなくなります。

3. デスクトップ/モバイル/AMPで広告コードを切り替える

本題に入っていきます。

3.1. ショートコードを作る

広告切り替え用のショートコードを作ります。

上述している通り、こちらを大いに参考にさせていただいています。

まずはfunction.phpの一番下にに以下のコードを配置します。

いくつかポイントを説明します。

  • モバイルかどうかの判定にはwp_is_mobile()を使用
  • AMPかどうかの判定にはis_amp_endpoint()を使用
  • shortcode_br_delete関数以下は”コピペで使える自動処理”さんのおすすめを採用

is_amp_endpoint()はAutomatticが提供している”AMP”プラグインを使っていないと使用できません。もし、”AMP”プラグインを使っていない場合はURLから取得する方法が適していますので、”コピペで使える自動処理”さん(リンク先)の方式を参考にしていただくと良いと思います。

このfunction.phpで指定したショートコードをテキストエディターで使えるということになります。

尚、function.phpの修正は失敗するとサイトが真っ白になりますので、必ず元に戻せる準備はしておいてください。

こんな目にあいます。

3.2. ショートコードの使い方

上述のfunction.phpの修正で以下の3種類のショートコードを作りました。

[add_amp]AMP用の広告コード[/add_amp]

[add_nml]デスクトップ用の広告コード[/add_nml]

[add_mbl]モバイル用の広告コード[/add_mbl]

実際のところは広告コードを入れるための器をCSSに定義してそれを使って入れ込んでいますが、本稿の内容からはずれるので割愛します。

3.3. この方法の残念なこと

この方法を用いるとビジュアルエディターで見た際、デスクトップ用とモバイル用の広告がそのまま表示されてしまいます。また、当然ながらショートコードも表示されている状態なので、実際にどのように表示されるかは、プレビューで確認する必要があります。

ビジュアルエディターで見るとこのような感じに見えてしまいますが、実際はきれいにできています。(広告はモザイクしています)

switch-ad-01

AMPは広告表示できないので、add_ampのところは空になります。add_nmlで広告が2つ、その下にadd_mblで(ショートコードが見えていませんがスクロールしたところにあります)広告が1つあります。実際はショートコードで切り替わるので、デスクトップから見たら上2つの広告、モバイルから見たら3つめの広告が表示されます。

広告上下の間隔も若干ややこしいので、ご自分の環境(広告表示のCSSとか)と相談しながら調整してください。

3.4. 確認方法

デスクトップ用に関してはエディターからプレビューすれば確認できます。

モバイルの場合は、プレビューしたページをデベロッパーツールでモバイル表示にしてあげることで確認できます。

AMP用はAMPテストページのプレビューで確認します。これだけは公開した後で無いとできません

<スポンサーリンク>

まとめ

正直なところこの手の話はネットで検索かければ大量に出てくると思っていました。しかし、意外なことにまとまった情報を見つけることが出来ませんでした。私が知らない常識があるのかもしれません。

  • まずは表示したいイメージを固める
  • AMPタグ(amp-ad)の問題を解決する
  • function.phpの修正には十分気を付ける
  • 広告表示確認はデスクトップ、モバイル、AMPそれぞれで行う

一応、広告切り替えができる一つの方法ではあるのでご参考にしていただければ幸いです。

 

まぁ、何も考えずAMP広告と通常広告を並べて置いておくというのも手かもしれません。AMPページではAMP広告しか表示できませんし、通常ページでは通常広告しか表示できませんからね。とか言ってしまうと、この投稿の意味はほぼ無くなるのですけど。(苦)

-WordPress, サイト運営
-, ,

執筆者:

<スポンサーリンク>

comment

メールアドレスが公開されることはありません。

*

関連記事

wordpress-logo-eyecatch

WordPress リンクにnofollowを付与するプラグイン

ブログ関連の情報を調べているとやたらとnofollowする/しないという話に当たります。WordPressの標準機能にはnofollowを付ける機能はありません。しかし、どうやらnofollowについてコントロールする必要が多少なりともあるようです。試しにいく …

意外に簡単?WordPress環境のSSL化 (エックスサーバー)

エックスサーバーでは無償で独自SSLを使用できます。 近年、あらゆるサイトがSSL化しているので、本サイトもSSL化してみました。 ついでに手順を記録しておきます。 実施した際、本サイトは複雑な構造を持っていなかったからだとは思いますが、結構簡単でした。 目次 …

QuickStart-eye

【QuickStart広告とは?】設定手順と使った感想など

Google AdSenseの審査を通ったので、何か広告をはることになりました。しかし、WordPressのプラグインがあると信じていたものの、どうも無くなったらしいです。困った困ったと思ってたら、実は新しいQuickStart広告というのが始まっていたようで …

WordPress 自分の投稿で自分の投稿に勝手にコメントさせない方法

WordPress環境で、自分の投稿にリンクを張っている投稿をすると勝手にコメントがついたりしませんか?いままでは一つ一つ手で削除していたのですが、面倒になり調べました。どうやら、WordPressの機能のようです。問題解決したので、簡単に説明します。 201 …

matches

WordPress ウィジェット表示をコントロール Widget Logic

任意のウィジェットを携帯端末からのアクセスで表示させたくない場合はありませんか?私は結構あります。例えば、Popular Postsのランキングは携帯端末で表示すると今一つという感じがします。そこで”ウィジェットのロジック(Widget logic)”を使って …

サイト内の検索はこちらから

サイト内の検索はこちらから

サイト内の検索はこちらから

カテゴリー

アーカイブ

最近の投稿
Scroll Up