ExoClick Ad Zone Integration mit Vue.js

In diesem Tutorial werden wir verschiedene Beispiele durchgehen, wie man ExoClick Ad Zones in ein Vue.js Projekt integrieren kann.

Beispiel: Banner

Schritt 1. Komponenten/BannerAd.vue erstellen

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

Denken Sie daran, sowohl ins class als auch data-zoneid durch die tatsächliche Klasse und Ihre eigene Zonen-ID aus Ihrer Verwaltungskonsole zu ersetzen.

Schritt 2. Verwenden Sie es in App.vue

Importieren Sie die Anzeigenkomponente in Ihre Hauptanwendung

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


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

Sie können <BannerAd /> an eine beliebige Stelle im Layout verschieben (Kopfzeile, Fußzeile, Seitenleiste usw.).

Führen Sie die App aus und Sie sollten das Werbebanner sehen.

Beispiel: VAST

In diesem Beispiel wird Fluid Player als Videoplayer zum Ausliefern von Anzeigen verwendet.

Schritt 1. Komponenten/FluidPlayer.vue erstellen

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

Denken Sie daran, alle Platzhalterwerte durch Ihre eigenen zu ersetzen.

Schritt 2. Verwenden Sie es in App.vue

Importieren Sie die Anzeigenkomponente in Ihre Hauptanwendung

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

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

Starten Sie die App und Sie sollten die VAST-Anzeigen sehen.

Beispiel: Popunder

Schritt 1. Erstellen Sie in Ihrem öffentlichen Ordner eine Datei mit dem Namen: popunder_script.js

Sie können es nennen, wie Sie wollen.

Schritt 2. Fügen Sie das Popunder-Skript aus Ihrem ExoClick-Administrationsbereich in die Datei ein.

Vergewissern Sie sich, dass Sie die gleiche Formatierung wie im unten stehenden Beispiel verwenden.

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

Denken Sie daran, idzone durch Ihre eigene Zonen-ID aus der Verwaltungskonsole zu ersetzen. Aktualisieren Sie "trigger_class", wenn Sie eine eigene Klasse für Klicks konfiguriert haben.

Schritt 3. Hinzufügen des Skripts zu 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>

Bei dieser Einstellung wird die Popunder-Anzeige bei Benutzerinteraktion ausgelöst.

Hinweis: Das Skript für Push-Benachrichtigungen funktioniert nur, wenn das Skript zu "index.html" hinzugefügt wird