直接串接 - VMFive/vmfive-man-web-demo GitHub Wiki

開始

本章節只適用於欲將VMFive Ads廣告程式碼直接放置於頁面上，而不透過任何投放與控量系統協助的開發者。

現階段VMFive並不對開發商提供後台直接取得廣告程式碼的功能，請在下個小節選擇欲串接的格式，並直接使用對應的範例廣告程式碼使來進行測試。若測試沒有任何的問題，請與VMFive的BD團隊聯繫取得正式的廣告程式碼。

支援的格式

Native Video

請將以下廣告程式碼置放於欲顯示廣告的位置，廣告程式碼會自行運作：

<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab', testMode: true });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="59771821098e61b339cc72be" ad-type='video-native'></vmfive-ad-unit>

Demo page (mobile only): Native Video Demo

Top Video

請將以下廣告程式碼置放於欲顯示廣告的位置，廣告程式碼會自行運作：

<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab', testMode: true });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="59780352098e61b339cc7417" ad-type='video-top'></vmfive-ad-unit>

Demo page (mobile only): Top Video Demo

Interstitial

VMFive Ads提供兩種不同Interstitial形式：

Pop-out Interstitial

請將以下廣告程式碼放置於HTML

中任意位置，廣告程式碼會自行運作： 
<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab' });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="5978077c098e61b339cc741a" ad-type='video-interstitial'></vmfive-ad-unit>

Demo page (mobile only): Pop-out Interstitial

Embedded Interstitial

請將以下廣告程式碼放置於Interstitial框架中，程式碼會自行運作：

<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab' });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="5978077c098e61b339cc741a" ad-type='video-interstitial-embedded'></vmfive-ad-unit>

Demo page (mobile only): Embedded Interstitial

Impressive

請將以下廣告程式碼置放於欲顯示廣告的位置，廣告程式碼會自行運作：

<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab' });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="59780790098e61b339cc741c" ad-type='video-impressive'></vmfive-ad-unit>

Demo page (mobile only): Impressive

Vertical Video

同Interstitial，VMFive Ads在垂直式影音廣告上亦針對不同的使用情境提供兩種做法：

Pop-out Vertical Video

請將以下廣告程式碼放置於HTML

中任意位置，廣告程式碼會自行運作： 
<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab' });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="597807a2098e61b339cc741e" ad-type='portraitvideo-interstitial'></vmfive-ad-unit>

Demo page (mobile only): Pop-out Vertical Video

Embedded Vertical Video

請將以下廣告程式碼放置於Interstitial框架中，程式碼會自行運作：

<script id="vm5ad-js-sdk" src="https://vawpro.vm5apis.com/man.js" data-mode="fast"></script>
<script>
window.onVM5AdSDKReady = function() {
VM5AdSDK.init({ appKey: '58217ac44c41a3f21d1264ab' });
};
</script>
<script src="https://man.vm5apis.com/dist/adn-web-sdk.js"></script>
<vmfive-ad-unit placement-id="597807a2098e61b339cc741e" ad-type='portraitvideo-interstitial-embedded'></vmfive-ad-unit>

Demo page (mobile only): Embedded Vertical Video

⚠️ **GitHub.com Fallback** ⚠️