ExoClick 广告位与 Vue.js 的集成

在本教程中，我们将通过不同示例讲解如何在 Vue.js 项目中集成 ExoClick 广告区域。

示例：横幅

创建 components/BannerAd.vue

<template>
 <h2>横幅广告 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 为实际的 class 和你在管理面板中的自定义区域 ID。

在 App.vue 中使用它

在主应用中导入广告组件

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


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

你可以将其放置在 <BannerAd /> 布局中的任何位置（页眉、页脚、侧边栏等）。

运行应用后，你应该会看到横幅广告。

示例：VAST

此示例使用 Fluid Player 作为视频播放器来投放广告。

创建 components/FluidPlayer.vue

<template>
 <div class="video-section">
   <h2>VAST 广告与 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(() => {
 // 加载 Fluid Player CDN
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // 初始化 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: "广告"
     }
   });
 };
 document.body.appendChild(script);
});
</script>

请记得将所有占位值替换为你自己的值。

在 App.vue 中使用它

在主应用中导入广告组件

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

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

运行应用后，你应该会看到 VAST 广告。

示例：Popunder

在你的 public 文件夹中，创建一个名为：popunder_script.js 的文件

你可以随意命名它。

将 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。\n更新 trigger_class 如果你为点击配置了自定义 class。

将脚本添加到 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>
</head>

<body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>

<!-- ExoClick Popunder 脚本 -->
 <script type="application/javascript" src="/popunder_script.js"></script>
 <!-- ExoClick Popunder 脚本结束 -->
</body>

</html>

通过此设置，弹出底层广告会在用户交互时触发。

Push Notification 广告脚本只有在将脚本添加到 index.html

上一页将 ExoClick 广告位添加到应用程序中

下一页FPI Ads in SPAs

最后更新于 3个月前

这有帮助吗？