オーディエンスネットワークがサイトに表示されない場合の対処法

広告

オーディエンスネットワークがサイトに表示されない場合の対処法

Facebookのインスタント記事を自分のブログで試してみるついでに、Facebookオーディエンスネットワークをブログに導入することにしてみました。オーディエンスネットワークのページからスタートして(Developper向けFacebookアプリのページの左メニュー一番下の「製品を追加」からでもスタート出来ます)サクサクと登録作業を進め、広告枠の設置対象となるドメインの設定し広告枠(広告配信用のHTMLタグ)を作成して、いざ、広告枠を管理することができるWordpres プラグインの Quic Adsence を使ってHTMLタグを設置したところ、何も表示されない…という事態になりました。。

Facebook Audience Network

設定間違っていないか何度も確認したり、オーディエンスネットワークのパブリッシャー向けの設置方法を開設したブログを検索しまくったりしても同じような状態になった人がいなかったので、Facebook for Developers のサポートに問い合わせをしてみたところ、下記のような返信がありました。

Thanks for contacting Facebook regarding to Audience Network integration.

I reviewed your page and noticed the issue about the ad not showing up at the page. The existing social plugin on the page impacted the Audience Network. So avoid this, I would suggest to put Audience Network code into a iframe to avoid the conflict.

Please try it and let me know if you have further questions.

なるほどー、ソーシャルプラグインが干渉しているのね。そうかそうかFacebookページプラグインが入ってるもんなー。んーー、、、まぁ、オーディエンスネットワークのモバイルWeb掲載はまだβ版なんで仕方ないなと思いつつ、インラインフレーム( iframe )とJavaScriptを使って(いろんな方に教えてもらいつつ)対応したやり方を共有したいと思います。

Facebook Audience Network

iframeで読み込む用のHTMLファイル作成

インラインフレームで読み込む元になるページを作成するために、まっさらなHTMLファイルを用意します。下記のような内容をテキストエディタに貼り付けて「 .html 」形式で保存すれば出来あるがと思います。(スマホ用のHTMLサンプルファイルを適当に検索して使っていますので、ご自身のサイトに合わせて適切にご修正頂ければと)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
  <h1></h1>
</header>
     <center>

【ここにあなたのFacebook Audience Network のモバイルウェブ用の広告埋め込み用HTMLタグを挿入してください】

     </center> 
<article>
  <section>
    <h2></h2>
    <p></p>
  </section>
</article>

<footer>
  <p></p>
</footer>
</body>
</html>

15行目にFacebook オーディエンスネットワークの広告HTMLタグを挿入してくださいね。

上記のような感じでまっさらなHTMLファイルが出来上がったら、「 banner.html 」などのように適切なファイル名を付けて、 http://yourdomain.com/banner.html みたいにとなるようにアップロードします。(この時にWordpressでページを作成してしまうと意味が無いので、Wordpressとは別の場所にアップするようにしましょう。

アップロードが完了したら http://yourdomain.com/banner.html にアクセスしてみて、PCからは何も表示されず、スマホからは表示されるかどうかを確認します。スマホからオーディエンスネットワークの広告が配信されていることを確認したら次のステップに進みます。

JavaScriptとiframeのタグを作成

私はPHPの扱いなど分からないので単純にiframeで下記のような記述をして貼り付けてみたところ見事に失敗しましたwたしかにスマホからサイトを見てみると広告が表示されているのですが、PCから見てみるとこの広告分ポッカリとスペースが空いてしまったのでした。

<iframe id="fb_ad" src="ここに先ほど作成したURLを入れる" width="100%" height="280" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>

そこでいつもお世話になっております先輩に聞いてみたところ「JavaScript でユーザーエージェントを指定しなきゃだめだよー」と教えて頂きました。いつも助かります…。しかしながら、下記のようなPHPの記述を挿入できるようなスキルは持っていないためw

<?php 
if(wp_is_mobile())
{

}
?>

これまたいつも大変お世話になっております後輩にまた頼りにさせて頂くことにしまして、直接HTMLに記述しても使えるような形式に直してもらったのがこちらです。(間違っていたりもっとよく出来る場合はコメント頂ければと!)

<div id='facebook-audience-network'></div>
<script type="text/javascript">
	window.onload = function(){
	var UA = navigator.userAgent;
	if (
	//判別条件start
		(UA.indexOf('iPhone') !== -1)//iphoneか、
		 || ((UA.indexOf('Android') !== -1) && (UA.indexOf('Mobile') !== -1))//またはAndroidMobile端末、
		 || (UA.indexOf('Windows Phone') !== -1)//またはWindowsPhone、
		 || (UA.indexOf('BlackBerry') !== -1) //またはBlackBerryの場合
	//判別条件end
	) {
	document.getElementById("facebook-audience-network").innerHTML = '<iframe id="fb_ad" src="ここに先ほど作成したURLを入れる" width="100%" height="280" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>';
	};
	}
	</script>

上記記述の13行目にある「ここに先ほど作成したURLを入れる」という部分に先ほど作成した http://yourdomain.com/banner.html というURLを挿入して頂いて、Quick Adsence などに貼り付けると見事!スマホからのみFacebook オーディエンスネットワークが表示され、PCブラウザから見た時には何事も無かったかのように痕跡も残さずということが出来ました。いやーほんと良かった。とても勉強になりました。

同じところでつまづいた方への参考になれば幸いですー。
 
 
ちなみに余談ですが、Facebook Instant Articles への対応はWordpressなら公式プラグインがあるので超簡単でした。気になる方はこちらの記事を参考に設定してみると良いと思います。対応しているとスマホアプリ版Facebookのタイムラインに張られたリンク(タイムラインに表示されるサムネイル画像の右上に雷マークが付いているものはInstant Articlesに対応しています)をタップした時の表示速度が異常に早くなりますwちょっぱやです。

ただし、5記事以上で審査に出さないといけないのでこの記事を書いていますwこの記事抜いてあと3記事がんばりますん。それでは。



Tetsunori Yuasa

Tetsunori Yuasa

名古屋在住・住んだことがあるのは福岡・大阪・東京・ハノイ。世界のいろんな街を歩きながら、歴史的建造物や風景や食事などをInstagramで撮るのが好き。撮りためた旅行写真はこちら。お仕事のご依頼はこちら

コメントを残す