> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Native Ads

> Learn how to request native ads using the REST API.

Native ads are returned as structured data, allowing you to implement custom UI that matches your app or website design.

## Request Parameters

### Headers

<ParamField header="Authorization" type="string" required>
  App Key (found in adrop\_service.json)
</ParamField>

### Query Parameters

<ParamField query="unit" type="string" required>
  Native ad unit ID
</ParamField>

<ParamField query="uid" type="string">
  User unique identifier. Used for frequency capping and targeting.
</ParamField>

<ParamField query="pf" type="string">
  Platform. One of `android`, `ios`, `web`
</ParamField>

<ParamField query="lcl" type="string">
  Locale. e.g., `en_US`, `ko_KR`
</ParamField>

<ParamField query="theme" type="string">
  Theme mode. `light` or `dark`
</ParamField>

<ParamField query="contextId" type="string">
  Context targeting ID
</ParamField>

<ParamField query="trackMode" type="integer">
  Set to `1` to receive asset URLs and tracking pixels. You must implement impression and click tracking manually in this case.
</ParamField>

<ParamField query="adId" type="string">
  Advertising identifier (required for device preview)
</ParamField>

## Response

<ResponseField name="code" type="integer" required>
  Response code. `0` indicates success.
</ResponseField>

<ResponseField name="msg" type="string" required>
  Response message
</ResponseField>

<ResponseField name="result" type="object">
  Ad data

  <Expandable title="result properties">
    <ResponseField name="id" type="string">
      Ad ID
    </ResponseField>

    <ResponseField name="format" type="string">
      Ad format. `nativeAd`
    </ResponseField>

    <ResponseField name="unit" type="string">
      Ad unit ID
    </ResponseField>

    <ResponseField name="w" type="integer">
      Ad width (px)
    </ResponseField>

    <ResponseField name="h" type="integer">
      Ad height (px)
    </ResponseField>

    <ResponseField name="ad" type="string">
      HTML ad content (without trackMode)
    </ResponseField>

    <ResponseField name="headline" type="string">
      Ad title
    </ResponseField>

    <ResponseField name="body" type="string">
      Ad body text
    </ResponseField>

    <ResponseField name="callToAction" type="string">
      CTA button text
    </ResponseField>

    <ResponseField name="destinationURL" type="string">
      Click destination URL
    </ResponseField>

    <ResponseField name="target" type="string">
      Browser target. `external` or `internal`
    </ResponseField>

    <ResponseField name="asset" type="string">
      Image URL (trackMode=1)
    </ResponseField>

    <ResponseField name="pixelTracker" type="string">
      Impression tracking pixel HTML (trackMode=1)
    </ResponseField>

    <ResponseField name="imprTracker" type="string">
      Impression tracking URL (trackMode=1)
    </ResponseField>

    <ResponseField name="clickTracker" type="string">
      Click tracking URL (trackMode=1)
    </ResponseField>

    <ResponseField name="profile" type="object">
      Advertiser information

      <Expandable title="profile properties">
        <ResponseField name="displayLogo" type="string">
          Advertiser logo URL
        </ResponseField>

        <ResponseField name="displayName" type="string">
          Advertiser name
        </ResponseField>

        <ResponseField name="link" type="string">
          Advertiser website
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseExample>
  ```json Default Response theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "nativeAd",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 250,
          "ad": "<div>...</div>",
          "headline": "Ad Title",
          "body": "Ad body content goes here.",
          "callToAction": "Learn More",
          "destinationURL": "https://example.com/landing",
          "target": "external",
          "profile": {
              "displayLogo": "https://cdn.adrop.io/logo.png",
              "displayName": "Advertiser Name",
              "link": "https://advertiser.com"
          }
      }
  }
  ```

  ```json trackMode=1 Response theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "nativeAd",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 250,
          "headline": "Ad Title",
          "body": "Ad body content goes here.",
          "callToAction": "Learn More",
          "destinationURL": "https://example.com/landing",
          "asset": "https://cdn.adrop.io/creative.jpg",
          "pixelTracker": "<img src='...' />",
          "imprTracker": "https://api-v2.adrop.io/impression/...",
          "clickTracker": "https://api-v2.adrop.io/click/...",
          "profile": {
              "displayLogo": "https://cdn.adrop.io/logo.png",
              "displayName": "Advertiser Name",
              "link": "https://advertiser.com"
          }
      }
  }
  ```
</ResponseExample>

***

## Tracking Implementation

When using `trackMode=1`, you must track impression and click events manually.

### Impression Tracking

Call the `imprTracker` URL when the ad is displayed on screen:

```javascript theme={null}
// When ad enters viewport
fetch(response.result.imprTracker);
```

### Click Tracking

Call the `clickTracker` URL first when the user clicks the ad, then navigate to `destinationURL`:

```javascript theme={null}
function handleAdClick(adData) {
    // Track click
    fetch(adData.clickTracker).then(() => {
        // Navigate to landing page
        window.open(adData.destinationURL, '_blank');
    });
}
```

***

## Custom Rendering Example

```html theme={null}
<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;

        // Render ad content
        document.querySelector('.ad-logo').src = ad.profile.displayLogo;
        document.querySelector('.ad-advertiser').textContent = ad.profile.displayName;
        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;

        // Track impression
        fetch(ad.imprTracker);

        // Click event
        document.getElementById('native-ad-container').onclick = () => {
            fetch(ad.clickTracker).then(() => {
                window.open(ad.destinationURL, '_blank');
            });
        };
    }
});
</script>
```

***

## Related Documentation

<CardGroup cols={2}>
  <Card title="Banner Ads" icon="rectangle-ad" href="/sdk/rest-api/banner">
    HTML banner ad implementation
  </Card>

  <Card title="Targeting Settings" icon="bullseye" href="/sdk/rest-api/targeting">
    User properties and targeting configuration
  </Card>
</CardGroup>