# Integration in GAM as Creative

This page explains how to run n360ortb directly inside a GAM creative to fetch and render bids. This approach is useful when you want GAM to handle the ad delivery without adding header bidding code to the publisher page.

## Overview

Instead of running n360ortb on the publisher page, you can configure a GAM creative that:

1. Loads the n360ortb library inside the creative iframe
2. Fetches bids directly from Nexx360
3. Renders the winning ad in place

This is sometimes called a "GPT Test Tag" setup and is useful for:

* Testing the integration without modifying publisher pages
* Running Nexx360 as a backfill creative in GAM
* Simplified setups where the publisher doesn't need on-page targeting

## Iframe Modes

GAM renders creatives inside iframes. Understanding the two iframe modes is important for proper ad rendering:

| Mode                | Description                                                   | Resize Method                                                  |
| ------------------- | ------------------------------------------------------------- | -------------------------------------------------------------- |
| **Friendly Iframe** | Same-origin iframe, creative can access `window.frameElement` | Direct resize via `frameElement.style`                         |
| **SafeFrame**       | Cross-origin iframe for security isolation                    | `$sf.ext.expand()` API (requires correct creative size in GAM) |

{% hint style="success" %}
**Recommendation:** Use **Friendly Iframe** mode for reliable iframe resizing.
{% endhint %}

### Configuring Iframe Mode on Publisher Page

To disable SafeFrame and enable friendly iframe mode, the publisher should add:

```javascript
// Option 1: Disable SafeFrame globally
googletag.pubads().setForceSafeFrame(false);

// Option 2: Disable SafeFrame per slot
googletag.defineSlot('/network/ad-unit', [300, 250], 'div-id')
  .setForceSafeFrame(false)
  .addService(googletag.pubads());
```

## Creative Setup in GAM

### Step 1: Create a Third-Party Creative

1. Go to **Delivery** > **Creatives** in GAM
2. Click **New creative** > **Third party**
3. Set the creative size to match your ad size (e.g., **300x250**)

{% hint style="warning" %}
**Important:** Set the creative size in GAM to match the ad size (300x250, 728x90, etc.). If set to 1x1, the iframe will be 1x1 regardless of resize attempts.
{% endhint %}

### Step 2: Add the Creative Code

```html
<script src="https://lib.nexx360.io/nexx360ortb/api.js"></script>
<script>
  n360ortb.init({ debug: true });

  n360ortb.fetchBids({
    slots: [{
      slotID: 'ad-container',
      tagId: 'YOUR_TAG_ID',
      sizes: [[300, 250]]
    }]
  }, function(bids) {
    if (bids.length > 0) {
      n360ortb.renderAd(bids[0]);
    }
  });
</script>
```

Replace `YOUR_TAG_ID` with your actual Nexx360 tag ID configured in the console.

## GDPR Consent Handling

When running inside a GAM creative iframe, the TCF CMP on the publisher page may not be accessible (especially in SafeFrame mode). Use GAM macros to pass GDPR consent data directly.

### GAM GDPR Macros

| Macro                  | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `%%GDPR%%`             | Returns `1` if GDPR applies, `0` if not         |
| `%%GDPR_CONSENT_755%%` | Returns the TC string (755 = Nexx360 vendor ID) |

### Creative Code with GDPR

```html
<script src="https://lib.nexx360.io/nexx360ortb/api.js"></script>
<script>
  n360ortb.init({
    debug: true,
    gdpr: {
      applies: %%GDPR%% === 1,
      consent: '%%GDPR_CONSENT_755%%'
    }
  });

  n360ortb.fetchBids({
    slots: [{
      slotID: 'ad-container',
      tagId: 'YOUR_TAG_ID',
      sizes: [[300, 250]]
    }]
  }, function(bids) {
    if (bids.length > 0) {
      n360ortb.renderAd(bids[0]);
    }
  });
</script>
```

{% hint style="info" %}
When `gdpr.applies` and `gdpr.consent` are provided directly, n360ortb skips CMP detection and uses the provided values immediately.
{% endhint %}

### Step 3: Target the Creative

Create a line item that targets this creative to the appropriate ad units and inventory.

## How renderAd() Works

The `renderAd()` function automatically detects the iframe context and uses the appropriate rendering method:

| Context                 | Detection                        | Behavior                                               |
| ----------------------- | -------------------------------- | ------------------------------------------------------ |
| **SafeFrame**           | `window.$sf?.ext` exists         | Calls `$sf.ext.expand()`, then `document.write(adm)`   |
| **Friendly iframe**     | `window.frameElement` accessible | Resizes parent iframe directly, renders into container |
| **Cross-origin iframe** | Neither of above                 | Sends `postMessage` resize request to parent           |

## Troubleshooting

| Issue                    | Cause                                       | Solution                                                    |
| ------------------------ | ------------------------------------------- | ----------------------------------------------------------- |
| Ad renders in 1x1 iframe | Creative size in GAM is 1x1                 | Set creative size to 300x250 (or actual ad size) in GAM     |
| SafeFrame doesn't expand | SafeFrame expand is for expandable ads only | Use correct size in GAM, or use Friendly Iframe mode        |
| Can't resize iframe      | SafeFrame blocks `frameElement` access      | Disable SafeFrame with `setForceSafeFrame(false)`           |
| Ad doesn't render        | No bids returned                            | Check tagId configuration and network requests in dev tools |
| CORS errors              | Cross-origin restrictions                   | Ensure you're loading from `https://lib.nexx360.io/`        |

## Debug Mode

To troubleshoot issues, enable debug mode:

```javascript
n360ortb.init({ debug: true });
```

Or add `?n360debug=true` to the publisher page URL to see console logs.

## Complete Example

Here's a full example of a publisher page with a GAM slot configured for friendly iframe mode:

```html
<!DOCTYPE html>
<html>
<head>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag.defineSlot('/YOUR_NETWORK/ad-unit', [300, 250], 'div-gpt-ad')
        .setForceSafeFrame(false)  // Enable friendly iframe
        .addService(googletag.pubads());
      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
    });
  </script>
</head>
<body>
  <div id="div-gpt-ad">
    <script>
      googletag.cmd.push(function() {
        googletag.display('div-gpt-ad');
      });
    </script>
  </div>
</body>
</html>
```

## When to Use This Approach

| Use Case                                    | Recommended Approach                                                                            |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Full header bidding with targeting          | Standard [GAM Integration](/integration-methods/direct-integration-n360ortb/gam-integration.md) |
| Backfill creative without page changes      | This approach (Integration in GAM as Creative)                                                  |
| Testing n360ortb without page modifications | This approach                                                                                   |
| Production with price competition           | Standard [GAM Integration](/integration-methods/direct-integration-n360ortb/gam-integration.md) |

## Next Steps

* [GAM Integration](/integration-methods/direct-integration-n360ortb/gam-integration.md) - Standard header bidding integration
* [Connect your GAM Account](/integration-methods/direct-integration-n360ortb/gam-integration/connect-your-gam-account.md) - Initial setup
* [API Reference](/integration-methods/direct-integration-n360ortb/api-reference.md) - Full API documentation


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.nexx360.io/integration-methods/direct-integration-n360ortb/gam-integration/integration-in-gam-as-creative.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.