どうもSassyです！
今回ははてなブログでアフィリエイトを行っている方向けのTips記事を書きました。
ただしこのやり方は力技なので今後はてなブログの仕様変更などにより破壊されてしまう可能性があることにご注意ください。
まずはどのようなTipsであるかを具体的に解説して行きます。
概要
サイドバーで「もしもアフィリエイト」で提携した広告を出しわけたい
今回はサイドバーのGoogleAdsenseで広告を表示している部分の下に「もしもアフィリエイト」で提携した広告を張り付けようと思っていたのですが、
そのまま張り付けてしまうと、あるカテゴリの記事に関連性のない広告を表示してしまうこととなるのでカテゴリごとに出しわけたいなと思いました。
GoogleAdsenseはリスティング広告なのでユーザーが検索したキーワードを元に広告を表示しています。
最初、先人がいるだろうなと思いググってみたのですが思いのほか見つからず…
そもそもそんなケースってあまり需要無いのかな？
というかこういう広告は、そのジャンルの記事のなかで埋め込んだりするからあまりサイドバーに出したりしないか。。
と思いつつも私自身はそれがやりたかったので自分で実装しちゃいました。
以下の画像をみてください。
カテゴリ「Python」記事の出し分けサンプル画像
この記事ではゲーム関連の広告を表示したくなく（関係性がないため）、プログラミング関連の広告を表示したかったのでプログラミング関連の広告を表示するようにしてます。
カテゴリ「ゲーム」記事の出し分けサンプル画像
こちらの記事はゲーム関連の記事でこちらでは上の画像とは逆にプログラミング関連の記事を表示したくなかったのでゲーム関連の広告のみを表示するようにしています。
そんなやり方はそんな難しくありません。
JavaScriptの知識がない方は基本コピペでswitch文のcaseを追加していってください。
具体的な解説は以下で説明していきます。
はてなブログへの実装手順
はてなブログで現在の記事ページのカテゴリを取得してアフィリエイト広告を出しわけられるようにするためのコードをスニペットにしてみました。
<div id="custum_ads" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 16px;"></div> // 広告表示領域 <script> const element = document.documentElement; // ① const blogInfoJsonString = element.getAttribute("data-data-layer"); // ② const blogInfo = JSON.parse(blogInfoJsonString); // ③ const permalinkEntry = blogInfo.hatenablog.permalink_entry; // ④ if(permalinkEntry !== null){ // ⑤ const category = permalinkEntry.categories; // ⑥ const ads = document.getElementById("custum_ads"); // ⑦ switch(category){ case '{カテゴリ}': // ⑧ ads.insertAdjacentHTML('beforeend', '{アフィリエイトで払い出される広告のHTMLコード}'); // ⑨ break; ・・・省略 default: break; } } </script>
各コードの説明です。
① 現在ページのhtmlタグの要素を取得します。
② htmlタグの属性にdata-data-layerという属性があるので、その属性値を取得します。
③ data-data-layer属性はJSON文字列であるため、JavaScriptで扱いやすいようにObjectとしてパースを行います。
④ permalink_entryプロパティを取得します。
⑤ ブログTOPなどカテゴリが取得できないページではpermalink_entry: nullとなるためnullの場合はカテゴリが取得できないことにより広告の出し分けが行えないので処理しないでそのまま終了させます。
⑥ 現在ページのカテゴリを取得します。
⑦ 広告表示領域のDOMを取得します。
⑧ 「{カテゴリ}」の部分を、ご自身のブログに設定しているカテゴリ名に置き換えてください。「'（シングルクォーテーション）」は削除しないでください。
⑨ 「{アフィリエイトで払い出される広告のHTMLコード}」の部分を取得したアフィリエイト広告のHTMLコードで置き換えてください。
insertAdjacentHTMLの第一引数に「beforeend」を設定している理由は追加するごとに下から埋め込んでいくので複数埋め込んだ場合に追加した順に表示されるようにするためです。
こちらの方が直感的に広告を追加できます。
上記コードをコピーします。
そしてダッシュボードから「デザイン」→「カスタマイズ」タブ→「サイドバー」→「＋モジュールを追加」→「HTML」を選択します。
「HTML」を選択した際に表示されるモーダルウィンドウのテキストエリアに上記のコードを張り付けて、switch文のcaseをご自身のカテゴリ毎に追加してもらえればよいです。
カテゴリを追加したい場合
カテゴリ追加を行いたい場合は、以下のコードをコピーして上で記載しているスニペットの「・・・省略」部分に差し込んでいってください。
case '{カテゴリ}': ads.insertAdjacentHTML('beforeend', '{アフィリエイトで払い出される広告のHTMLコード}'); // ⑨ break;
カテゴリAとカテゴリBで同じ広告を表示させたい場合
caseをまとめることによりできます。
case '{カテゴリA}': case '{カテゴリB}': ads.insertAdjacentHTML('beforeend', '{アフィリエイトで払い出される広告のHTMLコード}'); // ⑨ break;
switch文の使い方は以下を参考にしてください。
カテゴリがたくさんある場合にカテゴリ一括で取得する方法
カテゴリがたくさんある場合、1つづつ入力したりコピペしたりするのはめんどくさいですよね。
そのため以下のはてなブログのAPIを使ってカテゴリを一括で取得してしまいましょう。
http://developer.hatena.ne.jp/ja/documents/blog/apis/atom
まずはダッシュボードから「設定」→「詳細設定」→「AtomPub」項目へ移動してください。
「AtomPub」項目に記載されているルートエンドポイントとAPIキーを使用します。
ルートエンドポイントは以下のようになっています。
https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom
このルートエンドポイントをそのままコピーしてブラウザのアドレスバーに張り付けてもらい「～/atom」の後ろに「/category」を追加します。
https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom/category
このような感じになります。
この状態でenterすると以下のようにBasic認証ダイアログが表示されます。
このダイアログの「ユーザー名」にはてなIDを、そして「パスワード」にAPIキーを入力してログインボタンをクリックします。
そうするとXMLファイルがダウンロードされるのでメモ帳などで開きましょう。
中身はXMLという形式になっており全てのカテゴリの一覧が取得できているのでこちらをコピペして不要な部分を取り除きswitch文のcaseに使います。 （カテゴリ名以外はすべて不要です。）
最後に
このやり方だとカテゴリが多くなったり、表示する広告が増えるごとに非常に見づらくなります。
これについてはしょうがないので一旦目を閉じますがやりたいことはできており、自分自身でしか管理していないのでとりあえずは良しとしておきます（汗
今回はhtmlタグの属性の値からカテゴリを抜き出して取得しており、フレームワークにより埋め込まれたものかと思います。
今後はてなブログの改修により使用されている技術の変更によりこのコードは破綻してしまう可能性があるので使用する際はその点ご注意ください。（再喝）
そうなった時に、ほったらかしにしてエラー発生しまくっていると、はてなさんへ迷惑をかけてしまうので使用する際は気を付けてくださいね。
また、他によさそうな方法があればご教授いただければと思います。
