Nendのネイティブアドが表示されないので取った苦肉の策

シェアしてくれると喜びます。

  • このエントリーをはてなブックマークに追加

nend

ワードプレスのSimplicityでNendのネイティブアドを実装しました。

「タグ取得してコピペするだけでしょ?楽勝」

と思ったのですが、結構苦戦したので表示するまでの過程を備忘録として残しておきたいと思います。

※普通ではないやり方で表示していますので、今後修正していく必要があり。

Simplicityの関連記事内に表示したい

Simplicityでは、記事下に同じカテゴリーやタグの記事が「関連記事」として表示される仕様が備わっています。

この関連記事内にネイティブアドを表示したいと考えました。

わたしは投稿記事の下に、縦に10個関連記事が並ぶようにカスタマイズしています。

まずは、この形にあった広告枠を申請するところから始まりました。

ネイティブアドの申請

ネイティブアド

1番近いのは、左の正方形の小さい画像(80×80)ということでこれをチョイス。
詳しい設定方法はNendの使い方をご覧ください。
真ん中はトップページ用、右は知らん。って感じじゃないでしょうか。

で、広告枠を作成して審査を待ちました。

Easy Ad Editorで大まかなレイアウトを決める

審査通過後にやることは広告タグを取得することですが、ネイティブアドの場合は審査を通過しただけではタグの取得ができません。

さらにレイアウトの設定が必要です。

Nend easy ad

Easy Ad Editorはネイティブアドを表示したいページのURLを入力して、プレビュー画面から表示したい場所を選択するだけで、コンテンツにマッチしたhtmlをはきだしてくれます。

対して、Professional Ad Editorは全部自分でhtmlを書かなければなりません。

当然素人のわたしはEasyをチョイスです。

EasyadEditorurl

今回はトップページでなく個別記事下の関連記事内に表示ということで、適当な個別ページのURLを入力しました。

Nend プレビュー

そうするとスマホで閲覧した時のプレビューが表示されます。

関連記事を表示している場所までスクロールし、適当な記事をクリックします。

すると自動でその部分の要素が全部読み込まれます。

この時点で「広告コードを作成する」をクリックすると、広告コードが取得できてしまうのですが、これをコピーしてブログに貼り付けるのはNGです。理由は以下をご覧ください。

Professional Ad Editorでレイアウトを完成させる

Pro

適当な記事をクリックするとネイティブアドが自動で読み込まれプレビュー画面に反映されます。

しかし全てを読み込むため、アイキャッチ画像を設定している場合は、その画像のURLまで読み込みhtmlにはきだしてしまいます。

つまり、この状態で広告コードを取得すると、自分のブログで使用しているアイキャッチ画像を搭載した広告になってしまいます。

そのため、1度「Pro」という部分をクリックし、Professional Ad Editorで余計な部分をそぎ落とす必要があります。

ネイティブアドのhtml

こんな感じで良しとしました。

変更した項目

1.< title>自分のブログ記事のタイトル名</title>といった感じで、広告とは関係のない記述がされていたので削除。

2.src set=自分のブログ記事のサムネイル画像のURLが指定されていたため削除

3.<!– /.related-entry-thumb –>はあってもなくても変わらないので削除

4.広告のタイトルが長文で、詳細な説明が短文だったので、 {{LONG_TEXT}と{{SHORT_TEXT}}の位置を入れ替え。

これでSimplicityの関連記事の表示と全く同じスタイルで表示されるようになりました。

ちょっと変化をつけたい場合は、pタグやdivタグの部分を削除し自分好みのスタイルを導入すればOKかと思います。

Nendプレビュー

プレビューすると、黄色の枠で囲われていたり、サイトへ行くの部分が緑になっていたりしますが、実際に広告掲載すると表示されません。

またなぜかPR文の上に1行空白ができてしまいますが、これも広告掲載すると修正されています。

広告コード作成

あとは「広告コードを作成する」をクリックしてタグを取得するだけです。

今回はSimplicityで挑戦しましたが、タグの取得までは全テーマ共通の作業ですね。

無料ブログやSIRIUSも一緒です。

取得したタグを貼り付ける場所

これが結構難題です。

ワードプレステーマによっては関連記事に直接差し込めるようなウィジェットがあるのかもしれませんがSimplicityにはありません。

なので直接テーマに書きこむことにしました。

広告掲載コード

広告掲載位置用コードは、掲載したい場所に貼り付け、広告読み込み用コードは</body>の前に貼り付けせよとのこと。

とりあえず、広告掲載位置用コードはrelated-entries.phpに、広告読み込み用コードはfooter.phpにぶち込みました。

しかしエラーで表示されず・・・

何かがダメなんでしょうけど、何がダメなのか分かりません。

結局全部related-entries.phpにコードを書いて表示させた

テーマの編集

外観→テーマの編集でSimplicityの親テーマに直接書き込もうと思ったのですが、致命的なエラーがどうのこうのと言われたので、エックスサーバーのサーバーパネルから行いました。

エラー

※テーマを編集するときは子テーマに新規でファイルを作って編集していくのが推奨されています。今回わたしは親テーマに書きこみましたが、頻繁にSimplicityのバージョンアップ版をインストールする場合は子テーマに書いたほうが無難です。

related-entries.phpを上から見ていくとこんな感じに書かれています。

この状態に以下のような追記をしました。

「$count == 2」では関連記事の2番目にNendの広告が挿入されます。

これを「$count == 5」にすれば5番目に表示が可能です。

まとめ

Nendのネイティブアドを表示するまでの流れを振り返ってみました。

絶対もっといいやり方があるはずなので、いろいろと研究していい方法が見つかれば更新したいと思います。

※上記のやり方でも、広告の表示とクリック報酬の発生は確認しました。

スマートフォンアドネットワーク【nend】

Nendは収益性が高い!使って分かった4つのメリット

Nendの使い方や広告の貼り方