ネイティブ広告のコードを追加する

ネイティブ広告で [HTML & CSS エディタ] オプションを選択した場合は、ネイティブ広告のカスタマイズとスタイル設定を行う HTML と CSS のコードを追加します。この記事では、コードを追加するためのヒントとサンプルを紹介します。


ネイティブ スタイルの例

Fluid タイプのフィード内プレースメントで使用するネイティブ スタイルの HTML と CSS の例を以下に示します。このネイティブ スタイルでは、「スポンサー テキスト」ネイティブ広告フォーマットを使用し、タイトル、画像、本文の各変数を指定しています。

コードタイプ サンプルコード
HTML と変数

<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>
    
CSS と変数

.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}
    

ネイティブ スタイルによる変換前のネイティブ クリエイティブ コンポーネントの例:

コンポーネント
タイトル 急成長している 30 の職業
画像 jobs.jpg
本文 米国労働統計局で今後 10 年間に最も成長すると予測されている職種を紹介しています。ぜひお確かめください。

変換後のネイティブ広告の例:

HTML

ネイティブ広告の表示方法を定義する HTML コードを追加します。

  • コードを作成するには、ウェブやアプリのデベロッパーとの連携が必要になることもあります。
  • HTML の <script> タグには JavaScript を含めることができます。
  • HTML ドキュメント全体を含めると、Internet Explorer などの一部のブラウザで広告が表示されなくなるため、広告に関連するコードのみを指定してください。たとえば、<doctype> タグや <html> タグは含めないようにします。上記の例をご覧ください。
  • ネイティブ広告は親ページのスタイルを継承しませんが、HTML で <link> タグを使って外部のスタイルシートやウェブフォントを読み込むことができます。

ターゲット ウィンドウの設定では、ネイティブ広告がクリックされたときに広告を同じタブで開くか、新しいウィンドウで開くかを指定します。

  • 従来の広告は、広告ユニット単位の設定を継承します。
  • プログラマティック広告は、ネットワーク単位の設定を継承します。

マクロを挿入する

HTML を作成する際は、[マクロを挿入してください] をクリックして以下のボタンを使用することができます。

  • CacheBuster: コードが実行されるたびに、広告サーバーに対して新しい呼び出しが行われるようにします。こうするとインプレッションを正確にカウントできます。詳細
  • クリック(推奨): コードに特殊文字が含まれていない場合に、クリックをトラッキングできるようにします。詳細
  • リンク先 URL: クリエイティブのランディング ページ(ユーザーが広告をクリックすると表示されるページ)を指定します。詳細
  • 特殊文字用クリック: コードに特殊文字(「&」、「?」、「%」など)が含まれている場合に、クリックをトラッキングできるようにします。詳細
  • 動画ラッパー: ネイティブ広告の動画プレーヤーを含むラッパーです。詳細

CSS

ネイティブ広告をどのように表示するかを示す CSS コードを指定します。上記の例をご覧ください。

Fluid サイズのネイティブ広告を入稿する場合、絶対位置を指定した CSS は使用しないでください。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。