はてなブログの記事下にサムネイル付きの関連記事をランダムに出す方法 に nendのネイティブ広告を追加してみた（nendのネイティブ広告導入方法も書いてあります）

スマホ表示の場合の広告としてnendを利用しているのですが、nendからネイティブ広告始めました！というメールが来ました。

※nendはスマートフォン専用の広告です。

ネイティブ広告というのはyahooやmsnなどニュースサイトで見かける、記事の一覧の中に埋め込まれている広告のことです。

※詳しくはこのサイトの説明を読んでください。

webbu.jp

サイトに溶け込んで、一見他の記事と同じように見えるのが特徴のようです。

物は試しなので、以前開発したサムネイル付きの関連記事をランダムに出す方法に導入してみました。  

※サムネイル付きの関連記事をランダムに出す方法の記事

jitenshaya-se.hatenablog.com

 ※ここからはnendの申し込みは完了して承認されている前提で書きます。
     審査も厳しくないので普通に申し込めば利用できるようになると思います。

 広告追加の流れ

広告枠の追加の流れはこんな感じです。

それでは順番に説明します。

１．広告枠を追加する

広告枠の管理のページを開きます。

次に新規広告枠の作成をクリックします。

必要事項を記入し、作成をクリックすると広告枠が作られます。

新規広告枠の作成画面の記入項目について

サイト/アプリ：　広告を表示したいブログの名称を選びます。

広告枠のタイプ：　ネイティブアプリ　を選択します。

広告枠名：　適当に付けてください。

広告枠の紹介：　広告主向けに広告枠の説明を記載してください。

広告画像選択：　正方形の小さい広告画像を選択してください。（画像サイズは無視して構いません）

広告表示数：　１記事に付けられているカテゴリの平均の数を選択してください。

１８禁広告：　掲載するかどうか選択してください。

２．レイアウトを作成する

広告枠の管理のページを開き、先ほど作った広告枠の　レイアウト　をクリックします。

広告コードの作る方法として　Easy Ad editor　と　Professional Ad Editor　が選べますが、今回は既に組み込みたいHTMLのコードができているので　Professional Ad Editorをクリックします。

※Easy Ad editor　を使うとサイトの見た目に合わせた広告コードを自動で作成できますが、一部間違ったりするので、任意の場所に追加したい場合はまずは　Easy Ad editorで一度選択し、Professional Ad Editorで後から微調整すると簡単だと思います。

タグ編集の中身を以下のものに張り替えます。

<li class="same-category-entries-entry">
<a href="{{CLICK_URL}}" class="" target="_blank">
<p class="same-category-entries-entry-thum">
<img src="{{SMALL_SQUARE_IMAGE}}" class="" alt=""></p>
<p class="same-category-entries-entry-title">{{AD_DEFINE_TAG:ptn=1,deco=2}} {{SHORT_TEXT}}</p>
<span>{{PROMOTION_NAME}}</span>
</a>
</li>

※関連コンテンツの出力用HTMLに合わせてあるので、変更していない限りこのまま貼り付ければ大丈夫です。

広告コードを作成する　をクリックするとレイアウトが作成されます。

３．広告コードをサイトに貼り付ける

広告枠の管理のページを開き、先ほど作った広告枠の　広告コード　をクリックします。

新規広告枠の作成画面で広告表示数で選んだ個数分だけ広告コードが並んでいると思います。

一番最後のタグのみ nendのjsファイルを読み込むコードが付いていますが、それ以外は　display_order（表示順？）　しか違いがありません。

この画面で、全てのタグで共通な　media、site、spot　を確認し、メモしておいてください。

※一番最後のコード

<script type="text/javascript">
var nend_params = {"media":*****,"site":******,"spot":******,"type":10,"oriented":1,"display_order":1};
</script>
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>

準備はここまでで完了です。

javascriptのコード

最後にjavascriptですが、こちらになります。

※先ほどメモした、media、site、spot を153行目～155行目の***** の所（赤字）に記入してください。

※後から変更し易いように140行目～の部分はjQueryで書いてあります。
※青字は元のHTMLから変更したところです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 var path = location.pathname;

 /*関連コンテンツの制御*/
 //カテゴリ一覧と検索結果とTOPページに複数記事の場合は処理を行わない
 if(path.indexOf("/archive") < 0 && path.indexOf("/search") < 0 && $('article').length <= 1 ){
 setTimeout(function(){
 /* 関連コンテンツ出力 */
 var maxEntries = 3;
 var categorytags = [];
 var category = $('.categories');
 if (category.size()) {
 var categoryobjs = category.find('a');
 var categoryobjscount = categoryobjs.length;

 for(var i=0 ; i < categoryobjscount; i++){
 //パンくずのTOPを除外
 if(categoryobjs.eq(i).text() != "トップ"){
 categorytags.push(categoryobjs.eq(i).text());
 }
 }
 //404エラー＋プロフィール画面の場合
 }else{
 categorytags = ['自転車屋','お酒','はてブロ'];
 }

 var categoryNo = 0;
 var origin = location.protocol + '//' + location.host;
 var startFetchCategoryEntries = function (d, categories) {
 d = d || $.Deferred();
 categories = categories || [];
 categoryTag = categorytags.shift();
 categoryNo = categoryNo + 1;
 if (!categoryTag) {
 d.resolve(categories);
 return d;
 }
 var category = {
 name: categoryTag,
 entries: []
 };
 //カテゴリページを取得しタイトルとサムネイル画像とURLと概要文を取得
 $.ajax(origin + '/archive/category/' + encodeURIComponent(category.name)).done(function (feed) {
 var sectionobj = $(feed).find('section');
 var sectioncount = sectionobj.length -1;
 
 //ランダムに記事の番号を選ぶ
 var sectionNolist =[];
 for(var ii=0 ; ii < 20; ii++){
 randomNumber = Math.floor( Math.random() * (sectioncount + 1) );
 if($.inArray(randomNumber, sectionNolist) == -1){
 sectionNolist.push(randomNumber);
 }
 }

 var sectionNolistcount = sectionNolist.length;
 for(var ii=0 ; ii < sectionNolistcount; ii++){
 var $feedEntry = sectionobj.eq(sectionNolist[ii]);
 var entry = $feedEntry.find('h1').find('a');
 var thum = $feedEntry.find('.entry-thumb').css('background-image');
 var thum2 = "";
 if(thum){
 if( thum.match( /^url\(["']?(.*?)["']?\)/i )[1] != null ) {
 thum2 = thum.match( /^url\(["']?(.*?)["']?\)/i )[1];
 }
 }
 var desc = $feedEntry.find('.entry-description');
 var summary = "";
 if(desc.text().length >0){
 var summary = desc.text().substr(0,150)+"...";
 summary = escapeHtml(summary);
 }
 var entry = {
 title: entry.text(),
 url: entry.attr('href'),
 thumnailurl: thum2,
 summary: summary,
 published: new Date($feedEntry.find('time').attr('datetime'))
 };

 thiscontentstitle = $('.entry-title').find('a').attr('href');
 if (entry.url === thiscontentstitle) continue;
 entry.url = entry.url + "?recommend=" + location.pathname;
 category.entries.push(entry);
 if (category.entries.length >= maxEntries && maxEntries !== -1) {
 break;
 }
 };
 categories.push(category);
 startFetchCategoryEntries(d, categories);
 }).fail(function (xhr) {
 (console.error || console.log).call(console, xhr);
 });
 
 return d;
 }
 //関連コンテンツのhtml生成
 startFetchCategoryEntries().done(function (categories) {
 html = '<div class="same-category-entries">';
 var categoriescount = categories.length;

 var issmp = false;
 if ($(window).width() < 480) {
 var issmp = true;
 }
 for (var i=0; i< categoriescount; i++) {
 categorydata = categories[i];
 if (categorydata.entries.length > 0) {
 html = html + '<div class="same-category-entries-category">'
 +'<h2 class="same-category-entries-category-title"><a class="same-category-entries-category-name" href="/category/' + categorydata.name + ' ">' + categorydata.name + '</a>カテゴリの他の記事</h2>'
 +'<ul class="same-category-entries-list">';
 
 var categorydataentriescount = categorydata.entries.length;
 for (var ii=0; ii< categorydataentriescount; ii++) {
 entry = categorydata.entries[ii];
 html = html + '<li class="same-category-entries-entry"><a href="'+entry.url +'"><p class="same-category-entries-entry-thum" >';

 if (entry.thumnailurl.length > 0) {
 html = html + '<img src ="'+ entry.thumnailurl +'"></p><p class="same-category-entries-entry-title" >'+ entry.title +'</p>';
 }else{
 html = html + '</p><p class="same-category-entries-entry-title" >'+ entry.title +'</p>';
 }
 if(!issmp){
 html = html + '<p class="same-category-entries-entry-summary" >'+ entry.summary +'</p>';
 }
 publishedYear = entry.published.getFullYear();
 publishedMonth = entry.published.getMonth()+1;
 publishedDate = entry.published.getDate();
 html = html + '<div class="same-category-entries-entry-date">'+ publishedYear +'/'+ publishedMonth +'/'+ publishedDate +'</div></a></li>';
 }
 html = html + '</ul></div>';
 }
 }
 html = html + '</div>';
 var $html = $($.parseHTML(html));
 $(".entry-content").after($html);

 //バナーを関連コンテンツの最後に追加
 if($(".same-category-entries-entry").size() >1){
 $('.same-category-entries-entry:last-child').after(nendnativead(categoryNo));
 }else{
 $('.same-category-entries-entry:first-child').after(nendnativead(categoryNo));
 }
 });
 },1000);
 }
});

/* nendネイティブアド */
function nendnativead(No){
 var media = '*****';
 var site = '******';
 var spot = '******';
 if(isFinite(No)){
 nendnativead = '<script type="text/javascript">var nend_params = {"media":'+media+',"site":'+site+',"spot":'+spot+',"type":10,"oriented":1};<\/script><script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"><\/script>';
 }else{
 nendnativead = '<script type="text/javascript">var nend_params = {"media":'+media+',"site":'+site+',"spot":'+spot+',"type":10,"oriented":1,"display_order":'+No+'};<\/script><script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"><\/script>';
 }
 return nendnativead;
}

var str = '& < > ` " ' + "'";
var escapeHtml = (function (String) {
 var escapeMap = {
 '&': '&amp;',
 "'": '&#x27;',
 '`': '&#x60;',
 '"': '&quot;',
 '<': '&lt;',
 '>': '&gt;'
 };
 var escapeReg = '[';
 var reg;
 for (var p in escapeMap) {
 if (escapeMap.hasOwnProperty(p)) {
 escapeReg += p;
 }
 }
 escapeReg += ']';
 reg = new RegExp(escapeReg, 'g');
 return function escapeHtml (str) {
 str = (str === null || str === undefined) ? '' : '' + str;
 return str.replace(reg, function (match) {
 return escapeMap[match];
 });
 };
}(String));
</script>

CSSは特に変更していないので、こちらの記事のCSSを利用してください。

jitenshaya-se.hatenablog.com

本当に指定したHTMLをちゃんと返してくれるので、違和感なくコンテンツの一部として表示されました。

完成したコンテンツの見た目はこんな感じです。

※スマホ専用の広告なのでスマホで見たときしか表示されません。 

注意点

最後まで一気に作業をしてしまっても問題はありませんが、広告枠を作ってもすぐに承認されない（1~2時間はかかるらしい）ので、先に２のレイアウトの作成まで先に実施して、承認後３を実施したほうが確認が楽かもしれません。