> ## 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;
})();
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.**
## Add the Rev script
Learn how to add our script to your site.
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);
```
You may also consider adding the `defer` attribute to the script tag to
optimize initial page load speed.
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% 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
Add the `dev` attribute to the script to use dev placements.
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
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`
You can customize the ad units by adding the `data-size` attribute with the
desired size.
```jsx theme={null}
```
#### `data-kv-{key}`
Additionally, you can add targeting tags to the ad units by adding the `data-kv-{key}`
attribute.
```jsx theme={null}
```