> 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/it/tutorial/tutorial-per-editori/fpi-spa-with-exoclick.md).

# Annunci interstitial a pagina intera nelle applicazioni a pagina singola

Questa guida dimostra come implementare **Interstitial a pagina intera (FPI)** gli annunci in una Single Page Application (SPA) utilizzando chiamate API dirette. Funziona con React, Vue, Angular e altri framework.

<figure><img src="/files/a83a84ebadd35000d92e14fc8c3c66dc5a45554c" alt=""><figcaption></figcaption></figure>

## Implementazione passo dopo passo

{% stepper %}
{% step %}

### Imposta lo stato del componente

Per prima cosa, crea variabili di stato per tenere traccia del tuo sistema pubblicitario e della navigazione:

```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('✅ Metodo API FPI inizializzato')
  }, [])
}
```

{% endstep %}

{% step %}

### Crea la funzione di richiesta API

Questa funzione effettua una richiesta HTTP diretta al server pubblicitario FPI:

```typescript
const triggerFPIAd = async () => {
  console.log('🎯 Eseguendo una chiamata API diretta al servizio FPI...')

  try {
    // Prepara la richiesta con il contesto dell'utente
    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, // Il tuo ID Zona FPI (usa l'ID zona FPI mobile per i dispositivi mobili)
        extra_params: {
          first_request: true,
          zone_type: 35 // Formato interstitial
        }
      }]
    }

    // Effettua la chiamata 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('📥 Risposta API completa:', data)

    // Elabora la risposta
    if (data.zones && data.zones.length > 0) {
      const zone = data.zones[0]
     
      if (zone.data) {
        console.log('🎨 Visualizzazione dell'annuncio...')
        await displayInterstitialAd(zone.data)
      } else {
        console.log('❌ Nessun dato dell'annuncio nella risposta')
      }
    }

  } catch (error) {
    console.error('❌ Errore API FPI:', error)
  }
}
```

{% endstep %}

{% step %}

### Crea la funzione di visualizzazione

Questa funzione gestisce più formati di annuncio

```typescript
const displayInterstitialAd = async (adData: any) => {
  console.log('🎨 Inizio visualizzazione dell'annuncio interstitial...')

  try {
    // Rimuovi eventuali overlay esistenti
    const existingOverlay = document.getElementById('fpi-interstitial-overlay')
    if (existingOverlay) {
      document.body.removeChild(existingOverlay)
    }

    // Crea overlay a schermo intero
    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;
    `

    // Crea il contenitore dell'annuncio
    const adContainer = document.createElement('div')
    adContainer.style.cssText = `
      position: relative;
      width: 100vw;
      height: 100vh;
      background: white;
      overflow: hidden;
    `

    // Crea il pulsante di chiusura
    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('🚪 Annuncio interstitial chiuso')
    }

    // Determina il formato dell'annuncio e crea il contenuto
    let adContent = ''

    // Formato 1: annuncio 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('🖼️ Creato annuncio iframe')
    }
```

<details>

<summary>Fai clic per espandere altri formati di annuncio</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('🖼️ Creato annuncio iframe')
    }
   
    // Formato 2: annuncio video
    else if (adData.video) {
      const hasClickUrl = adData.url && adData.url.trim() !== ''

      if (hasClickUrl) {
        // Video con click-through
        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;
            ">
              Fai clic per visitare l'inserzionista
            </div>
          </div>
        `
        console.log('🎬 Creato banner video cliccabile')
      } else {
        // Video normale
        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('🎬 Creato annuncio video')
      }
    }
   
    // Formato 3: annuncio click-through
    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;">
            🎯 Annuncio interstitial
          </h2>
          <p style="color: white; margin-bottom: 30px; font-size: 24px;">
            Fai clic per visitare l'inserzionista
          </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;
             ">
            Visita ora
          </a>
        </div>
      `
      console.log('🔗 Creato annuncio click-through')
    }
   
    // Formato 4: annunci nativi
    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 || 'Sponsorizzato'}</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;">Contenuto sponsorizzato</h2>
          <div style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
          ">
            ${adItemsHtml}
          </div>
        </div>
      `
      console.log('🎯 Creata griglia di annunci nativi')
    }

    // Aggiungi il contenuto al contenitore
    adContainer.innerHTML = adContent
    adContainer.appendChild(closeButton)
    overlay.appendChild(adContainer)
    document.body.appendChild(overlay)

    // Traccia l'impression
    if (adData.impression) {
      fetch(adData.impression, { method: 'GET', mode: 'no-cors' })
        .then(() => console.log('📊 Impression tracciata'))
        .catch(e => console.log('⚠️ Tracciamento dell'impression fallito:', e))
    }

  } catch (error) {
    console.error('❌ Errore durante la visualizzazione dell'annuncio:', error)
  }
}
```

</details>
{% endstep %}

{% step %}

### Aggiungi pulsante di attivazione

```tsx
return (
  <div>
    <h1>La mia pagina</h1>
    <button onClick={triggerFPIAd}>
      Carica annuncio FPI
    </button>
  </div>
)
```

{% endstep %}
{% endstepper %}

## Esempio di codice completo

Pronto a vederlo in azione? Dai un'occhiata alla nostra demo interattiva che combina tutti i passaggi sopra in un'implementazione funzionante.

**Demo live:** [Visualizza il codice e il sito demo](https://codesandbox.io/p/devbox/exo-spa-fpi-58zynm)

<figure><img src="/files/99c90be83df329d1ef4aa784df698ff1a0ea0654" alt=""><figcaption></figcaption></figure>


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/it/tutorial/tutorial-per-editori/fpi-spa-with-exoclick.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.