8 changed files with 422 additions and 341 deletions
@ -0,0 +1,151 @@ |
|||||||
|
/** |
||||||
|
* 广告调用SDK |
||||||
|
* 2023-04-11 by Wangwei |
||||||
|
*/ |
||||||
|
|
||||||
|
import axios from "axios"; |
||||||
|
const fineAd = (window.fineAd = window.fineAd || {}); |
||||||
|
fineAd.options = fineAd.options || {}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 初始化SDK配置 |
||||||
|
* @param debug |
||||||
|
* @param dev |
||||||
|
* @param adApiUrl |
||||||
|
*/ |
||||||
|
const config = ({ debug = false, dev = false, adApiUrl }) => { |
||||||
|
fineAd.options = { |
||||||
|
...fineAd.options, |
||||||
|
debug, |
||||||
|
dev, |
||||||
|
adApiUrl: dev ? 'https://testjdy.fanruan.com/fcoin' : 'https://home.fanruan.com/fcoin', |
||||||
|
}; |
||||||
|
if(debug){ |
||||||
|
console.log('adApiUrl', fineAd.config.adApiUrl); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 获取并展示指定广告id的广告位 |
||||||
|
* @param adId 广告位id |
||||||
|
* @param adId2 如果adId没有匹配到则显示第二个广告位 |
||||||
|
* @param top 顶边距 |
||||||
|
* @param bottom 底边距 |
||||||
|
*/ |
||||||
|
const getAdvertisement = async ({adId, adId2, top, bottom}) => { |
||||||
|
const { debug, dev } = fineAd.options; |
||||||
|
const dataPath = dev ? 'test' : 'prod'; |
||||||
|
await axios.get("https://shequ-oss.obs.cn-east-2.myhuaweicloud.com/digit/ad/data/" + dataPath + "/advertisement.json?v=" + Date.now()) |
||||||
|
.then(function (res) { |
||||||
|
var isAdId = false; |
||||||
|
res.data.forEach((item) => { |
||||||
|
if(item.adId === adId){ |
||||||
|
isAdId = true; |
||||||
|
let getSize = splitPicSize(item.picSize); |
||||||
|
if(debug){ |
||||||
|
console.group("advertisement " + adId); |
||||||
|
console.log('item',item); |
||||||
|
console.log('picSize',getSize); |
||||||
|
console.log('top',top); |
||||||
|
console.log('bottom',bottom); |
||||||
|
console.groupEnd(); |
||||||
|
} |
||||||
|
let adDomId = document.getElementById('AD-' + adId); |
||||||
|
adDomId.innerHTML=''; |
||||||
|
window.fineAd.adMargin({ adId:adId, top:top }); |
||||||
|
// 无链接图片广告
|
||||||
|
if(!item.adLink && item.type===1){ |
||||||
|
adDomId.innerHTML+=`<img width="${getSize.w}" height="${getSize.h}" src="${item.picUrl}">`; |
||||||
|
} |
||||||
|
// 有链接图片广告
|
||||||
|
if(item.adLink && item.type===1){ |
||||||
|
adDomId.innerHTML+=`<a onClick="window.fineAd.advertisementHits('${adId}');" href="${item.adLink}" target="_blank"><img width="${getSize.w}" height="${getSize.h}" src="${item.picUrl}"></a>`; |
||||||
|
} |
||||||
|
// 有链接文本广告
|
||||||
|
if(item.adLink && item.type===2){ |
||||||
|
adDomId.innerHTML+=`<a onClick="window.fineAd.advertisementHits('${adId}');" href="${item.adLink}" target="_blank">${item.adText}</a>`; |
||||||
|
} |
||||||
|
window.fineAd.adMargin({ adId:adId, bottom:bottom }); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// 找第二个广告位
|
||||||
|
if(adId2 && !isAdId){ |
||||||
|
res.data.forEach((item) => { |
||||||
|
if(item.adId === adId2){ |
||||||
|
console.log('isAdId',isAdId); |
||||||
|
let getSize = splitPicSize(item.picSize); |
||||||
|
if(debug){ |
||||||
|
console.group("advertisement " + adId2); |
||||||
|
console.log('item',item); |
||||||
|
console.log('picSize',getSize); |
||||||
|
console.log('top',top); |
||||||
|
console.log('bottom',bottom); |
||||||
|
console.groupEnd(); |
||||||
|
} |
||||||
|
let adDomId = document.getElementById('AD-' + adId2); |
||||||
|
adDomId.innerHTML=''; |
||||||
|
window.fineAd.adMargin({ adId:adId2, top:top }); |
||||||
|
// 有链接图片广告
|
||||||
|
if(item.adLink && item.type===1){ |
||||||
|
adDomId.innerHTML=`<a onClick="window.fineAd.advertisementHits('${adId2}');" href="${item.adLink}" target="_blank"><img width="${getSize.w}" height="${getSize.h}" src="${item.picUrl}"></a>`; |
||||||
|
} |
||||||
|
// 有链接文本广告
|
||||||
|
if(item.adLink && item.type===2){ |
||||||
|
adDomId.innerHTML=`<a onClick="window.fineAd.advertisementHits('${adId2}');" href="${item.adLink}" target="_blank">${item.adText}</a>`; |
||||||
|
} |
||||||
|
window.fineAd.adMargin({ adId:adId2, bottom:bottom }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
.catch(function (error) { |
||||||
|
console.log('ad error',error); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 广告边距 |
||||||
|
* @param top 顶边距 |
||||||
|
* @param bottom 底边距 |
||||||
|
*/ |
||||||
|
const adMargin = ({ adId, top = 0, bottom = 0 }) => { |
||||||
|
let adDomId = document.getElementById('AD-' + adId); |
||||||
|
if(top > 0){ |
||||||
|
adDomId.innerHTML+=`<div style="height:${top}px;"></div>`; |
||||||
|
}else if(bottom > 0){ |
||||||
|
adDomId.innerHTML+=`<div style="height:${bottom}px;"></div>`; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 拆分广告位尺寸 |
||||||
|
* @param adSize 广告位尺寸 |
||||||
|
* @return Array[w,h] 宽和高 |
||||||
|
*/ |
||||||
|
const splitPicSize = (adSize) =>{ |
||||||
|
let {w,h} = {w:'',h:''}; |
||||||
|
if(adSize){ |
||||||
|
let {[0]:w,[1]:h} = adSize.replace(/\s/g,"").split('*'); |
||||||
|
return {w,h}; |
||||||
|
}else{ |
||||||
|
return {w,h}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 广告位埋点 |
||||||
|
* @param adId 广告位id |
||||||
|
*/ |
||||||
|
const advertisementHits = (adId) =>{ |
||||||
|
const { adApiUrl } = fineAd.options; |
||||||
|
axios.get(adApiUrl + "/api/advertisement/hits/" + adId); |
||||||
|
} |
||||||
|
|
||||||
|
fineAd.config = config; |
||||||
|
fineAd.adMargin = adMargin; |
||||||
|
fineAd.getAdvertisement = getAdvertisement; |
||||||
|
fineAd.advertisementHits = advertisementHits; |
||||||
|
|
||||||
Loading…
Reference in new issue