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

Crear components/BannerAd.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.

Úsalo en App.vue

Importa el componente del anuncio en tu aplicación principal

<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.

Ejemplo: VAST

Este ejemplo usa Fluid Player como reproductor de video para mostrar anuncios.

Crear components/FluidPlayer.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.

Úsalo en App.vue

Importa el componente del anuncio en tu aplicación principal

<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.

Ejemplo: Popunder

En tu carpeta public, crea un archivo llamado: popunder_script.js

Puedes nombrarlo como quieras.

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.

(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.

Añade el script a index.html

<!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.

El script del anuncio de notificación push solo funciona cuando el script se agrega a index.html

AnteriorAñadir zonas publicitarias de ExoClick a las aplicaciones SiguienteFPI Ads in SPAs

Última actualización hace 2 meses

¿Te fue útil?