> ## 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.
# Frontend
> 了解如何将我们的脚本添加到您的网站 Learn how to add our script to your site
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中编写代码，则需要手动闭合标签。** This guide will use self closing tags
(` ` instead of ``) for simplicity. Most JSX and other
modern compilers will accept this syntax. However, **if you are working in raw
HTML, you should manually close the tags.**
## 添加Rev脚本 Add the Rev script
了解如何将我们的脚本添加到您的网站。
Learn how to add our script to your site.
将以下脚本添加到 HTML 文件的 `` 标签中。
Add the following script to the `` of your HTML file.
```jsx page.html theme={null}
```
添加以下代码
Add the following code
```javascript index.js theme={null}
const script = document.createElement('script');
script.src = '//js.rev.iq/your-domain.com';
document.head.appendChild(script);
```
您也可以考虑为脚本标签添加`defer`属性，以优化页面初始加载速度。 You may also
consider adding the `defer` attribute to the script tag to optimize initial
page load speed.
如需针对不同用户测试其他变现服务商，可使用以下代码按条件加载 Rev 脚本。
If wanting to test with another monetization provider per client, you can use
the following code to conditionally load the Rev script.
```javascript index.js theme={null}
const REV_RATE = 0.1; // 10%的用户将看到Rev脚本 10% of users will see the Rev script
const shouldUseRevIq = Math.random() < REV_RATE;
const script = document.createElement("script");
if (shouldUseRevIq) {
script.src = "//js.rev.iq/your-domain.com";
} else {
// 加载您的其他变现服务商 Load your other monetization provider
// 请参考该服务商的文档设置相应属性 Set the attributes based on the other vendor's documentation
}
document.head.appendChild(script);
```
## 开发模式 Development
为脚本添加`dev`属性，以启用开发环境广告位。
Add the `dev` attribute to the script to use dev placements.
将以下脚本添加到 HTML 文件的 `` 标签中。
Add the following script to the `` of your HTML file.
```jsx page.html theme={null}
```
添加以下代码
Add the following code
```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);
```
## 定义广告单元 Defining ad units
为元素添加`data-ad`属性并填写广告位名称，以标记您希望广告出现的位置。
Add the `data-ad` attribute with the name of the placement to mark where you
want ads to appear.
```jsx theme={null}
```
#### `data-ad-size`
您可以通过添加`data-ad-size`属性并指定所需尺寸，来自定义广告单元。
You can customize the ad units by adding the `data-size` attribute with the
desired size.
```jsx theme={null}
```
#### `data-kv-{key}`
此外，您还可以通过添加`data-kv-{key}`属性，为广告单元添加定向标签。
Additionally, you can add targeting tags to the ad units by adding the `data-kv-{key}`
attribute.
```jsx theme={null}
```