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

# Anúncios intersticiais de página inteira em aplicações de página única

Este guia demonstra como implementar **Full Page Interstitial (FPI)** anúncios numa Aplicação de Página Única (SPA) usando chamadas diretas à API. Funciona com React, Vue, Angular e outros frameworks.

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

## Implementação Passo a Passo

{% stepper %}
{% step %}

### Configurar o Estado do Componente

Primeiro, crie variáveis de estado para acompanhar o seu sistema de anúncios e a navegação:

```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 da API FPI inicializado')
  }, [])
}
```

{% endstep %}

{% step %}

### Criar Função de Pedido à API

Esta função faz um pedido HTTP direto ao servidor de anúncios FPI:

```typescript
const triggerFPIAd = async () => {
  console.log('🎯 A fazer chamada direta à API para o serviço FPI...')

  try {
    // Preparar pedido com contexto do utilizador
    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, // O seu ID de Zona FPI (use o ID de zona FPI para dispositivos móveis em dispositivos móveis)
        extra_params: {
          first_request: true,
          zone_type: 35 // Formato intersticial
        }
      }]
    }

    // Fazer chamada à 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(`Erro HTTP! status: ${response.status}`)
    }

    const data = await response.json()
    console.log('📥 Resposta completa da API:', data)

    // Processar resposta
    if (data.zones && data.zones.length > 0) {
      const zone = data.zones[0]
     
      if (zone.data) {
        console.log('🎨 A exibir anúncio...')
        await displayInterstitialAd(zone.data)
      } else {
        console.log('❌ Sem dados do anúncio na resposta')
      }
    }

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

{% endstep %}

{% step %}

### Criar a Função de Exibição

Esta função lida com vários formatos de anúncio

```typescript
const displayInterstitialAd = async (adData: any) => {
  console.log('🎨 A iniciar a exibição do anúncio intersticial...')

  try {
    // Remover qualquer sobreposição existente
    const existingOverlay = document.getElementById('fpi-interstitial-overlay')
    if (existingOverlay) {
      document.body.removeChild(existingOverlay)
    }

    // Criar sobreposição em ecrã completo
    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;
    `

    // Criar contentor do anúncio
    const adContainer = document.createElement('div')
    adContainer.style.cssText = `
      position: relative;
      width: 100vw;
      height: 100vh;
      background: white;
      overflow: hidden;
    `

    // Criar botão de fechar
    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('🚪 Anúncio intersticial fechado')
    }

    // Determinar o formato do anúncio e criar conteúdo
    let adContent = ''

    // Formato 1: Anúncio 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('🖼️ Anúncio iframe criado')
    }
```

<details>

<summary>Clique para expandir formatos adicionais de anúncio</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('🖼️ Anúncio iframe criado')
    }
   
    // Formato 2: Anúncio em vídeo
    else if (adData.video) {
      const hasClickUrl = adData.url && adData.url.trim() !== ''

      if (hasClickUrl) {
        // Vídeo com clique
        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;
            ">
              Clique para visitar o anunciante
            </div>
          </div>
        `
        console.log('🎬 Criado anúncio em vídeo clicável em formato de banner')
      } else {
        // Vídeo normal
        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('🎬 Anúncio em vídeo criado')
      }
    }
   
    // Formato 3: Anúncio com clique
    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;">
            🎯 Anúncio intersticial
          </h2>
          <p style="color: white; margin-bottom: 30px; font-size: 24px;">
            Clique para visitar o 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 agora
          </a>
        </div>
      `
      console.log('🔗 Anúncio com clique criado')
    }
   
    // Formato 4: Anúncios 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('')

      adContent = `
        <div style="
          width: 100vw;
          height: 100vh;
          background: #f5f5f5;
          overflow-y: auto;
          padding: 20px;
        ">
          <h2 style="text-align: center; margin-bottom: 20px;">Conteúdo patrocinado</h2>
          <div style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
          ">
            ${adItemsHtml}
          </div>
        </div>
      `
      console.log('🎯 Grade de anúncios nativos criada')
    }

    // Adicionar conteúdo ao contentor
    adContainer.innerHTML = adContent
    adContainer.appendChild(closeButton)
    overlay.appendChild(adContainer)
    document.body.appendChild(overlay)

    // Registar impressão
    if (adData.impression) {
      fetch(adData.impression, { method: 'GET', mode: 'no-cors' })
        .then(() => console.log('📊 Impressão registada'))
        .catch(e => console.log('⚠️ Falha no registo da impressão:', e))
    }

  } catch (error) {
    console.error('❌ Erro ao exibir anúncio:', error)
  }
}
```

</details>
{% endstep %}

{% step %}

### Adicionar Botão de Acionamento

```tsx
return (
  <div>
    <h1>Minha página</h1>
    <button onClick={triggerFPIAd}>
      Carregar anúncio 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/pt/tutoriais/tutoriais-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.