> ## 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}
```