nendのネイティブアド導入までの流れ～STEP③『Professional Ad Editor』について～
2015年12月1日（火）リリースされたnendの『ネイティブアド』に関して
メディアパートナー様の導入方法を以下3記事にてご説明いたします。
・STEP③『Professional Ad Editor』について
本記事は広告コードで配信する際の広告レイアウト作成機能
STEP③『Professional Ad Editor』についてのご説明です。
htmlやcssを直接編集して理想の広告へカスタマイズした広告コードが作成可能です。
STEP③『Professional Ad Editor』について
STEP①で作成した広告枠が以下になります。
- WEBメディア様はこのまま①レイアウトボタンをクリックして進んでください。
- アプリメディア様が新規広告枠作成の際に実装方法SDKを選択している場合は、以下表示になります。レイアウトボタンは表示されません。
① レイアウトボタンをクリック。
『Easy Ad Editor』と『Professional Ad Editor』と表示されます。
それぞれの機能は以下となります。
—————————————————————————————————————————
「Easy Ad Editor」機能
サイトURLから誰でも簡単にコンテンツにあった広告コードが作成可能。
「Professional Ad Editor」機能
htmlやcssを直接編集して理想の広告へカスタマイズした広告コードが作成可能。
—————————————————————————————————————————
本記事では、『Professional Ad Editor』の説明となります。
『Easy Ad Editor』について確認したい方は、STEP②にお進みください。
② Professional Ad Editorをクリック
- STEP②『Easy Ad Editor』についての本格編集から右上にある『Pro』ボタンをクリックした場合はEasy Ad Editorで編集した内容が連動して反映されています。
③ Professional Ad Editor管理画面説明・編集の流れ
①左側タグ編集にて直接htmlとcssを入力。
- cssに関して『Easy Ad Editor』に戻るには最上位の要素は１つという制限があるので、『Easy Ad Editor』を使用した場合はstyle属性にスタイルを記述するか、最上位の要素内にスタイルを記述してください。
②右側の広告素材マクロを左側タグ編集内にカーソル位置に合わせて挿入。
- タグ編集欄内に記載された「{{マクロ名}}」が広告素材に切り替わります。
③プレビューボタンで広告配信イメージを確認できるプレビュー機能を搭載。
④広告コードを作成する。
④ Professional Ad Editor広告素材マクロについて
以下広告素材マクロは、STEP①広告枠作成の際に広告画像選択で『正方形の小さい広告画像』を選択した際に表示されるものです。
- 画像素材について
- テキスト素材、使用必須素材、オプション素材について
※nendではJIAAが発表した「ネイティブ広告に関する推奨規定」を踏まえ、
広告枠内にユーザーがコンテンツと広告を識別するための、
広告明示文(PR/Sponsored/広告/プロモーション)の表記が必須となります。
⑤ プレビューボタンをクリック
⑥ 広告コードを作成するボタンをクリック
STEP①新規広告枠を作成 ⑦広告表示数をプルダウンにて選択した表示数分の広告タグが発行されました。
こちらの広告タグをご自身のサイトに掲載してください。
タグ設置に関する注意点
・最後の広告コードを導入しないと広告は表示されません。
※広告個数の変更は管理画面上から可能です。
例えば、広告表示数を3つに設定していた場合
表示〇は広告表示されます。表示×は広告表示されません。
⑦ 掲載確認。
広告がサイトに表示されましたでしょうか。
表示されない場合、本ブログのタグ設置に関する注意点をご確認ください。
本記事ネイティブアド導入までの流れSTEP③『Professional Ad Editor』について
の説明は以上となります。
About Author:
