Integración de ExoClick Ad Zone con Vue.js

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

Ejemplo: Banner

Paso 1. Crear components/BannerAd.vue Crear components/BannerAd.vue

<template>
 <h2>Banner Ad 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>

Recuerde sustituir ins class y data-zoneid por la clase real y su propio ID de zona desde su panel de administración.

Segundo paso. Utilícelo en App.vue

Importe el componente de anuncios en su aplicación principal

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


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

Puede mover <BannerAd /> a cualquier lugar del diseño (cabecera, pie de página, barra lateral, etc.).

Ejecute la aplicación y debería ver el banner publicitario.

Ejemplo: VAST

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

Paso 1. Crear components/FluidPlayer.vue Crear components/FluidPlayer.vue

<template>
 <div class="video-section">
   <h2>Vast Ads & 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(() => {
 // Load Fluid Player CDN
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Initialize 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>

Recuerde sustituir todos los valores de los marcadores de posición por los suyos propios.

Segundo paso. Utilícelo en App.vue

Importe el componente de anuncios en su 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 de VAST.

Ejemplos Popunder

Paso 1. En su carpeta pública, cree un archivo llamado: popunder_script.js

Puedes ponerle el nombre que quieras.

Paso 2. Pegue el script Popunder de su panel de administración ExoClick dentro del archivo.

Asegúrese de tener el mismo formato que en el ejemplo siguiente.

(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...
})();

Recuerde reemplazar idzone con su propio ID de zona desde el panel de administración. Actualice trigger_class si tiene una clase personalizada configurada para los clics.

Paso 3. Añada 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>

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

</html>

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

Nota: Push Notification ad script sólo funciona cuando el script se añade a index.html