メインコンテンツへスキップ
GET
https://api-v2.adrop.io
/
request
ネイティブ広告
curl --request GET \
  --url https://api-v2.adrop.io/request \
  --header 'Authorization: <authorization>'
{
    "code": 0,
    "msg": "OK",
    "result": {
        "id": "ad_123456",
        "format": "nativeAd",
        "unit": "YOUR_UNIT_ID",
        "w": 320,
        "h": 250,
        "ad": "<div>...</div>",
        "headline": "広告タイトル",
        "body": "広告本文の内容です。",
        "callToAction": "詳しく見る",
        "destinationURL": "https://example.com/landing",
        "target": "external",
        "profile": {
            "displayLogo": "https://cdn.adrop.io/logo.png",
            "displayName": "広告主名",
            "link": "https://advertiser.com"
        }
    }
}
ネイティブ広告は構造化データで返されるため、アプリやWebのデザインに合わせてカスタムUIを実装できます。

リクエストパラメータ

ヘッダー

Authorization
string
required
App Key(adrop_service.jsonで確認)

クエリパラメータ

unit
string
required
ネイティブ広告ユニットID
uid
string
ユーザー固有識別子。広告配信頻度制御とターゲティングに使用されます。
pf
string
プラットフォーム。androidioswebのいずれか
lcl
string
ロケール。例:ja_JPen_US
theme
string
テーマモード。lightまたはdark
contextId
string
コンテキストターゲティングID
trackMode
integer
1に設定するとアセットURLとトラッキングピクセルを返却。この場合、インプレッションとクリックトラッキングを直接実装する必要があります。
adId
string
広告識別子(デバイスプレビュー時必須)

レスポンス

code
integer
required
レスポンスコード。0は成功を意味します。
msg
string
required
レスポンスメッセージ
result
object
広告データ
{
    "code": 0,
    "msg": "OK",
    "result": {
        "id": "ad_123456",
        "format": "nativeAd",
        "unit": "YOUR_UNIT_ID",
        "w": 320,
        "h": 250,
        "ad": "<div>...</div>",
        "headline": "広告タイトル",
        "body": "広告本文の内容です。",
        "callToAction": "詳しく見る",
        "destinationURL": "https://example.com/landing",
        "target": "external",
        "profile": {
            "displayLogo": "https://cdn.adrop.io/logo.png",
            "displayName": "広告主名",
            "link": "https://advertiser.com"
        }
    }
}

トラッキング実装

trackMode=1を使用する場合、インプレッションとクリックイベントを直接トラッキングする必要があります。

インプレッショントラッキング

広告が画面に表示されたらimprTracker URLを呼び出します:
// 広告がビューポートに入ったとき
fetch(response.result.imprTracker);

クリックトラッキング

ユーザーが広告をクリックしたら、まずclickTracker URLを呼び出してからdestinationURLに移動します:
function handleAdClick(adData) {
    // クリックトラッキング
    fetch(adData.clickTracker).then(() => {
        // ランディングページに移動
        window.open(adData.destinationURL, '_blank');
    });
}

カスタムレンダリング例

<div class="native-ad" id="native-ad-container">
    <div class="ad-profile">
        <img class="ad-logo" />
        <span class="ad-advertiser"></span>
    </div>
    <img class="ad-image" />
    <h3 class="ad-headline"></h3>
    <p class="ad-body"></p>
    <button class="ad-cta"></button>
</div>

<script>
fetch('https://api-v2.adrop.io/request?unit=YOUR_UNIT_ID&trackMode=1', {
    headers: { 'Authorization': 'YOUR_APP_KEY' }
})
.then(res => res.json())
.then(data => {
    if (data.code === 0) {
        const ad = data.result;

        // 広告コンテンツをレンダリング
        document.querySelector('.ad-logo').src = ad.profile.logo;
        document.querySelector('.ad-advertiser').textContent = ad.profile.name;
        document.querySelector('.ad-image').src = ad.asset;
        document.querySelector('.ad-headline').textContent = ad.headline;
        document.querySelector('.ad-body').textContent = ad.body;
        document.querySelector('.ad-cta').textContent = ad.callToAction;

        // インプレッショントラッキング
        fetch(ad.imprTracker);

        // クリックイベント
        document.getElementById('native-ad-container').onclick = () => {
            fetch(ad.clickTracker).then(() => {
                window.open(ad.destinationURL, '_blank');
            });
        };
    }
});
</script>

関連ドキュメント