Интеграция ExoClick Ad Zone с Vue.js

В этом руководстве мы рассмотрим различные примеры интеграции ExoClick Ad Zones в проект Vue.js.

Пример: Баннер

Шаг 1. Создайте компоненты/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>

Не забудьте заменить ins class и data-zoneid на фактический класс и свой собственный идентификатор зоны из вашей панели администратора.

Шаг 2. Используйте его в App.vue

Импортируйте рекламный компонент в ваше основное приложение

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


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

Вы можете перемещать <BannerAd /> в любое место макета (хедер, футер, сайдбар и т.д.).

Запустите приложение, и вы увидите рекламный баннер.

Пример: VAST

This example uses Fluid Player as the video player to serve ads.

Шаг 1. Создайте файл 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>

Не забудьте заменить все значения-заместители на свои собственные.

Шаг 2. Используйте его в App.vue

Импортируйте рекламный компонент в ваше основное приложение

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

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

Запустите приложение, и вы увидите рекламу VAST.

Пример: Popunder

Шаг 1. В общей папке создайте файл с именем: popunder_script.js

Вы можете назвать его как угодно.

Шаг 2. Вставьте скрипт Popunder из вашей админ-панели ExoClick в файл.

Убедитесь, что форматирование такое же, как в примере ниже.

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

Не забудьте заменить idzone на свой собственный идентификатор зоны из панели администратора. Обновите trigger_class, если у вас настроен пользовательский класс для кликов.

Шаг 3. Добавьте скрипт в файл 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>

При такой настройке popunder-реклама будет появляться при взаимодействии с пользователем.

Примечание: Скрипт рекламы Push Notification работает только при добавлении скрипта в index.html