> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rev.iq/llms.txt
> Use this file to discover all available pages before exploring further.
# 프론트엔드
> 사이트에 스크립트를 추가하는 방법을 알아보세요
export const domain = (() => {
const placeholder = "your-domain.com";
if (typeof window !== "undefined" && !globalThis.__revDomainSetup) {
globalThis.__revDomainSetup = true;
function textNodes(node) {
if (node.nodeType === Node.TEXT_NODE) return [node];
const nodes = [];
for (const child of node.childNodes) {
nodes.push(...textNodes(child));
}
return nodes;
}
function anchorNodes(node) {
if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "A") return [node];
const nodes = [];
for (const child of node.childNodes) {
nodes.push(...anchorNodes(child));
}
return nodes;
}
const domain = globalThis.__revDomain || new URLSearchParams(globalThis.location.search).get('domain') || "yourdomain.com";
globalThis.__revDomain = domain;
if (globalThis.__revDomainObs) return;
const obs = globalThis.__revDomainObs || new MutationObserver(mutations => {
for (const {addedNodes, removedNodes, target} of mutations) {
for (const node of [...addedNodes, target]) {
if (node instanceof HTMLScriptElement) continue;
if (node instanceof HTMLStyleElement) continue;
for (const textNode of textNodes(node)) {
if (textNode.nodeValue && textNode.nodeValue.includes(placeholder)) {
setTimeout(() => {
textNode.nodeValue = textNode.nodeValue.replace(placeholder, domain);
}, 100);
}
}
for (const anchorNode of anchorNodes(node)) {
if (anchorNode.href && anchorNode.href.includes(placeholder)) {
setTimeout(() => {
anchorNode.href = anchorNode.href.replace(placeholder, domain);
}, 100);
}
}
}
}
});
obs.observe(document.body, {
childList: true,
subtree: true
});
}
return placeholder;
})();
이 가이드에서는 간결함을 위해 자체 닫힘 태그(`` 대신 ``)를
사용합니다. 대부분의 JSX 및 최신 컴파일러는 이 구문을 허용합니다.
그러나 **순수 HTML로 작업하는 경우, 태그를 수동으로 닫아야 합니다.**
## Rev 스크립트 추가
사이트에 스크립트를 추가하는 방법을 알아보세요.
HTML 파일의 ``에 다음 스크립트를 추가합니다.
```jsx page.html theme={null}
```
다음 코드를 추가합니다.
```javascript index.js theme={null}
const script = document.createElement('script');
script.src = '//js.rev.iq/your-domain.com';
document.head.appendChild(script);
```
초기 페이지 로딩 속도를 최적화하기 위해 스크립트 태그에 `defer` 속성을 추가하는 것도
고려해 보세요.
클라이언트별로 다른 수익화 제공업체와 테스트하려면 다음 코드를 사용하여
Rev 스크립트를 조건부로 로드할 수 있습니다.
```javascript index.js theme={null}
const REV_RATE = 0.1; // 10%의 사용자에게 Rev 스크립트를 표시
const shouldUseRevIq = Math.random() < REV_RATE;
const script = document.createElement('script');
if (shouldUseRevIq) {
script.src = '//js.rev.iq/your-domain.com';
} else {
// 다른 수익화 제공업체를 로드
// 다른 벤더의 문서를 기반으로 속성 설정
}
document.head.appendChild(script);
```
## 개발
개발용 플레이스먼트를 사용하려면 스크립트에 `dev` 속성을 추가합니다.
HTML 파일의 ``에 다음 스크립트를 추가합니다.
```jsx page.html theme={null}
```
다음 코드를 추가합니다.
```javascript index.js theme={null}
const script = document.createElement('script');
script.src = '//js.rev.iq/your-domain.com';
script.setAttribute("dev", "")
document.head.appendChild(script);
```
## 광고 유닛 정의
광고를 표시할 위치에 `data-ad` 속성과 플레이스먼트 이름을 추가합니다.
```jsx theme={null}
```
#### `data-ad-size`
`data-size` 속성에 원하는 크기를 추가하여 광고 유닛을 커스터마이징할 수 있습니다.
```jsx theme={null}
```
#### `data-kv-{key}`
또한 `data-kv-{key}` 속성을 추가하여 광고 유닛에 타겟팅 태그를 추가할 수 있습니다.
```jsx theme={null}
```