> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/undefined-2/ssp/web-header-bidding-wip.md).

# Web Header Bidding(WIP)

## 1. Header Bidding 라이브러리 로드

HTML 문서의 <mark style="color:red;">`<head>`</mark>에 다음을 추가하여 라이브러리를 로드합니다

{% code title="HTML" %}

```html
<head>
	<!-- 1.0.11 -->
	<script async data-publisher-id="매체키" src="https://ssp.igaw.io/sdk/js/headerbidding.js"></script>
</head>
```

{% endcode %}

이 코드는 <mark style="color:red;">`https://ssp.igaw.io/sdk/js/headerbidding.js`</mark> 에서 라이브러리를 로드합니다. 라이브러리가 완전히 로드되면 광고를 요청합니다.

{% hint style="warning" %}
SDK는 페이지 로드 시 최초 1회 만 로드 되어야 합니다.
{% endhint %}

## 2. 광고 게재 위치 지정

HTML 문서의 <mark style="color:red;">`<body>`</mark>에 다음 코드를 추가하여 광고가 게재되는 위치를 지정합니다.

{% hint style="info" %}
id는 콘솔에서 생성한 <mark style="color:red;">`“div-igaw-ad-플레이스먼트 ID”`</mark> 를 입력합니다.
{% endhint %}

{% hint style="warning" %}
광고 슬롯이 여러 개 일 경우 DIV Element 의 id는 중복되지 않도록 해야 합니다.
{% endhint %}

{% code title="HTML" %}

```html
<body>
	<!-- 예제, 변경가능 -->
	<div id="div-igaw-ad-플레이스먼트ID_1"></div> 
	<!-- 매체 하위에 여러개의 플레이스먼트가 있을 경우 그 수 만큼 위치 지정 -->
	<div id="div-igaw-ad-플레이스먼트ID_2"></div>
</body>
```

{% endcode %}
