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

# Integración de zonas publicitarias de ExoClick con Vue.js

En este tutorial, repasaremos diferentes ejemplos de cómo integrar ExoClick Ad Zones dentro de un proyecto Vue.js.

## Ejemplo: Banner

{% stepper %}
{% step %}

### Crear components/BannerAd.vue

```vue
<template>
 <h2>Anuncio banner 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>
```

Recuerda reemplazar ambos `clase ins` y `data-zoneid` con la clase real y tu propio ID de zona desde tu panel de administración.
{% endstep %}

{% step %}

### Úsalo en App.vue

Importa el componente del anuncio en tu aplicación principal

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


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

Puedes moverlo `<BannerAd />` a cualquier parte del diseño (encabezado, pie de página, barra lateral, etc.).

Ejecuta la aplicación y deberías ver el anuncio de banner.

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

## Ejemplo: VAST

Este ejemplo usa [Fluid Player](https://www.fluidplayer.com/) como reproductor de video para mostrar anuncios.

{% stepper %}
{% step %}

### Crear components/FluidPlayer.vue

```vue
<template>
 <div class="video-section">
   <h2>Anuncios VAST y 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(() => {
 // Cargar CDN de Fluid Player
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Inicializar 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: "Advertisement"
     }
   });
 };
 document.body.appendChild(script);
});
</script>
```

Recuerda reemplazar todos los valores de marcador de posición con los tuyos.
{% endstep %}

{% step %}

### Úsalo en App.vue

Importa el componente del anuncio en tu aplicación principal

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

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

Ejecuta la aplicación y deberías ver los anuncios VAST.

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

## Ejemplo: Popunder

{% stepper %}
{% step %}

### En tu carpeta public, crea un archivo llamado: popunder\_script.js

<figure><img src="/files/174aacd5c8b4a2f9f815f6a477b0d38d04bcd092" alt=""><figcaption></figcaption></figure>

Puedes nombrarlo como quieras.
{% endstep %}

{% step %}

### Pega el script de Popunder de tu panel de administración de ExoClick dentro del archivo.

Asegúrate de tener el mismo formato que ves en el ejemplo de abajo.

```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){};

   //versión 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...
})();
```

Recuerda reemplazar `idzone` con tu propio ID de zona desde el panel de administración.\
Actualiza `trigger_class` si tienes configurada una clase personalizada para los clics.
{% endstep %}

{% step %}

### Añade el 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>

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

</html>
```

Con esta configuración, el anuncio popunder se activará con la interacción del usuario.

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

{% hint style="info" %}
El script del anuncio de notificación push solo funciona cuando el script se agrega 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/es/tutoriales/tutoriales-para-editores/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.