跳至主要内容

ExoClick 广告区与 Vue.js 的集成

在本教程中，我们将举例说明如何在 Vue.js 项目中集成 ExoClick Ad Zones。

示例：横幅​

步骤 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 替换为实际类别和管理面板中您自己的区域 ID。

第 2.步在 App.vue 中使用​

在主应用程序中导入广告组件

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


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

您可以将 <BannerAd /> 移动到布局中的任何位置（页眉、页脚、侧边栏等）。

运行该程序，你会看到横幅广告。

ExoClick Ad Zone Integration with Vue.js

示例：VASTVAST​

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

步骤 1.创建组件/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 广告。

ExoClick Ad Zone Integration with Vue.js

实例：Popunder​

步骤 1.在公共文件夹中创建一个名为：popunder_script.js 的文件​

ExoClick Ad Zone Integration with Vue.js

你想给它取什么名字都行。

第 2 步将 ExoClick 管理面板中的 Popunder 脚本粘贴到文件中。​

确保格式与下面示例中的格式相同。

(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 替换为管理面板中您自己的区域 ID。如果为点击配置了自定义类，请更新 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 广告将在用户互动时触发。

ExoClick Ad Zone Integration with Vue.js

注意：推送通知广告脚本仅在将脚本添加到 index.html 时有效