Js动态放置H5广告的方法

常见广告类型

ads.txt

将ads.txt放在发布站点的根目录下，申请广告。

成功申请，获取可以放置的广告代码如下：

Here below the TAGs (/head)

<link rel="dns-prefetch" href="//exmarketplace.com">
<link rel="preconnect" href="//cdn.exmarketplace.com">
<link rel="preconnect" href="//securepubads.g.doubleclick.net">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script async src="https://cdn.exmarketplace.com/bidder/augovercast/augovercast.dfp.min.js"></script>


Here below the DIV (body):
<!--Masterhead-->
<div class="gptslot" data-adunitid="0"></div>

<!--Incontent_1-->
<div class="gptslot" data-adunitid="1"></div>

<!--Incontent_2-->
<div class="gptslot" data-adunitid="2"></div>

<!--Incontent_3-->
<div class="gptslot" data-adunitid="3"></div>

<!--Incontent_4-->
<div class="gptslot" data-adunitid="4"></div>

Google Ad Manager

这种方式要求每个网页里只能放入一次不同的广告div。

优化下后需要插入的代码如下：

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
********300x250******
<div id="be_augdamp_300x250">
 <script>***</script>
</div>

********300x250_1******

<div id="be_augdamp_300x250_1">
  <script>***</script>
</div>

********300x250_2*****
<div id="be_augdamp_300x250_2">
 <script>***</script>
</div>

*******336x280*******
<div id="be_augdamp_336x280">
 <script>***</script>
</div>

*******336x280_1*******
<div id="be_augdamp_336x280_1">
  <script>***</script>
</div>


***INTERSTITIAL****     
Header
======
<script>***</script>
</script>

body
=====
<script>***</script>

***********footer_sticky********
Header
=====
<script>***</script>

Body
=====
<!-- /21952429235,22902988476/be_augdamp_footer_sticky -->
<div id='div-gpt-ad-1692862484432-0' style='min-width: 728px; min-height: 90px;'>
 <script>***</script>
</div>

放置广告的多种情况

首先想到的是在html文件里直接放入广告代码，但是有时候一个网页里需要多次放入广告且放置位置不好确定。例如现在网页里有个游戏列表，需要你在游戏列表里每隔9个游戏就插入一个广告。这时我们就要用到js来插入像adx.txt的广告代码(暂且不考虑请求方式),用动态生成广告div的方式放置广告则会根据游戏个数生成对应的广告盒子。另一种方式就是延续html文件里直接放入广告代码的方法。提前算好有多少个游戏，需要多少个广告盒。然后根据广告盒子动态插入其他队列。

动态生成广告div

缺点：需要考虑js脚本的运行顺序，不然会出现生成好没法自己请求广告的情况

let ndiv = document.createElement('div');// 设置类名和数据属性
ndiv.className = 'gptslot';
ndiv.setAttribute('data-adunitid', `${tag}`); //tag为广告标签 0,1,2,4？看上面的adx.txt插入代码

上面这样就动态生成一个广告了。但是游戏列表总个数不唯一不是？所以下面就要进行遍历处理一下，设一个父div(class为InView,id为inview),该div下放置gamebox和gptslot。

const batchSize = 9;  //每九个
const list = GAME_DATA.list;  //游戏列表数据
const inviewnode = document.getElementById('inview') //放置游戏列表和广告gptslot的父节点
for (let i = 0; i < list.length; i += batchSize) {
  // 创建每9个游戏的父容器元素
  let parentDiv = document.createElement('div');
  parentDiv.id = 'gamebox' + (i / batchSize);
  parentDiv.className = 'gamebox';
  
  //动态插入广告
  let ndiv = document.createElement('div');// 设置类名和数据属性
  ndiv.className = 'gptslot';
  ndiv.setAttribute('data-adunitid', `${i % 3}`);

  inviewnode.appendChild(ndiv);

  inviewnode.appendChild(parentDiv);

  // 提取当前批次的元素，使用 slice() 方法
  const batch = list.slice(i, i + batchSize);

  // 调用buildChildDiv()生成gamebox内容，自定义
  buildChildDiv(batch, parentDiv.id, "productRow");

}

附：CSS样式

.gptslot {
  width: 100%;
  height: auto;
}

.InView {
  width: 100%;
  height: auto;
}
.InView .gamebox {
  <!-- 可以自己调整 -->
}

根据广告div动态插入其他队列

缺点：需要提前算需要多少个广告位，需要提前在html里加入广告位置代码。
同样设一个父div(class为InView,id为inview),里面放好广告代码。

<div class="InView" id="inview">
     <div class="gptslot" data-adunitid="2"></div>
     <div class="gptslot" data-adunitid="3"></div>
     <div class="gptslot" data-adunitid="4"></div>
     <div class="gptslot" data-adunitid="0"></div>
     <div class="gptslot" data-adunitid="1"></div>
     <div class="gptslot" data-adunitid="2"></div>
     <div class="gptslot" data-adunitid="3"></div>
     <!-- ... -->
   </div>

然后获取gptslot的个数，每两个gptslot之间插一个游戏或其他队列。

const batchSize = 12;  //每12个游戏
const list = GAME_DATA.list;  //游戏列表数据
const inviewnode = document.getElementById('inview') //放置游戏列表和广告gptslot的父节点
const gptSlots = inviewnode.getElementsByClassName('gptslot');获取广告div

let gptIndex = 0; // 游戏盒子队列插入位置的索引

for (let i = 0; i < list.length; i += batchSize) {
  const batch = list.slice(i, i + batchSize);
  // 创建父容器元素
  let parentDiv = document.createElement('div');
  parentDiv.id = 'gamebox' + (i / batchSize + 1);
  parentDiv.className = 'gamebox';

  if (gptIndex < gptSlots.length) {
    // 插入游戏盒子队列到<div class="gptslot" data-adunitid=""></div>之后
    inviewnode.insertBefore(parentDiv, gptSlots[gptIndex].nextSibling);
  } else {
    // 如果gptSlots不足，将父容器元素插入到末尾
    inviewnode.appendChild(parentDiv);
  }

  // 调用buildChildDiv()生成id为gamebox(i / batchSize + 1)内容，自定义
  buildChildDiv(batch, parentDiv.id, "chlid");
  gptIndex++; // 更新游戏盒子队列插入位置的索引
}