> 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/tutorials/publishers-tutorials/fpi-spa-with-exoclick.md).
# Full Page Interstitial Ads in Single Page Applications
This guide demonstrates how to implement **Full Page Interstitial (FPI)** ads in a Single Page Application (SPA) using direct API calls. Works with React, Vue, Angular, and other frameworks.
## Step-by-Step Implementation
{% stepper %}
{% step %}
### Setup Component State
First, create state variables to track your ad system and navigation:
```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 method initialized')
}, [])
}
```
{% endstep %}
{% step %}
### Create API Request Function
This function makes a direct HTTP request to the FPI ad server:
```typescript
const triggerFPIAd = async () => {
console.log('🎯 Making direct API call to FPI service...')
try {
// Prepare request with user context
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, // Your FPI Zone ID (use mobile FPI zone ID for mobile devices)
extra_params: {
first_request: true,
zone_type: 35 // Interstitial format
}
}]
}
// Make API call
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('📥 Full API Response:', data)
// Process response
if (data.zones && data.zones.length > 0) {
const zone = data.zones[0]
if (zone.data) {
console.log('🎨 Displaying ad...')
await displayInterstitialAd(zone.data)
} else {
console.log('❌ No ad data in response')
}
}
} catch (error) {
console.error('❌ FPI API Error:', error)
}
}
```
{% endstep %}
{% step %}
### Create the Display Function
This function handles multiple ad formats
```typescript
const displayInterstitialAd = async (adData: any) => {
console.log('🎨 Starting to display interstitial ad...')
try {
// Remove any existing overlay
const existingOverlay = document.getElementById('fpi-interstitial-overlay')
if (existingOverlay) {
document.body.removeChild(existingOverlay)
}
// Create fullscreen overlay
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;
`
// Create ad container
const adContainer = document.createElement('div')
adContainer.style.cssText = `
position: relative;
width: 100vw;
height: 100vh;
background: white;
overflow: hidden;
`
// Create close button
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('🚪 Interstitial ad closed')
}
// Determine ad format and create content
let adContent = ''
// Format 1: Iframe Ad
if (adData.html && adData.html.includes('iframe.php')) {
adContent = `
`
console.log('🖼️ Created iframe ad')
}
```
Click to expand additional ad formats
```typescript
if (adData.html && adData.html.includes('iframe.php')) {
adContent = `
`
console.log('🖼️ Created iframe ad')
}
// Format 2: Video Ad
else if (adData.video) {
const hasClickUrl = adData.url && adData.url.trim() !== ''
if (hasClickUrl) {
// Video with click-through
adContent = `
Click to visit advertiser
`
console.log('🎬 Created clickable video banner ad')
} else {
// Regular video
adContent = `
`
console.log('🎬 Created video ad')
}
}
// Format 3: Click-Through Ad
else if (adData.url) {
adContent = `
)
```
{% endstep %}
{% endstepper %}
## Complete Code Example
Ready to see it in action? Check out our interactive demo that combines all the steps above into a working implementation.
**Live Demo:** [View Code & Demo Site](https://codesandbox.io/p/devbox/exo-spa-fpi-58zynm)
---
# 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/tutorials/publishers-tutorials/fpi-spa-with-exoclick.md?ask=&goal=
```
`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.