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

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

作成したネイティブクリエイティブは、従来の広告として配信できます（プログラマティック広告としては、プログラマティック保証型キャンペーンでサイト運営者管理のクリエイティブのみ配信できます）。ネイティブクリエイティブを、従来の広告およびすべてのタイプのプログラマティック広告として配信するには、ガイド付きデザインエディタで [テンプレートをもとにカスタマイズする] を選択してください。

ネイティブスタイルの例

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

コードタイプサンプルコード

HTML と変数

コードタイプ	サンプルコード
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; }


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

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

CSS

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

Fluid サイズのネイティブ広告を入稿する場合、絶対位置を指定した CSS は使用しないでください。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

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

HTML

マクロを挿入する

CSS

この情報は役に立ちましたか？

さらにサポートが必要な場合

次の手順をお試しください。