nendのネイティブ広告に興味がある方に、読んでほしい記事です。
以前の記事で、「nend」のオーバーレイ広告をご紹介しましたが、今回は話題のネイティブ広告を設置してみました。
本記事では、そのときの経験をもとに、nendのネイティブ広告を設置する方法について紹介していきます。
私はWordPressのSTINGER5テーマを使用していますが、他のSTINGERシリーズでも参考になると思います。
スポンサーリンク
ネイティブ広告とは？
そもそも、ネイティブ広告って何？という方向けに、ネイティブ広告の説明ができればと思います。
ネイティブ広告とは、前述した画面キャプチャのように、コンテンツに馴染ませた広告のことです。
パッと見、広告というより、コンテンツの一部に見えることから、より自然に広告を訴求することができます。
近年、スマホのニュースアプリ中心に導入が増えており、注目の広告です。
nendのネイティブ広告を設置する方法
ここから、nendのネイティブ広告を設置する方法について説明していきます。
まず、nendの新規申し込みからアカウント情報の入力までは、オーバーレイ広告を設置したときの記事に書いてありますので、こちらを参考にしてみてください。
【参考】STINGER nendのオーバーレイ広告を設置する方法
新規広告枠の作成
次に、「新規広告枠の作成」をクリックします。
新規広告枠の作成画面で、以下のように設定・入力していきます。
・サイト/アプリ：「サイト名」を選択
・広告枠のタイプ：「ネイティブアド」
・広告枠名：適当に入力
・広告枠の紹介：適当に入力
・広告画像選択：STINGERの場合「正方形の小さい広告画像」を選択
・広告表示数：今回複数箇所に入れるので「2〜5ヶ所」を選択
・18禁広告：「ブロック」を推奨
※Adsenseとの併用の場合、18禁広告は規約違反に該当するため、必ずブロックに設定。
設定・入力が完了したら、「作成」をクリックします。
ネイティブ広告のレイアウト作成
ここから、以下のサイトを参考にしながら、設定をおこないました。
【参考】Stinger7のトップページにnendのネイティブアドを2つ以上組み込む
「広告枠の管理」タブに、新しい広告枠が作成されているので、「レイアウト」をクリックします。
次に、「Easy Ad Editor」をクリックし、「サイトURLを入力してみましょう」の項目に、サイトのURLを入れて「表示」をクリックします。
しばらくすると、サイトの読み込みが完了しますので、「OK」をクリックします。
サイトのビジュアルが出てきますので、ネイティブ広告で模倣したいコンテンツをクリックします。
クリック後に、ネイティブ広告が自動生成されます。
完了画面が出ますので、「次へ」「OK」をクリックをすると、サンプルとなるネイティブ広告ができあがります。
サンプルのネイティブ広告ができあがったら、ここから細かい調整が必要になるため、右上にある「Pro」をクリックします。
「Professional Ad Editor」を開いたら、「タグの編集」に書いてあるコードを消して、以下のコードを記載します。
・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>「プレビュー」をクリックすると、プレビュー画面が見れますので、コンテンツにしっかり馴染んだ広告になっているか、ここでチェックします。
問題ないようであれば、「広告コードを作成する」をクリックします。
「広告掲載位置用コード」「広告読み込み用コード」の2種類が生成されます。
ここまで完了したら、あとはWordPressにコードを貼り付け、既存のコードを修正するだけです。
WordPressのコードの追加・編集
WordPressのテーマの中に、「nend-ad1.php」「nend-ad2.php」の2つのファイルを新規で作成します。
ファイルの作成は、WordPress内ではできないので、契約しているサーバーのファイル管理ツールから作成するか、「FileZilla」のようなFTPソフトを利用して、ファイルを作成してください。
【参考】サーバーがロリポップの方→ロリポップ！FTPについて
【参考】「FileZilla」を利用する方→WordPressテーマにPHPファイルを追加してコードをスッキリさせる方法【よく使う部分を使い回す】
作成後、「nend-ad1.php」には、先ほどの「広告掲載位置用コード」を貼り付けます。
「nend-ad2.php」には、先ほどの「広告読み込み用コード」を貼り付けます。
次に、「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のネイティブ広告の設定は、オーバーレイ広告よりも少し大変でしたが、この記事どおりに実装を進めていけば、きっとスムーズに設定ができると思います。
お付き合い頂き、ありがとうございました！