読者です 読者をやめる 読者になる 読者になる

はてなブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。

WordPressでもOK! 自分のサイトのブクマでAmazonアフィリエイトが紹介できるらしい「はてなブックマークプラス」を使ってみた

その他 その他-はてなブックマーク その他-Wordpress

 ちょっと最近書いた記事がちょっと人気になってちょっと浮かれて眺めていたところ、ふと気がついたこのリンク。

f:id:kagerou_ts:20170116233326p:plain

 えっそうなの?

f:id:kagerou_ts:20170116233433p:plain

 はてなブックマークプラス…そういうのもあるのか…

 というわけで、申し込んでみることにしました。

気になるお値段は初月無料、月額267円(+税)、1年まとめて払うと1ヶ月ぶん割引!

 申し込み自体はなんのことはない、そのリンクを辿っていくだけ。

はてなブックマークプラス

 詳細はこちらにありますが、アフィリエイト以外にもいろいろあるみたい。

 まあこれはいいんです。いいんですが…相変わらず問題ははてなポイントとかいう支払い方法。

 年間だとですね、結局3,168ポイント必要なのですが、ポイントの購入プランはこちら。

f:id:kagerou_ts:20170116234351p:plain

 お選びください(笑)

 これ3,168ポイント用意するには、5,000ポイントか3,000+1,000ポイントかなんですよね…ほんとやる気無い…

 まあなのでやっぱり一括やめようかという気持ちにもなり、とりあえず1,000ポイント購入して月額払いにしました。3ヶ月分くらいにはなるので。

 これまたブログProの支払いでも思うんでしょうけど、ほんといい加減素直にクレジット決済にしてほしいですね…せめて購入ポイント数を指定できるように…

実際どうなるか

 ここに

f:id:kagerou_ts:20170116234941p:plain

 こうして…

f:id:kagerou_ts:20170116234957p:plain

 こうじゃ!

f:id:kagerou_ts:20170116234740p:plain

 おおー

 まあさくっと貼れましたね。ひとつのエントリにつきひとつみたい。

 商品を変更するときはちょっと迷ったのですが、コメント欄の下に「削除」ボタンがあって、これでいったん削除すると別の商品を登録できるようになります。

f:id:kagerou_ts:20170116235101p:plain

 電書のエントリだからKindle版はないのかなあって思ったのですが、値段の書いてない方を選んでみたらKindleでした。

 まあエントリ内容とはほぼ関係ないのですがお姉ちゃんはいいぞ。

WordPressの外部サイトでもOK! はてなID連携が生きてくる!

 しかしいくらエントリがホットでも、はてなブログじゃなきゃ関係ないだろって思うじゃん?

 そこでこちらをご覧下さい。

f:id:kagerou_ts:20170116235425p:plain

 こちらは私のWordPressのブログなんですが、件のリンクが出ているのがおわかりいただけるだろうか。

 だからつまりこういうことです。

f:id:kagerou_ts:20170116235711p:plain

 はい。

hatebu-memo.scriptlife.jp

 そう、以前ブックマークのタイトル変更でやったはてなIDとの連携、それがここでも生きてきた。

 サイトが私の所有と認識されているから、WordPressでもサービスが受けられるのですね。やったぜ!

 (ちょっと見ていると、どうもはてなID連携前のブックマークには「商品を紹介する」リンクがでてきてなかったです。下にある「情報を更新する」で読み込み直してやると出てきました)

広告消しもできるようになる

 その他の機能としては「広告を非表示にする」がありますね。「設定 > プラス」から選択できます。

 この設定をすることによって、自分が他のブックマークなどを見ていても広告が出てこなくなります。

 はてなブログのそれと違って、自分の所持しているエントリの広告を外す、というわけではなさそう。

 またアプリは対象外みたいなので…普段Androidから見ているからあんまり意味ないかも…

 


 まあしかしそういうわけで今更ながら、ブックマークのほうにも有料プランがあることを知ったわけでした。

 みんなホッテントリとかいっぱい入ってるから活用してんだろうなって思うんだけど、不思議と今までこの話聞かなかった気がします。

 …まあ、この画面の露出がどのくらいあるのかっていう話はありますけど…(あんまり見ないですよねこのページ…)

 とりあえず試してみる感じでいってみようと思います。

はてなブログのAMPでAdSenseを表示させてみた

デザイン AdSense スクリプト

 はてなブログはAMPにしてもAdSenseが表示できないという話がずっとあったのですが、ふとしたところから実は表示できるのでは、という話があったので対応してみました。

スポンサーリンク

AdSenseのAMP対応

 参考にした記事は以下の二つ。

www.weblog-life.net

30cm.xyz

あと、Google AdSenseのAMP対応ページ。

support.google.com

AdSenseコードの取得

 ひとまずGoogleのページを参考に、AdSense用のタグを作ります。

 レスポンシブの広告ユニットを作成して、そこから「data-ad-client」と「data-ad-slot」の値を取得
(例示している値はAdSenseのページにあったものです)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
   style="display:inline-block;width:120px;height:600px"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 既存のコードでも動くとは思いますが、一応分けて作ります。

 それを、ページにあるタグに合わせます。スクロールなし(ファーストビュー)とスクロール有りで若干コードが違うみたい。

・スクロールなし

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

・スクロールあり

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

 このコードをベースにして、はてなブログ向けに修正をします。

はてなブログ向けに修正

 参考サイトにあった修正を加えていく前に…Googleのページを見ると、

AMP 広告ユニットが含まれるページにも AdSense プログラム ポリシーが適用されることを忘れないようにしてください。

 適用されるのか…ということは上に「スポンサーリンク」つけないといけなくない?

 でも通常ページでスポンサーリンクだけ出てくるとおかしいしな…というところも含めて、次のようにしてみました。

・スポンサーリンクを消すためのCSS

<!-- AMPタイトルを通常は表示しないようにする -->
<style type="text/css">
.amp-ad-title { display: none};
</style>

 まずこのCSSを、「デザイン設定 > カスタマイズ > ヘッダ > タイトル下」あたりに設定します。

(通常ページに表示される場所であればどこでもかまいませんが、一例として)

 このCSSはAMPページでは無効になるので、逆にこれが有効になっている通常ページではamp-ad-titleが表示されなくなるという寸法。

・スクロールしなくても見える位置(トップビュー)

<div class="amp-ad-title"><center>スポンサーリンク</center></div>
<div>
<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
<!-- adsense -->
</amp-ad>
</div>

・スクロールしなければ見えない位置

<div class="amp-ad-title"><center>スポンサーリンク</center></div>
<div>
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
<!-- adsense -->
</amp-ad>
</div>

 そしてこの二種類のタグは、参考サイトにあった内容を取り込んで、「見たまま編集」「はてな記法」「Markdown」のどれにも対応しています。

 「data-ad-client」と「data-ad-slot」には、自分のAdSenseの広告ユニットから取得した値を入れて下さい。

 「見たまま編集」ではコメントがないと、タグ自体が無効と判断されて? 勝手に消されてしまうみたい。Markdownではdivタグで囲んでいないとサニタイズされてしまうようでした。

 うちでは基本的にMarkdownなのですが、昔の記事などで「見たまま」で書いてあったりするものがあるので、使い分けるのも面倒だから纏めてしまった。

 あと、amp-ad-titleでスポンサーリンクの文字を入れました。これは先のCSSで、通常ページでは無効になるクラスです。

 centerタグは効いてそうだったので一応入れてみたのですが、どのみちAMPはデザインが簡素になるし、ダメならダメでいいかなという感じ。

 本当はセンタリングと文字の縮小がしたかったのですが…AMPでのデザイン指定がよくわからず、とりあえずこれで。

 
 
 後は、上のコードを記事にペーストしていくだけです。手動で。

 …はてなブログでは一括で設定する手段がないので、アナリティクスでURLにamp=1が付いているアクセスを調べて、多そうなページに差し込んでみました。

 私は、基本的に記事の上部にスクロールなし、記事の下部にスクロールありのほうのコードを差し込みました。

AMP対応後の確認

 AMP対応後は、URL末尾に「&amp=1」を付けて確認します。

 これはChromeでも確認できますが、ただこれだけではAMP向け広告は出てこないようで、「その他のツール > デベロッパーツール」からスマホサイトとして確認してみると、ちゃんと出てきました。

 AMP向けデザインの確認、どうすればいいのかよくわからないので良い方法があれば追記したいとは思います…


 現在、AMPのアクセスが23%程度を占め始めているので、そろそろ対応しておきたい…と思っていたタイミングの話でした。

 行うこと自体はそう難しくありませんでしたがでも手動はマジつらい…はてなさん、ほんと早めの対応を…AMP向けヘッダとフッタの設定だけでいいからとりあえずは…

スポンサーリンク

はてなブログ以外のブログに書いたエントリでタイトルなどを変更したことを「はてなブックマーク」に反映させたいときに設定すること

設定 設定-ブログ連携 その他 その他-Wordpress

watto.hatenablog.com

 こちらの記事を読んで。ブックマークされた記事のタイトルとかは、向こうにキャッシュされているから変更されないんだよなあって思っていたのですがこれは気づかなかった。

 で、私ははてなブログ以外のブログも運営していて、そちらのほうもブクマしてもらえることがまれにあるのですが、そっちはどうするんだろうと思って調べてみました。

はてなブログで書いた記事のタイトルなどを更新するとき

 まずおさらいとして、はてなブログの記事がブクマされたとき。

 上のわっと氏のエントリにあるように、自分のブログの記事であれば「情報を更新する」ボタンが出てきます。(ブログと同じはてなIDでログインしている場合)

f:id:kagerou_ts:20161105145751p:plain

 でも、いくら自分のブログでもWordpressなど外部で作成したブログの記事では、このリンクは出てきません。

f:id:kagerou_ts:20161105145901p:plain

 まあそうですよね。では何か方法があるのか

外部ブログをはてなIDに紐付ける方法

 ありました。

 次のヘルプ内、「はてなブックマークとページを結び付ける」にあるAccount Auto-Discoveryを設定することによって、そのブログの所有者をはてなIDと結びつけることができます。

b.hatena.ne.jp

 ここにあるように、headタグに設定をしてやればいい。

 では具体的にどうするか。私はWordpress+Simplicityを使用しているので、その設定方法を記載します。

WordpressではてなIDとの連携を行う

Account Auto-discoveryの内容

 まず件のAccount Auto-discoveryコードですが、次のようにします。

<!-- はてなブックマーク Account Auto-Discovery -->
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/">
<rdf:Description rdf:about="<?php echo (is_single() ? get_permalink() : home_url('/')); ?>">
<foaf:maker rdf:parseType="Resource">
<foaf:holdsAccount>
<foaf:OnlineAccount foaf:accountName="あなたのはてなID">
<foaf:accountServiceHomepage rdf:resource="http://www.hatena.ne.jp/" />
</foaf:OnlineAccount>
</foaf:holdsAccount>
</foaf:maker>
</rdf:Description>
</rdf:RDF>
<!-- はてなブックマーク Account Auto-Discovery ここまで -->

 「あなたのはてなID」には、自分の(連携させたい)はてなIDを設定してください。はてなIDっていうのはid:xxxって出ている奴ですね。たとえば私だと「kagerou_ts」になります。

f:id:kagerou_ts:20161105153823p:plain

 「<rdf:Description rdf:about="<?php echo (is_single() ? get_permalink() : home_url('/')); ?>">」のところでは、「個別の記事ページの場合はそのURL、そうでなければサイトのURL」を出すようにしています。

 get_permalink()だけだと、トップページなどで表示したときに最新の記事のURLが出てしまっているようだったので、どうしようかなと思ってこうしてみました。

 はてなのヘルプにも

「エントリーへのリンクURLあるいはウェブサイトのURL」には、このコードを貼り付けているページのURL(permalink)を記入してください。(permalink の記入が難しい場合はそのウェブサイトのトップページのURLでも構いません。)

とあるのでたぶん大丈夫。

 そしてこのタグをどこに設定するかと言うことなのですが…使用しているテーマによって若干違います。

 ですので、のどこに追記すればいいか、というのは使用テーマごとに調べていただくことになります。

 ここでは自分の使っているSimplicityとプラグインの紹介、最悪ここに書けば出せるという場所を記述します。

Simplicityでの設定

 Simplicityではheaderやfooterをカスタマイズするためのファイルが用意されているので、そちらに追記すればOKです。   wp-simplicity.com

 このページにある、「header-insert.php」がそれにあたります。

 「外観 > テーマの編集」で右のファイル一覧から「header-insert.php」を選んでAccount Auto-Discoveryコードを追加し、「ファイルを更新」を押せば反映されます。

 全ページに表示するのであれば、「<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>」の下でいいかなと思います。

プラグインを導入して設定

 次は、ヘッダやフッタをカスタマイズできるプラグインを導入する方法。

 何かないかと思っていたのですが、そのものずばりなプラグインがありました。

wordpress.org

 こちらを導入すると、「設定 > Header and Footer」が出てきますので、それを開いて「Head and footer」タブの「 SECTION INJECTION」「Every page」に追加します。

f:id:kagerou_ts:20161105153319p:plain

 そして「Save」

 このプラグインはその他にも機能があるようなので、お好みで。

mono96.jp

header.phpを直接編集する

 これはテーマのコードを直接修正する方法です。

 「外観 > テーマの編集」で右のファイル一覧より「テーマヘッダー (header.php)」を選びます。

 それで、そこのどこかに…これはテーマごとにファイルが違うのでなんともいえないのですが、適切なところに記載します。

 よくわからなければ「」とあるところの上あたりでたぶん大丈夫だと思います…

 このファイルを編集する方法は、テーマの更新で変更が上書きされてしまうようなのであまりおすすめではありません。

 テーマごとに用意されている方法か、プラグインを導入するのがいいと思います。

設定した結果

 はい、無事に設定されていると、サイトのソースコードにAccount Auto-Discoveryのコードが出てきます。

f:id:kagerou_ts:20161105153942p:plain

 トップページではこんな感じで。

f:id:kagerou_ts:20161105153954p:plain

 個別の記事ではこう。

ブクマしてみる

はてなブックマークでセルクマ(セルフブックマーク)してみる

 そして実際にこれをブクマしてみるとどうなるか…とりあえず自分の記事で実験してみました。

 昨日NHKに問い合わせた記事を実験台にブクマしてみると…

f:id:kagerou_ts:20161105154338p:plain

 出てきました!

f:id:kagerou_ts:20161105154355p:plain

 ついでに通知も来ました!

 はてなIDと連携しておくと、通知などでブクマされたときもわかりやすいということですね。

 というわけで連携確認が取れればOKです。おつかれさまでした。

今までブクマしてもらった記事はどうなるの?

 これからの分はこれでいいとしても、いままでの記事はどうなるのか…実は、自分の記事ではまだ変わってません。

 新しくブクマされたときに更新されるのか、定期的にクロールしてくれているのか、それとも変わらないのか…ちょっとわからないです。ごめん。

うまく連携できなかった/失敗したときはまた別の記事をブクマして確認しないといけないの?

 これについては自分のブクマを削除してから再ブクマで大丈夫でした。

 ただ挙動として、一度ブクマをされた記事はブクマ0になっても「0 User」として残るが、一度もブクマされていない記事は「未ブックマーク」となっていてテストには使えませんでした。

 一度ブクマして削除した記事。

f:id:kagerou_ts:20161105154952p:plain

 で、こっちが一度もブックマークをしていない記事。

f:id:kagerou_ts:20161105155010p:plain

 おそらく最初のブクマで情報を登録、その後更新しているのでしょう。

 バンバンブクマがつくような有名な方(いいなあ)はテストしづらいとは思いますが、自分のブクマを削除→再ブクマの流れでたぶん大丈夫だと思います。

 (ただシステム的な話ではないところで少し気になったのは、同じページのセルクマを繰り返すペナルティとかないよね…? というところ。僕は3回くらいしくじりましたが今は元気です。でもその点も含めて自己責任でお願いします。)

 (即追記:またやらかしたので削除->再登録とかしてみても更新してくれなかったわ…そのへんなんか、上手いことやってるのかもしれないね)

 (さらに追記:セルクマしても更新されなくなってしまったので別の記事で試してちゃんと動いていることを確認した。重複とかしないように制御入っているんでしょうね。あと初回は出てなくても1回くらいF5で更新してやると出てくるかも)

タグを設定してブクマしても連携してくれない

 原因はケースバイケースになりますが…私がやらかしていたのはURLの部分の設定ミス。

<rdf:Description rdf:about="<?php echo (is_single() ? get_permalink() : home_url('/')); ?>">

の部分が、

<rdf:Description rdf:about="<?php echo (is_single() ? get_permalink() : home_url('/')); ?> ">

となっていました。rdf:about要素の最後に半角空白が入ってしまっていたのですよね。わかりますか。

 それによって半角空白もURLと認識されて、ブクマした記事のURLと一致していないと判定されていたのだと思われます。

 うまくいかないときは実際にどういうふうにタグが出力されているか、ブラウザのソースコードを表示から確認してみると何かヒントになるかもしれません。

 

 

カテゴリ格差、あるいは「読書ブログは儲からない」

その他

AdSenseのトップページが変わってドメインごとの収益が表示されるようになったわけで表示されてた今月分(10月分)を見てみたらば。

ドメイン 見積もり PV クリック数
scriptlife.hacca.jp ¥4,000 1.77万 125
tsundoku-diary.scriptlife.jp ¥1,700 1.98万 118

ア"…ア"…ア"……

(だいたいの数字くらいしか一応載せない方向で)

カテゴリ格差

scriptlife.hacca.jpは主にプログラミングネタ。たまに雑記みたいなものです。 Wordpressを分けてはいますがブログとしては同じ感じ。

script life 千夜一夜 – せいいっぱい輝きたい

scriptlife 千夜一夜 プログラミング別館 | Unityとかプログラミングのこととかいろいろ

tsundoku-diaryはラノベとかの読書日記。

怒濤の詰ん読解消日記

 かねてより、「読書日記はカテゴリ的に儲からない」という話はありましたけど、はっきり実体験として結果が出ましたことをここに書き残しておきます。

 クリック数は誤差程度だとしても、PV多くて見積もり1/2以下というのはどうみても…

 IT系の記事のほうは、たまに明らかに単価100オーバーっぽいところがあったりして、広告ユニットごとのパフォーマンスで薄々感づいていたんですがGoogle先生ばっさり見える化やってくれたという感じです…

 今月だけだとアレなんで先月も見てみたけどさらにつらい

ドメイン 見積もり PV クリック数
scriptlife.hacca.jp ¥5,700 2.5万 189
tsundoku-diary.scriptlife.jp ¥3,200 4.63万 191

アフィリエイトはどうなの

 といっても本の感想なんだから購入分があるでしょう? ということでAmazonのそれから関係ありそうなもの(kindle書籍、本、CDなど)を集計してみると、

ドメイン 見積もり
scriptlife.hacca.jp ¥1,800
tsundoku-diary.scriptlife.jp ¥2,200

 うーん…かろうじて上回っているといえばそう…(でも今月はたまたま大きいお買いあげがあったので、それを引いて考えるとtsundoku-diaryのほうが大きく伸びているかな、とは)

 ちなみにA8やらVCやらはゼロが行列をなしているので除外。アプリも…いくつか貼ってみたものの、やっぱりゼロが行列なので除外。

 つうかみんなどう考えてもAmazonからしか買ってへん

 いや、まあ、ですよねーっていう気持ちですけど。(電子書籍はBOOK☆WALKER推したい

ライトノベル、マンガなど電子書籍を読むならBOOK☆WALKER

 いろんなブログの収支報告みてるとあのへんが明らかに貢献しているものばかりなんですがどうやってんのかしらん。いや、カテゴリによっては全然違うんやろうかなこのへん。

 あとアプリな。あれはまあ、椅子取りゲームやから…最初にユーザーが見る、大きいサイトとかがガッと総取りしてんやろかなあ。  


 そういうわけで、収支メインでブログをやっていくならカテゴリはマジで選ばないとしぬというお話を夜中に衝動的に書いた。

 つっても数千円数百円単位の話ですし、ウチだけのサンプルですし、もっと規模が大きくなればまた違った景色になるかもしれませんけど。そしたらまたそのときは衝動的に書くかも。肝心要の何を選べば大勝利できるかはわからない。  
 
 
 
 いいんですようちは…収益がメインじゃないもん…(震え声

Markdownのコード配色を変更する

デザイン

 はてなブログのMarkdown記法で使っているソースコードの配色を変えます。

 デフォルトでは背景黒のものなのですけど、個人的には白が好みなのです。

CSSの変更をする

 例えば変更前はJavaだとこんな感じ。

f:id:kagerou_ts:20160903114847p:plain

 こちらのサイトを参考にしてCSSを変更していきます。

kerotaa.hateblo.jp

 というか、元々のデフォルトが個人的にはそれでいいかなあという感じだったので…

 .entry-content pre.code {
    background-color: #f5f5f5 ;
    color: #657b83 ;
}
.synSpecial { color: #c000c0; }
.synType { color: #3EC63E; }
.synComment { color: #4F80E5; }
.synPreProc { color: #9355E6; }
.synIdentifier { color: #51CFCF; }
.synConstant { color: #FF6666; }
.synStatement { color: #D88A17; }

という感じに戻して、背景色だけ変えました。

 これを、「デザイン > カスタマイズ > デザインCSS」に追加します。

f:id:kagerou_ts:20160903114924p:plain

こうなりました。

アプリ広告バナーをランダム表示するスクリプトを作ってみました

スクリプト

 Zucksアフィリエイトなど、アプリの広告をサイトに掲載するときに使用するためのスクリプトです。

 設定した内容からランダムでひとつ選んで表示するだけの簡単なものではありますが。

内容

 特定の形式で書いたリストからランダムで選択したバナーを、指定したタグに入れます。

 例えば

var list = [
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  // デフォルト表示
  {
    'default': 'PC向けバナー'
  }

というリストを書いた場合。iPhoneで開くと「iPhone向けバナー1」と「iPhone向けバナー2」が、それぞれ1/2の確率で表示されます。 Androidの場合は「Android向けバナー1」または「Android向けバナー2」となります。

 iPhone/iPad/iPod touchでもAndroidでもない場合は、「PC向けバナー」になります。

 単純に、リストの中でiPhoneまたはそれ以外の表示内容を指定していて、そこからランダムで選択されたものが表示されるというものです。  キーに「priority」として数を入力すると、その項目の出現率がpriority分上昇します。(ただその数値分水増ししているだけです)

  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 

 これで3倍!

設置方法

 内容は単純なのですが設置が少しややこいかもしれない。

 4つに分けたそれぞれのコードは別々のところにあっても大丈夫ですが、ここでは例として「デザイン > カスタマイズ > 記事 > 記事上」に全て書くことにします。

スクリプトの設置

 メインとなるスクリプトを記載します。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script lang="text/javascript">
<!-- Version 1.0.1 Copyright http://http://hatebu-memo.scriptlife.jp// -->
function show_banner(banner_id, list) {
    // OSの判定
    // OSによってバナーを変える
    os_key = 'default'
    if (navigator.userAgent.indexOf('iPhone')>0
        || navigator.userAgent.indexOf('iPad')>0
        || navigator.userAgent.indexOf('iPod touch')>0){
        // iPhone
        os_key = 'iphone'
    } else if ( navigator.userAgent.indexOf('Android')>0 ) {
        // Android
        os_key = 'android'
    }
    
    // 表示するバナーをランダムで設定
    // priorityが設定されていたら、そのぶんだけ確率を上げる
    index_list = [];
    for (var i=0; i<list.length; i++) {
        // 対応するバナーがない、文字列が空の場合は無視
        if ( false == (os_key in list[i]) ) { continue; }
        if ( list[i][os_key] == false ) { continue; }
        
        if ( 'priority' in list[i] ) {
            priority = list[i]['priority'];
        } else {
            priority = 1;
        }
        for(j=0; j<priority; j++) { index_list.push(i); }
    }
    
    idx = index_list[ Math.floor( Math.random() * index_list.length ) ];

    $('#'+banner_id).html(list[idx][os_key])
}
</script>

(jqueryは他で読み込んでいれば外してしまってもかまいません)

バナーを表示させるための要素を設置

 バナーを表示させるための要素を、表示したい場所に設置します。

 そのときに、「id='xxx'」という形でIDをつけてください。

 例としてdivタグを使います。

<div id='banner-sample'>
</div>

 また、バナーの表示する位置、大きさの調整などはこのdivタグで行うとよいです。

 例えば表示幅を300pxにしたい場合は、

<div id='banner-sample' style='width: 300px'>
</div>

などとします。

表示するバナーのリストを作成

 バナーリストを作ります。

 JavaScriptの配列に、特定の要素をキーにして列挙していきます。

<script lang="text/javascript">
var list = [
  // デフォルト
  {
    'default': 'PC向けバナー'
  }, 
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 
];
</script>

「iphone」がiPhone/iPad/iPod touch向け、「Android」がAndroid向け、「default」がその他になります。

「priority」は少し特殊で、そこに指定した数字だけ、他のバナーより出現率が○倍に増えます。

  • 「default」に設定する広告のポイント

 「default」では主にPCのときに表示されることになると思うので、それに合わせたものがいいと思います。

 AdSenseが無難かなあ。

 それでAdSenseを貼り付けるときに、コードが長くなってしまうので、こちらのコードを使っていったん文字列にしてから入れるとわかりやすいかと思います。

uxlayman.hatenablog.com

var adsenseCode = (function () {/*

<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

var list = [
  // デフォルト
  {
    'default': adsenseCode
  }, 
  ...

みたいな感じで。

 また、AdSenseが表示されたときに、その広告の上に「スポンサーリンク」などが出ていないといけないので、そこも注意点です。

 差し込むコードの中に一緒に入れてしまうか、表示領域の上に用意しておくかはお好みで。(うちは表示領域の上に「スポンサーリンク」と書いてしまってます)

表示を行う

 最後に表示です。

<script lang="text/javascript">
$(function() {
  show_banner('banner-sample', list);
});
</script>

というようにshow_bannerファンクションを呼び出して下さい。

これで記事のページ上に、バナー広告が出ていると思います。

このスクリプトを作成した目的

 アプリのほうのバナーなどもちょっと設置してみるかなあと思ってZucksというASPを見ていたのですが、ちょっと個人的に困ったのでそれを解決したかった。

 解決したかったことは2つ。

  • iPhoneとAndroidの広告が別になっていた

 まずこれ。うちのブログはiPhoneユーザーもAndroidユーザーも訪れてくれるんですが、Zucksから提供されていたURLはiTunesストアやGooglePlayストアに直接リンクされておりましたので、それぞれに合わせたURLを出したいなと。

  • 標準機能ではランダム表示ができなかった

 次にこれ。一度設置したら手動で貼り替えるまで、同じ広告が出続けることになってしまう。

 Smart-Cなどはランダム表示のスクリプトを用意してくれていたみたいだったのですが…PHPだったのでサーバーが必要でちょっと断念。なくはないけど…

 という、この二点を解決しようと思ったときにJavaScriptでそこそこ簡単に書けないかなあと思って作りました。

 もし何かのお役に立てれば幸いです。

改良のポイント

 単純にランダムで要素を入れているだけなので、別にバナーローテーションだけじゃなく使えるかも知れません。

 また、JavaScriptで動かしておりますのでサーバーなどを別途用意する必要はないのですが、いかんせんリストが長くなったりすると面倒なので、別サーバーから読み込む形にしてもよいかもしれません。

 そうすると、リストの更新などがそちらのデータを修正することで行えるようになります。

 最終的にshow_bannerにIDとリストを渡してやればよいので、リストの作り方や表示用のタグのレイアウトなんかは各自調整するところかも。

免責事項ならびに利用、改造について

 このスクリプトを使用したことで被った損害・損失に対しては、一切の責任を負いかねます。自己責任でご利用下さい。

 著作権は放棄しませんが改造、転載等は許可します。

 ただし、改造、転載など、本サイト外で配布されたスクリプトについては、私には責任の無いものとします。

修正履歴

  • 2016/9/3 1.0.1 公開 iPad/iPod touch対応、その他デバイス(主にPC向け)対応
  • 2016/9/3 1.0 公開

(Proのみ) はてなブログでAMP対応してみた結果、一時的に下がったもののすぐ戻りましたという話

設定 設定-詳細設定 Pro

 まずはこちらのグラフをご覧下さい。これはうちのAdSense全体の16日から22日のグラフです(数字は割愛)

f:id:kagerou_ts:20160823223212p:plain

AMP適用したのが15日です。その後16日は上向いたものの、やはり下がっています。

下降するのは一時的?

 ですがその後、2日くらい下降した状態なのが続いた後でまた上向きになり、現在は変わらない状態になっています。

 まとめてると1日後に半分くらいになって、2日後くらいから元に戻った、というところでしょうか。

 …というか、そもそもAMPで下がるぶん=AdSenseが表示されないぶん、というはずなので、全体の数値に影響がでること自体がおかしいといえばそうです。

 はてなブログ以外のブログもあって、そちらはなにも変更していないのに引っ張られるかのようなタイミング。

 クリック率も結構きまぐれなところはあるし、これくらいは誤差の範囲だったのかなあ…って気もしますけど。

 ただ、この何故か全体的に下がるという現象は以前にAMPを適用してみたときにも発生しており、そのときは下がったところでビビって戻してしまったのですが2度目ではあるので偶然…なんだろうか、という感じでもあります。

 そして、増減でいればその後に上昇しているというのも、事実としてはあります。

 最適化か何かが動いていたということなんだろうか…

AMPでのアクセスはどれくらい?

 はてなブログでは、AMPページで読まれた場合はどうもURLの後に「amp=1」という引数を付けてアクセスが来るようです。

 なのでアナリティクスの検索バーのところにamp=1といれてやって集計した結果、うちだとPVは261、全体の2.23%程度でした。

 うーん、それも一つの記事が<b192PVとか占めているわけで…データとしては微妙ですね

 ただ、URLだけの話なら以前からあったんじゃないかって思って7月とかを同じように検索してみたのですがamp=1は見当たらず。

 サイト単位で何かしらの判別をしているのかもしれません。

PV数にプラスになった?

 …というと、うちのデータとしては、「可もなく不可もなく」という感じです。

 ただ今のところマイナスにはなっていないので、ひとまずこのままオンにしていってみようかと思います。

 AMP自体は悪いものではないですし、まあいいんじゃないかなーみたいなところで。


 AMPをオンにした直後に下がってびっくりした後、またその影響はなかったように戻ってきたので、同じような現象が出た人が居た場合にもうちょっとだけ様子を見てみるといいかもしれないですよ、ということで。