> 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/exoclick-ad-zone-integration-with-vue.js.md).

# Integrazione della zona pubblicitaria ExoClick con Vue.js

In questo tutorial, esamineremo diversi esempi di come integrare le zone pubblicitarie ExoClick all'interno di un progetto Vue.js.

## Esempio: Banner

{% stepper %}
{% step %}

### Crea components/BannerAd.vue

```vue
<template>
 <h2>Banner pubblicitario 300x250</h2>
 <ins class="xxxxxxxxx" data-zoneid="xxxxxxxxx"></ins>
</template>


<script>
export default {
 name: 'BannerAd',
 mounted() {
   const adScript = document.createElement('script');
   adScript.src = 'https://a.magsrv.com/ad-provider.js';
   adScript.async = true;
   adScript.type = 'application/javascript';
   document.body.appendChild(adScript);


   adScript.onload = () => {
     (window.AdProvider = window.AdProvider || []).push({ serve: {} });
   };
 }
}
</script>
```

Ricorda di sostituire entrambi `classe ins` e `data-zoneid` con la classe effettiva e il tuo ID area personale dal pannello di amministrazione.
{% endstep %}

{% step %}

### Usalo in App.vue

Importa il componente pubblicitario nella tua app principale

```javascript
<script setup>
import BannerAd from './components/BannerAd.vue';
</script>


<template>
 <main>
     <BannerAd />
 </main>
</template>
```

Puoi spostarlo `<BannerAd />` ovunque nel layout (header, footer, sidebar, ecc.).

Avvia l'app e dovresti vedere il banner pubblicitario.

<figure><img src="/files/53355c762d3e4b71c459e7906027b7e475f93dc9" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Esempio: VAST

Questo esempio utilizza [Fluid Player](https://www.fluidplayer.com/) come lettore video per servire gli annunci.

{% stepper %}
{% step %}

### Crea components/FluidPlayer.vue

```vue
<template>
 <div class="video-section">
   <h2>Annunci VAST e Fluid Player</h2>
   <div class="video-wrapper">
     <video
       id="example-player"
       controls
       style="width: 640px; height: 360px;"
     >
       <source
         data-fluid-hd
         src="https://www.test.com/video_720.mp4"
         title="720p"
         type="video/mp4"
       />
       <source
         src="https://www.test.com/video_360.mp4"
         title="360p"
         type="video/mp4"
       />
     </video>
   </div>
 </div>
</template>


<script setup>
import { onMounted } from 'vue';


onMounted(() => {
 // Carica il CDN di Fluid Player
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Inizializza Fluid Player
   window.fluidPlayer('example-player', {
     layoutControls: {
       primaryColor: "#28B8ED",
       timelinePreview: {
         file: 'thumbnails.vtt',
         type: 'VTT'
       },
       controlForwardBackward: {
         show: true,
         doubleTapMobile: false
       }
     },
     vastOptions: {
       adList: [
         {
           roll: "preRoll",
           vastTag: "https://s.magsrv.com/v1/vast.php?idzone=xxxxxxxxx",
           timer: 5
         },
         {
           roll: "onPauseRoll",
           vastTag: "https://s.magsrv.com/splash.php?idzone=xxxxxxxxx",
           vAlign: "middle"
         }
       ],
       adCTAText: "Pubblicità"
     }
   });
 };
 document.body.appendChild(script);
});
</script>
```

Ricorda di sostituire tutti i valori segnaposto con i tuoi.
{% endstep %}

{% step %}

### Usalo in App.vue

Importa il componente pubblicitario nella tua app principale

```javascript
<script setup>
import FluidPlayer from './components/FluidPlayer.vue';
</script>

<template>
 <main>
   <FluidPlayer />
 </main>
</template>
```

Avvia l'app e dovresti vedere gli annunci VAST.

<figure><img src="/files/4de518647d115d0d9fc2cb6d36e1973c91ff0856" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Esempio: Popunder

{% stepper %}
{% step %}

### Nella tua cartella pubblica, crea un file chiamato: popunder\_script.js

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

Puoi dargli il nome che vuoi.
{% endstep %}

{% step %}

### Incolla il codice Popunder dal tuo pannello di amministrazione ExoClick all'interno del file.

Assicurati di avere la stessa formattazione che vedi nell'esempio qui sotto.

```javascript
(function() {
   function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val="document.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){};

   //version 7.0.0

   var adConfig = {
   "ads_host": "a.pemsrv.com",
   "syndication_host": "s.pemsrv.com",
   "idzone": xxxxxxxxx,
   "popup_fallback": false,
   "popup_force": false,
   "chrome_enabled": true,
   "new_tab": false,
   "frequency_period": 1,
   "frequency_count": 1,
   "trigger_method": 2,
   "trigger_class": "xxxxxxxxx",
   "trigger_delay": 0,
   "capping_enabled": false,
   "tcf_enabled": false,
   "only_inline": false
};


window.document.querySelectorAll||(document.querySelectorAll...
})();
```

Ricorda di sostituire `idzone` con il tuo ID area dal pannello di amministrazione.\
Aggiorna `trigger_class` se hai configurato una classe personalizzata per i clic.
{% endstep %}

{% step %}

### Aggiungi lo script a index.html

```javascript
<!DOCTYPE html>
<html lang="">

<head>
 <meta charset="UTF-8">
 <link rel="icon" href="/favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
</head>

<body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>

<!-- ExoClick Popunder Script -->
 <script type="application/javascript" src="/popunder_script.js"></script>
 <!-- End ExoClick Popunder Script -->
</body>

</html>
```

Con questa configurazione, il popunder si attiverà all'interazione dell'utente.

<figure><img src="/files/5c2e016b6fb9e846077866bda6ebb709f3933438" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Lo script dell'annuncio Push Notification funziona solo quando lo script viene aggiunto a `index.html`
{% endhint %}


---

# 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/exoclick-ad-zone-integration-with-vue.js.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.