ワイヤード・パンチ

サイトレイアウトを変えてみました。よろしければアンケートにご協力ください。

忍者admaxの広告をTumblrにレスポンシブっぽく貼りたい。

数日前からですが、3つ目のサイトも新たに立てました。ヘッダーもしくはフッターのナビから「袋とじ」を選べば行けます。(現在は閉鎖済み)でもアレな内容のイラストサイトなので、adsense広告を貼ることは禁止されています。代わりに制限の少ない忍者admaxを貼っているのですが、adsenseと違って端末サイズに応じた広告を自動的に出力する、便利な機能がありません。何とかして、PCとスマホで広告を切り替えたいのですが。

広告

phpが使えるサーバだったら簡単。

リンクがクリックされてページが表示される前に実行される、phpを使えるサーバを利用しているサイトであれば、phpでユーザエージェントの判定を行って、PCだったらPC用のscriptタグを出力、スマホだったらスマホ用のscriptタグを出力、と言ったことができます。wordpressが使えるなら、端末判定用の関数が用意されているので、さらに簡単なはずです。

しかし、本サイトはTumblrで作られています。Tumblrはテンプレートのカスタマイズができるとはいえ、phpを記述することができません。独自タグなら用意されているものの、PCとスマホで処理を分けるような、そんな気の利いた独自タグは用意されていません。

javascriptならば記述することができるので、それでユーザエージェントを判定して、scirptタグ内から外部ファイルとして広告jsを読み込む、というのをしたかったのですが、これがなかなかうまいこといかなかったのです。

失敗例1。

まずは、scriptタグ内から外部jsを読み込むという処理を考えました。忍者admaxは、広告枠ごとにそれぞれのjsファイルのパスが設定されているので、ユーザエージェントを判定し、PCだったらPC用のjsファイル、スマホだったらスマホ用のjsファイルをインクルード、ということをやりたかったのです。

// 要jquery
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
	$.getScript(スマホ版の広告jsのパス);
} else {
	$.getScript(pc版の広告jsのパス);
}

しかしこのコードを実行すると「Failed to execute ’write’ on ’Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.」というメッセージが表示されました。外部jsファイルをインクルードする地点でエラーとなってしまいました。(Chromeで検証ツールを見た場合。)忍者admaxのjsは、外部からの読み込みが禁止されているのでしょうか。

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき | Web雑記帳。

団塊爺ちゃんの備忘録

上記は今回参考したサイトです。

失敗例2。

scriptタグ内から外部ファイルとして読み込むのがダメだというのなら、次に考えついたのは、忍者admaxのjsファイルから、その中身を抜き取ってしまうということ。jsファイルに直接アクセスすれば、コードが表示されるので、それをコピーしました。ただし中身をすべて取るのではなく、function({ … })で囲まれているので、囲いを外した状態で取ります。

$(function() {
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		// スマホ版の広告jsの中身
	} else {
		// pc版の広告jsの中身
	}
});

しかしこのコードの問題点は、PC版広告そのものは表示されたものの、忍者admaxの管理画面でアダルト広告のみ表示に設定しているにも関わらず、一般の広告も表示されてしまいました。このまま使うのはまずいです。また、スマホ版のjsは直接アクセスしても、なぜか中身が何も表示されなかったため、どのみちこの処理を作ることはできませんでした。

今回の対処法。

こうなれば残る手段は、どちらの広告scriptも実行しておいて、あとからそれを端末に応じて隠す、ということです。つまり、PCとスマホ両方の広告は出力されているけど、片方は見えない状態。

// 広告を隠す (要jquery)
$(function() {
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		$(".ad_pc").hide();
	} else {
		$(".ad_sp").hide();
	}
});

PC用広告が出力される場所にはPC用のclassで、スマホにはスマホのclassで囲っておき、ユーザエージェントを判定して片方のclassにjqueryで非表示をかけています。

これで片方は見えなくなるのですが残る問題点として、広告の出力自体は行われているはずなので、ページをPCで開こうがスマホで開こうが、どちらの広告も表示回数が加算されてしまうかもしれません。それが規約上良いのかまずいのか。怒られたらそのときはそのときで。正直言って、現時点では何の稼ぎにもなっていないので。

余談。

最近、アダルトらしいアダルト見ても、汚いとしか思えなくなった。もう歳かな。

追記。(2018/1/13)

忍者admaxが正式にレスポンシブ広告を配信したので、この記事の内容は無意味となりました…。