VMFive Ads 通用廣告碼 - VMFive/vmfive-man-web-demo GitHub Wiki

VMFive Ads DFP 通用廣告碼

按照格式選取廣告碼類型

VMFive Ads DFP 通用範例廣告碼

Top

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

	 if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '59780352098e61b339cc7417');
     adUnit.setAttribute('ad-type', 'video-top');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Native

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);

     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '59771821098e61b339cc72be');
     adUnit.setAttribute('ad-type', 'video-native');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Impressive

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '59780790098e61b339cc741c');
     adUnit.setAttribute('ad-type', 'video-impressive');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Interstitial

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '5978077c098e61b339cc741a');
     adUnit.setAttribute('ad-type', 'video-interstitial');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Embedded Interstitial

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '5978077c098e61b339cc741a');
     adUnit.setAttribute('ad-type', 'video-interstitial-embedded');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Portrait Video

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '597807a2098e61b339cc741e');
     adUnit.setAttribute('ad-type', 'portraitvideo-interstitial');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>

Embedded Portrait Video

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Friendly iframe</title>
</head>
<body>
  <div class="passbackContainer">
    <div id="passbackMountPoint"></div>
  </div>
  <script>
   var creativeID = parseInt("%ecid!"),
       dfpSlotWidth = parseInt("%%WIDTH%%"),
       dfpSlotHeight = parseInt("%%HEIGHT%%"),
       isRender = 0,
       slotEl;

   window.top.googletag.pubads().addEventListener('slotRenderEnded', function(event) {

     if (isRender === 1) return;
     if (!(event.creativeId === creativeID || (event.isEmpty === false && event.creativeId === null))) return;
     if (!(event.sourceAgnosticCreativeId === creativeID || (event.isEmpty === false && event.sourceAgnosticCreativeId === null))) return;

     event.slot.setCollapseEmptyDiv(true, true);
     var dfpSlotElementID = event.slot.getSlotElementId();
     slotEl = window.top.document.getElementById(dfpSlotElementID);
     console.log(dfpSlotElementID);

     createManJsAnchor(window.top.document, slotEl);
     createAdUnit(window.top.document, slotEl);
     loadScripts(window.top.document);
     registerSDKReadyCallback(window.top);
     isRender = 1;
   });

   function createManJsAnchor(document, el) {
     var anchor = document.createElement('div');
     anchor.id = 'vm5ad-js-sdk';
     anchor.setAttribute('data-mode', 'fast');
     el.parentNode.insertBefore(anchor, el);
   }

   function createAdUnit(document, el) {
     var adUnit = document.createElement('vmfive-ad-unit');
     adUnit.setAttribute('placement-id', '597807a2098e61b339cc741e');
     adUnit.setAttribute('ad-type', 'portraitvideo-interstitial-embedded');
     adUnit.setAttribute('click-url', '%%CLICK_URL_UNESC%%');
     el.parentNode.insertBefore(adUnit, el);
   }

   function loadScripts(document) {
     [
       "https://vawpro.vm5apis.com/man.js",
       "https://man.vm5apis.com/dist/adn-web-sdk.js"
     ].forEach(function(src) {
       var script = document.createElement('script');
       script.src = src;
       script.async = false;
       document.head.appendChild(script);
     });
   }

   function registerSDKReadyCallback(win) {
     win.onVM5AdSDKReady = function() {
       win.VM5AdSDK.init({
         appKey: '58217ac44c41a3f21d1264ab',
         testMode: true,
         passbackMountPoint: document.getElementById('passbackMountPoint'),
         onPlacementPrepared: function() {
           slotEl.style.display = "none";
         }

       });
     };
   }
  </script>
</body>
</html>

<img src=%%VIEW_URL_UNESC%%>
⚠️ **GitHub.com Fallback** ⚠️