[WordPress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

マイクロアドの広告タグ設置にお困りの初心者の方のために覚え書き

広告コードの内容

以下のような内容のコードを受け取るようですが……

弊社ではJavaScriptのタグになっておりまして、サイトのHTMLのbody部にご設置いただくような形です。

弊社のタグはPC/SPでタグが分かれており、レスポンシブ対応はユーザーエージェントの情報分岐のご対応が必要になります。

※点線の中のタグをご設置くださいませ。

(SP)
枠ID：12345
枠名：広告コード_SP_300x250
-------------------------------------------------
<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>
<div id="****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>
-------------------------------------------------
(PC)
枠ID：12345
枠名：広告コード_PC_300x250
-------------------------------------------------
<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>
<div id="*****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>
-------------------------------------------------

基本的には、ほとんどのテーマではJavascriptで表示させた画像もレスポンシブになるはずです。

少なくともCocoon あるいはSWELL などの有料テーマではレスポンシブになります。

WordPressではほとんどのテーマでPCとスマホ用のコード分けは必要ない

つまり、レスポンシブのためだけに悩むのでしたら、PC用コードを貼っておけばスマホでも適応するはずです。

例えば、以下はテストとして同じ画像をscript とimgタグで貼った場合です。テーマはLightning です。

上がscriptコードです。

プレビューです。上がscriptコードで貼った画像です。

左がPC表示、右がスマホ表示です。どちらのコードでも同じ率で縮小されますよね。

つまり「PC用のコードとスマホ用のコード」、と言って送って来られても関係なく、Wordpressの場合はPC用コードを設置すればレスポンシブになるということです。

コードはどこに設置するのか

広告タグはアドセンスなどと同じで、サイトのhead 部分に設置すれば問題なく表示されます。

• Cocoon の場合は 「Cocoon設定」→「アクセス解析・認証」の「ヘッド用コード」欄
• SWELL やTHE THOR などの場合は「外観」→「カスタマイズ」中の→「高度な設定」→「headタグ」欄
• テーマの機能でheadに書き込むことができない場合は、head.php を探して入力する必要があります。

好きな場所に広告を設置したい場合

headにコードを全て挿入するとサイトのヘッダー部分に広告が入る可能性が大きいので、任意の場所に広告を入れたい場合は広告の以下の部分のみをhead内に設置します。

 以下のコードは一例ですので、ご自身が貰っているコードの該当部分を挿入してください。

<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>

 これを<　/head＞ の上に挿入してください。

そして、IDが入ったコードの部分を任意の場所に挿入します。

<div id="****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>

例えば single.php のHタグ下に設置すれば、全記事のタイトル下に入りますし、side.php に設置すればサイドバーに入るでしょう。

また、カスタムhtmlブロックにコピペすればご自身で記事の好きな場所に広告を入れることができます。

レスポンシブにならないテーマだったら……

テストサイトで試したところでは、TWENTYシリーズのテーマはjavascriptで埋め込んだ画像はレスポンシブにならなそう。

このような場合も、Wordpressだったらわざわざfunction.php にあのコードを入れて、ここで分岐して……というような面倒なことはしなくても良いと当方は考えます。

1. 広告会社から貰った「PC用コード」と「スマホ用コード」を上下に別々に並べて「カスタムHTMLブロック」で貼ります。

2.「PC用コード」と「SP用コード」それぞれに”class”を付けます

PC用コードを記入したカスタムHTLブロックの一番上に

<div class="pc-add">

と記入。

一番下を

</div>

で閉める。

スマホ用コードを記入したカスタムHTLブロックの一番上に

<div class="sp-add">

と記入。

一番下を

</div>

で閉める。

この段階では、上にPC用の幅広いバナーが、下にスマホ用の幅狭いバナーが、ならんで入ってしまっていると思います。

@media (max-width: 500px) {
.pc-add {
display:none;
     }
  }

@media (min-width: 499px) {
.sp-add {
display:none;
     }
  }

上手く行かなかったらご依頼ください。

上手く行かなかったらご依頼ください。