Реклама Full Page Interstitial в одностраничных приложениях

Это руководство демонстрирует, как реализовать Полностраничный интерстициальный формат (FPI) рекламу в одностраничном приложении (SPA) с использованием прямых вызовов API. Работает с React, Vue, Angular и другими фреймворками.

Пошаговая реализация

1

Настройка состояния компонента

Сначала создайте переменные состояния для отслеживания вашей рекламной системы и навигации:

'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('✅ Метод API FPI инициализирован')
  }, [])
}

2

Создание функции API-запроса

Эта функция выполняет прямой HTTP-запрос к рекламному серверу FPI:

const triggerFPIAd = async () => {
  console.log('🎯 Выполняется прямой вызов API к сервису FPI...')

  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, // Ваш ID зоны FPI (для мобильных устройств используйте мобильный ID зоны FPI)
        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('❌ Ошибка API FPI:', error)
  }
}

3

Создание функции отображения

Эта функция обрабатывает несколько рекламных форматов

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')
    }

Нажмите, чтобы развернуть дополнительные форматы рекламы

    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 || 'Sponsored'}</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)
  }
}

4

Добавить кнопку запуска

return (
  <div>
    <h1>Моя страница</h1>
    <button onClick={triggerFPIAd}>
      Загрузить рекламу FPI
    </button>
  </div>
)

Полный пример кода

Готовы увидеть это в действии? Ознакомьтесь с нашей интерактивной демонстрацией, которая объединяет все шаги выше в рабочую реализацию.

Живая демонстрация: Посмотреть код и сайт с демо