> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/fpi-spa-with-exoclick.md).

# シングルページアプリケーションでのフルページインタースティシャル広告

このガイドでは、実装方法を示します **フルページインタースティシャル（FPI）** 直接API呼び出しを使用して、シングルページアプリケーション（SPA）に広告を実装します。React、Vue、Angular、その他のフレームワークで動作します。

<figure><img src="https://2150358556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ4RqRdVZkeXomdmwHKOL%2Fuploads%2FFQlso8qcanrYfRK5zQOi%2Ffpi-spa-with-exoclick-intro.gif?alt=media&amp;token=08117e32-c8f9-4546-9d06-4dc950594189" alt=""><figcaption></figcaption></figure>

## ステップバイステップの実装

{% stepper %}
{% step %}

### コンポーネントの状態を設定

まず、広告システムとナビゲーションを追跡する状態変数を作成します:

```typescript
'use client'

import { useEffect, useState } from 'react'

export default function HomePage() {
  const [adLoaded, setAdLoaded] = useState(false)
  const [currentPage, setCurrentPage] = useState('home')

  useEffect(() => {
    setAdLoaded(true)
    console.log('✅ FPI APIメソッドを初期化しました')
  }, [])
}
```

{% endstep %}

{% step %}

### APIリクエスト関数を作成

この関数はFPI広告サーバーに直接HTTPリクエストを送信します:

```typescript
const triggerFPIAd = async () => {
  console.log('🎯 FPIサービスへ直接API呼び出しを行っています...')

  try {
    // ユーザーコンテキストを含むリクエストを準備
    const requestBody = {
      user: {
        ua: navigator.userAgent,
        language: navigator.language || 'en-US',
        referer: window.location.href,
        consumer: 'ad-provider',
        gdpr: { gdpr: 0 },
        screen_resolution: `${screen.width}x${screen.height}`,
        window_orientation: screen.width > screen.height ? 'landscape' : 'portrait',
        cookies: [],
        scr_info: btoa('async||3')
      },
      zones: [{
        custom_targeting: {},
        id: 1234567, // あなたのFPIゾーンID（モバイルデバイスではモバイル用FPIゾーンIDを使用）
        extra_params: {
          first_request: true,
          zone_type: 35 // インタースティシャル形式
        }
      }]
    }

    // APIを呼び出す
    const response = await fetch('https://s.pemsrv.com/v1/api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestBody)
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const data = await response.json()
    console.log('📥 APIレスポンス全体:', data)

    // レスポンスを処理
    if (data.zones && data.zones.length > 0) {
      const zone = data.zones[0]
     
      if (zone.data) {
        console.log('🎨 広告を表示しています...')
        await displayInterstitialAd(zone.data)
      } else {
        console.log('❌ レスポンスに広告データがありません')
      }
    }

  } catch (error) {
    console.error('❌ FPI APIエラー:', error)
  }
}
```

{% endstep %}

{% step %}

### 表示関数を作成

この関数は複数の広告フォーマットを処理します

```typescript
const displayInterstitialAd = async (adData: any) => {
  console.log('🎨 インタースティシャル広告の表示を開始します...')

  try {
    // 既存のオーバーレイを削除
    const existingOverlay = document.getElementById('fpi-interstitial-overlay')
    if (existingOverlay) {
      document.body.removeChild(existingOverlay)
    }

    // 全画面オーバーレイを作成
    const overlay = document.createElement('div')
    overlay.id = 'fpi-interstitial-overlay'
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
    `

    // 広告コンテナを作成
    const adContainer = document.createElement('div')
    adContainer.style.cssText = `
      position: relative;
      width: 100vw;
      height: 100vh;
      background: white;
      overflow: hidden;
    `

    // 閉じるボタンを作成
    const closeButton = document.createElement('button')
    closeButton.innerHTML = '✕'
    closeButton.style.cssText = `
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      border: none;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 20px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1000000;
    `

    closeButton.onclick = () => {
      document.body.removeChild(overlay)
      console.log('🚪 インタースティシャル広告を閉じました')
    }

    // 広告形式を判定してコンテンツを作成
    let adContent = ''

    // 形式1: iframe広告
    if (adData.html && adData.html.includes('iframe.php')) {
      adContent = `
        <iframe
          src="${adData.html}"
          width="100%"
          height="100%"
          frameborder="0"
          allowfullscreen
          sandbox="allow-scripts allow-forms allow-popups"
          style="width: 100vw; height: 100vh; border: none;"
        ></iframe>
      `
      console.log('🖼️ iframe広告を作成しました')
    }
```

<details>

<summary>クリックして追加の広告形式を展開</summary>

```typescript
    if (adData.html && adData.html.includes('iframe.php')) {
      adContent = `
        <iframe
          src="${adData.html}"
          width="100%"
          height="100%"
          frameborder="0"
          allowfullscreen
          sandbox="allow-scripts allow-forms allow-popups"
          style="width: 100vw; height: 100vh; border: none;"
        ></iframe>
      `
      console.log('🖼️ iframe広告を作成しました')
    }
   
    // 形式2: 動画広告
    else if (adData.video) {
      const hasClickUrl = adData.url && adData.url.trim() !== ''

      if (hasClickUrl) {
        // クリック遷移付き動画
        adContent = `
          <div style="position: relative; width: 100vw; height: 100vh; cursor: pointer;"
               onclick="window.open('${adData.url}', '_blank')">
            <video
              width="100%"
              height="100%"
              autoplay
              muted
              loop
              style="object-fit: cover; width: 100vw; height: 100vh;"
            >
              <source src="${adData.video}" type="video/mp4">
            </video>
            <div style="
              position: absolute;
              bottom: 20px;
              left: 50%;
              transform: translateX(-50%);
              background: rgba(0, 0, 0, 0.7);
              color: white;
              padding: 8px 16px;
              border-radius: 20px;
              font-size: 14px;
            ">
              クリックして広告主のサイトへ移動
            </div>
          </div>
        `
        console.log('🎬 クリック可能な動画バナー広告を作成しました')
      } else {
        // 通常の動画
        adContent = `
          <video
            width="100%"
            height="100%"
            autoplay
            muted
            controls
            style="object-fit: cover; width: 100vw; height: 100vh;"
          >
            <source src="${adData.video}" type="video/mp4">
          </video>
        `
        console.log('🎬 動画広告を作成しました')
      }
    }
   
    // 形式3: クリック遷移広告
    else if (adData.url) {
      adContent = `
        <div style="
          width: 100vw;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          background: linear-gradient(45deg, #0072ba, #28a745);
          padding: 20px;
        ">
          <h2 style="color: white; margin-bottom: 20px; font-size: 48px;">
            🎯 インタースティシャル広告
          </h2>
          <p style="color: white; margin-bottom: 30px; font-size: 24px;">
            クリックして広告主のサイトへ移動
          </p>
          <a href="${adData.url}"
             target="_blank"
             style="
               padding: 15px 30px;
               background: white;
               color: #0072ba;
               text-decoration: none;
               border-radius: 25px;
               font-weight: bold;
               font-size: 18px;
             ">
            今すぐ訪問
          </a>
        </div>
      `
      console.log('🔗 クリック遷移広告を作成しました')
    }
   
    // 形式4: ネイティブ広告
    else if (adData.ad_items && adData.ad_items.length > 0) {
      const adItemsHtml = adData.ad_items.map((item: any) => `
        <div style="
          background: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          cursor: pointer;
        " onclick="window.open('${item.url}', '_blank')">
          <div style="height: 200px; overflow: hidden;">
            <img src="${item.optimum_image || item.image}"
                 style="width: 100%; height: 100%; object-fit: cover;"
                 alt="${item.title}">
          </div>
          <div style="padding: 15px;">
            <h3 style="margin: 0 0 8px 0; font-size: 18px;">${item.title}</h3>
            ${item.description ? `<p style="font-size: 14px; color: #666;">${item.description}</p>` : ''}
            <div style="font-size: 12px; color: #999;">${item.brand || 'スポンサード'}</div>
          </div>
        </div>
      `).join('')

      adContent = `
        <div style="
          width: 100vw;
          height: 100vh;
          background: #f5f5f5;
          overflow-y: auto;
          padding: 20px;
        ">
          <h2 style="text-align: center; margin-bottom: 20px;">スポンサードコンテンツ</h2>
          <div style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
          ">
            ${adItemsHtml}
          </div>
        </div>
      `
      console.log('🎯 ネイティブ広告グリッドを作成しました')
    }

    // コンテナにコンテンツを追加
    adContainer.innerHTML = adContent
    adContainer.appendChild(closeButton)
    overlay.appendChild(adContainer)
    document.body.appendChild(overlay)

    // インプレッションを追跡
    if (adData.impression) {
      fetch(adData.impression, { method: 'GET', mode: 'no-cors' })
        .then(() => console.log('📊 インプレッションを追跡しました'))
        .catch(e => console.log('⚠️ インプレッション追跡に失敗しました:', e))
    }

  } catch (error) {
    console.error('❌ 広告表示中のエラー:', error)
  }
}
```

</details>
{% endstep %}

{% step %}

### トリガーボタンを追加

```tsx
return (
  <div>
    <h1>マイページ</h1>
    <button onClick={triggerFPIAd}>
      FPI広告を読み込む
    </button>
  </div>
)
```

{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/fpi-spa-with-exoclick.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.