フロントエンド - RevIQ DevDocs

このガイドでは簡潔さのために自己閉じタグ（<script></script> の代わりに <script />）を使用しています。ほとんどのJSXやその他のモダンなコンパイラはこの構文を受け入れます。ただし、生のHTMLで作業している場合は、手動でタグを閉じてください。

Revスクリプトの追加

サイトにスクリプトを追加する方法を学びましょう。

HTMLを使用

HTMLファイルの <head> に以下のスクリプトを追加します。

page.html

  <script
    src="//js.rev.iq/your-domain.com"
  />

JSを使用

以下のコードを追加します。

index.js

  const script = document.createElement('script');
  script.src = '//js.rev.iq/your-domain.com';
  document.head.appendChild(script);

初期ページ読み込み速度を最適化するために、スクリプトタグに defer 属性を追加することも検討してください。

（上級）スクリプトを使ったA/Bテスト

クライアントごとに別の収益化プロバイダーとテストしたい場合、以下のコードを使用して Revスクリプトを条件付きで読み込むことができます。

index.js

  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を使用

HTMLファイルの <head> に以下のスクリプトを追加します。

page.html

  <script
    src="//js.rev.iq/your-domain.com"
    dev
  />

JSを使用

以下のコードを追加します。

index.js

  const script = document.createElement('script');
  script.src = '//js.rev.iq/your-domain.com';
  script.setAttribute("dev", "")
  document.head.appendChild(script);

広告ユニットの定義

広告を表示したい場所に data-ad 属性とプレースメント名を追加します。

<div data-ad="right-rail-1" />
<div data-ad="right-rail-2" />
<div data-ad="right-rail-3" />

（上級）広告ユニットのカスタマイズ

`data-ad-size`

data-size 属性に希望のサイズを追加して、広告ユニットをカスタマイズできます。

<div data-ad="right-rail-1" data-ad-size="300x250" />

`data-kv-{key}`

さらに、data-kv-{key} 属性を追加して、広告ユニットにターゲティングタグを追加できます。

<div 
  data-ad="right-rail-1" 
  data-kv-page="home" 
  data-kv-foo="bar"  
/>

​Revスクリプトの追加

​開発

​広告ユニットの定義

​data-ad-size

​data-kv-{key}

Revスクリプトの追加

開発

広告ユニットの定義

`data-ad-size`

`data-kv-{key}`