> 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/es/tutoriales/tutoriales-para-editores/fpi-spa-with-exoclick.md).

# Anuncios intersticiales de página completa en aplicaciones de una sola página

Esta guía demuestra cómo implementar **Intersticial de página completa (FPI)** anuncios en una aplicación de una sola página (SPA) usando llamadas directas a la API. Funciona con React, Vue, Angular y otros marcos.

<figure><img src="https://2761987514-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>

## Implementación paso a paso

{% stepper %}
{% step %}

### Configurar el estado del componente

Primero, crea variables de estado para rastrear tu sistema de anuncios y la navegación:

```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('✅ Método API de FPI inicializado')
  }, [])
}
```

{% endstep %}

{% step %}

### Crear función de solicitud API

Esta función realiza una solicitud HTTP directa al servidor de anuncios FPI:

```typescript
const triggerFPIAd = async () => {
  console.log('🎯 Realizando llamada API directa al servicio FPI...')

  try {
    // Preparar la solicitud con el contexto del usuario
    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, // Tu ID de zona FPI (usa el ID de zona FPI móvil para dispositivos móviles)
        extra_params: {
          first_request: true,
          zone_type: 35 // Formato intersticial
        }
      }]
    }

    // Realizar llamada a la 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(`¡Error HTTP! estado: ${response.status}`)
    }

    const data = await response.json()
    console.log('📥 Respuesta completa de la API:', data)

    // Procesar respuesta
    if (data.zones && data.zones.length > 0) {
      const zone = data.zones[0]
     
      if (zone.data) {
        console.log('🎨 Mostrando anuncio...')
        await displayInterstitialAd(zone.data)
      } else {
        console.log('❌ No hay datos de anuncios en la respuesta')
      }
    }

  } catch (error) {
    console.error('❌ Error de la API de FPI:', error)
  }
}
```

{% endstep %}

{% step %}

### Crear la función de visualización

Esta función maneja múltiples formatos de anuncio

```typescript
const displayInterstitialAd = async (adData: any) => {
  console.log('🎨 Comenzando a mostrar el anuncio intersticial...')

  try {
    // Eliminar cualquier superposición existente
    const existingOverlay = document.getElementById('fpi-interstitial-overlay')
    if (existingOverlay) {
      document.body.removeChild(existingOverlay)
    }

    // Crear superposición de pantalla completa
    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;
    `

    // Crear contenedor del anuncio
    const adContainer = document.createElement('div')
    adContainer.style.cssText = `
      position: relative;
      width: 100vw;
      height: 100vh;
      background: white;
      overflow: hidden;
    `

    // Crear botón de cerrar
    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('🚪 Anuncio intersticial cerrado')
    }

    // Determinar el formato del anuncio y crear contenido
    let adContent = ''

    // Formato 1: anuncio en iframe
    if (adData.html && adData.html.includes('iframe.php')) {
      `
        <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('🖼️ Se creó el anuncio en iframe')
    }
```

<details>

<summary>Haz clic para expandir formatos adicionales de anuncios</summary>

```typescript
    if (adData.html && adData.html.includes('iframe.php')) {
      `
        <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('🖼️ Se creó el anuncio en iframe')
    }
   
    // Formato 2: anuncio de video
    else if (adData.video) {
      const hasClickUrl = adData.url && adData.url.trim() !== ''

      if (hasClickUrl) {
        // Video con clic de salida
        `
          <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;
            ">
              Haz clic para visitar al anunciante
            </div>
          </div>
        `
        console.log('🎬 Se creó el anuncio de banner de video con clic')
      } else {
        // Video normal
        `
          <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('🎬 Se creó el anuncio de video')
      }
    }
   
    // Formato 3: anuncio con clic de salida
    else if (adData.url) {
      `
        <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;">
            🎯 Anuncio intersticial
          </h2>
          <p style="color: white; margin-bottom: 30px; font-size: 24px;">
            Haz clic para visitar al anunciante
          </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;
             ">
            Visitar ahora
          </a>
        </div>
      `
      console.log('🔗 Se creó el anuncio con clic de salida')
    }
   
    // Formato 4: anuncios nativos
    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 || 'Patrocinado'}</div>
          </div>
        </div>
      `).join('')

      `
        <div style="
          width: 100vw;
          height: 100vh;
          background: #f5f5f5;
          overflow-y: auto;
          padding: 20px;
        ">
          <h2 style="text-align: center; margin-bottom: 20px;">Contenido patrocinado</h2>
          <div style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
          ">
            ${adItemsHtml}
          </div>
        </div>
      `
      console.log('🎯 Se creó la cuadrícula de anuncios nativos')
    }

    // Añadir contenido al contenedor
    adContainer.innerHTML = adContent
    adContainer.appendChild(closeButton)
    overlay.appendChild(adContainer)
    document.body.appendChild(overlay)

    // Registrar impresión
    if (adData.impression) {
      fetch(adData.impression, { method: 'GET', mode: 'no-cors' })
        .then(() => console.log('📊 Impresión registrada'))
        .catch(e => console.log('⚠️ Falló el registro de impresión:', e))
    }

  } catch (error) {
    console.error('❌ Error al mostrar el anuncio:', error)
  }
}
```

</details>
{% endstep %}

{% step %}

### Agregar botón de activación

```tsx
return (
  <div>
    <h1>Mi página</h1>
    <button onClick={triggerFPIAd}>
      Cargar anuncio 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/es/tutoriales/tutoriales-para-editores/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.