みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

STINGER nendのネイティブ広告を設置する方法

更新日:

nendのネイティブ広告に興味がある方に、読んでほしい記事です。

以前の記事で、「nend」のオーバーレイ広告をご紹介しましたが、今回は話題のネイティブ広告を設置してみました。

nendネイティブ広告_画像1

本記事では、そのときの経験をもとに、nendのネイティブ広告を設置する方法について紹介していきます。

私はWordPressのSTINGER5テーマを使用していますが、他のSTINGERシリーズでも参考になると思います。

スポンサーリンク

PC300×250




ネイティブ広告とは?

そもそも、ネイティブ広告って何?という方向けに、ネイティブ広告の説明ができればと思います。

ネイティブ広告とは、前述した画面キャプチャのように、コンテンツに馴染ませた広告のことです。

nendネイティブ広告_画像1

パッと見、広告というより、コンテンツの一部に見えることから、より自然に広告を訴求することができます。

近年、スマホのニュースアプリ中心に導入が増えており、注目の広告です。

nendのネイティブ広告を設置する方法

ここから、nendのネイティブ広告を設置する方法について説明していきます。

まず、nendの新規申し込みからアカウント情報の入力までは、オーバーレイ広告を設置したときの記事に書いてありますので、こちらを参考にしてみてください。
【参考】STINGER nendのオーバーレイ広告を設置する方法

新規広告枠の作成

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

nendネイティブ広告_画像2

新規広告枠の作成画面で、以下のように設定・入力していきます。

・サイト/アプリ:「サイト名」を選択
・広告枠のタイプ:「ネイティブアド」
・広告枠名:適当に入力
・広告枠の紹介:適当に入力

nendネイティブ広告_画像3

・広告画像選択:STINGERの場合「正方形の小さい広告画像」を選択

nendネイティブ広告_画像4

・広告表示数:今回複数箇所に入れるので「2〜5ヶ所」を選択
・18禁広告:「ブロック」を推奨
※Adsenseとの併用の場合、18禁広告は規約違反に該当するため、必ずブロックに設定。

nendネイティブ広告_画像5

設定・入力が完了したら、「作成」をクリックします。

ネイティブ広告のレイアウト作成

ここから、以下のサイトを参考にしながら、設定をおこないました。
【参考】Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

「広告枠の管理」タブに、新しい広告枠が作成されているので、「レイアウト」をクリックします。

nendネイティブ広告_画像6

次に、「Easy Ad Editor」をクリックし、「サイトURLを入力してみましょう」の項目に、サイトのURLを入れて「表示」をクリックします。

nendネイティブ広告_画像7

しばらくすると、サイトの読み込みが完了しますので、「OK」をクリックします。

nendネイティブ広告_画像8

サイトのビジュアルが出てきますので、ネイティブ広告で模倣したいコンテンツをクリックします。

nendネイティブ広告_画像9

クリック後に、ネイティブ広告が自動生成されます。

完了画面が出ますので、「次へ」「OK」をクリックをすると、サンプルとなるネイティブ広告ができあがります。

nendネイティブ広告_画像10

サンプルのネイティブ広告ができあがったら、ここから細かい調整が必要になるため、右上にある「Pro」をクリックします。

nendネイティブ広告_画像11

「Professional Ad Editor」を開いたら、「タグの編集」に書いてあるコードを消して、以下のコードを記載します。

nendネイティブ広告_画像12

・STINGER5の方

<dl class="clearfix">
<dt><a href="{{CLICK_URL}}" target="_blank"><img src="{{SMALL_SQUARE_IMAGE}}"></a></dt>
<dd>
<h3><a href="{{CLICK_URL}}" target="_blank">{{AD_DEFINE_TAG:ptn=1,deco=2}}{{SHORT_TEXT}}</a></h3>
<div class="blog_info ">
<p><span class="pcone"><i class="fa fa-tags"></i>{{PROMOTION_NAME}}</span></p>
</div>
</dd>
</dl>

STINGER7、STINGER PLUS+の方は、記事のタイトルだけでなく、文章の書き出しも表示されるので、文章の書き出しを追加した以下のコードになります。

・STINGER7、STINGER PLUS+の方

<dl class="clearfix">
<dt><a href="{{CLICK_URL}}" target="_blank"><img src="{{SMALL_SQUARE_IMAGE}}"></a></dt>
<dd>
<h3><a href="{{CLICK_URL}}" target="_blank">{{AD_DEFINE_TAG:ptn=1,deco=2}}{{SHORT_TEXT}}</a></h3>
<div class="blog_info ">
<p><span class="pcone"><i class="fa fa-tags"></i>{{PROMOTION_NAME}}</span></p>
</div>
<div class="smanone2">
<p>{{LONG_TEXT}}</p>
</div>
</dd>
</dl>

「プレビュー」をクリックすると、プレビュー画面が見れますので、コンテンツにしっかり馴染んだ広告になっているか、ここでチェックします。

問題ないようであれば、「広告コードを作成する」をクリックします。

nendネイティブ広告_画像13

「広告掲載位置用コード」「広告読み込み用コード」の2種類が生成されます。

nendネイティブ広告_画像14

ここまで完了したら、あとはWordPressにコードを貼り付け、既存のコードを修正するだけです。

WordPressのコードの追加・編集

WordPressのテーマの中に、「nend-ad1.php」「nend-ad2.php」の2つのファイルを新規で作成します。

ファイルの作成は、WordPress内ではできないので、契約しているサーバーのファイル管理ツールから作成するか、「FileZilla」のようなFTPソフトを利用して、ファイルを作成してください。

【参考】サーバーがロリポップの方→ロリポップ!FTPについて

【参考】「FileZilla」を利用する方→WordPressテーマにPHPファイルを追加してコードをスッキリさせる方法【よく使う部分を使い回す】

作成後、「nend-ad1.php」には、先ほどの「広告掲載位置用コード」を貼り付けます。

nendネイティブ広告_画像15

「nend-ad2.php」には、先ほどの「広告読み込み用コード」を貼り付けます。

nendネイティブ広告_画像16

次に、「itiran.php」を開き、以下の2箇所を変更します。

①記事を数えるための「$count++;」の追加

・変更前

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

・変更後

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();  $count++; ?>

② 記事の間にネイティブ広告を挟むために、以下のコードの追加

<?php if ($count == 2 || $count % 5 == 0) { include ('nend-ad1.php'); } ?>

私は、<!--?php endwhile; else: ?-->のコード直前に追加しました。

左側の変数は「$count == 2」の記述だと、上から2つ目の記事のあとにネイティブ広告が入ります。

ちなみに、「$count == 1」の記述だと1つ目の記事のあと、「$count == 3」の記述だと3つ目の記事のあとにネイティブ広告が入ります。

右側の変数は「$count % 5 == 0」の記述だと、5・10・15・・と5で割り切れる記事のあとにネイティブ広告が入ります。

最後に、「footer.php」のファイル内、</body>タグの直前に、以下のコードを追加すれば、すべての設定が完了です。

<?php include ('nend-ad2.php'); ?>

管理ツールの審査ステータスが「審査中」から「アクティブ」に変われば、nendのネイティブ広告がスタートします。

本記事は、以上になります。

nendのネイティブ広告の設定は、オーバーレイ広告よりも少し大変でしたが、この記事どおりに実装を進めていけば、きっとスムーズに設定ができると思います。

お付き合い頂き、ありがとうございました!

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2024 All Rights Reserved.