最新消息:

新广告系统页面脚本引入方式

广告类 knitter 205浏览 0评论

新的广告系统采用了新的json和新的展现,现在只需要在页面上引入一个脚本,然后在需要放置广告的链接上配置自定义属性,就可以了,具体使用和脚本如下。

一、引入脚本

在页面底部引入脚本:

[js]
http://ossweb-img.qq.com/images/js/comm/tgadshow.min.js
[/js]

该脚本可以延迟或动态加载。

二、配置广告

当产品配置广告后,会给到两个ID,一个是产品id,另一个是广告位的id,可以在单页面上引入多个业务的广告。

如具体的json源格式为:

[js]
var oDaTaNew2 = {“pos1”:[“AVA生存大挑战”,”http://ava.qq.com”,”upload/%7B4B35B4A2-9046-45A2-85DE-D7D9B99D323B%7D.png”,”200″,”200″]}
[/js]

字段的意思分别为:{表示广告位的id:[广告标题,广告链接,广告图片地址,广告图片的宽度,广告图片的高度]}
我们只需要在需要显示广告的链接上,添加自定义属性data-TGAD=”2,1″就可以了。

[js]
<a href=”#” data-TGAD=”2,1″></a>
[/js]

轮播广告也是一样:

[js]
<a href=”#” data-TGAD=”2,1″></a>
<a href=”#” data-TGAD=”2,2″></a>
<a href=”#” data-TGAD=”2,3″></a>
<a href=”#” data-TGAD=”2,4″></a>
[/js]

三、扩展模式

该脚本目前提供了一个扩展模式,可以处理动态加载脚本,例如:
页面结构如下:

[js]
<button id=”showAD”>动态加载广告</button>
<textarea id=”dynTest” style=”display:none”>
<a href=”#” data-TGAD=”4,20″></a>
<a href=”#” data-TGAD=”4,20″></a>
<a href=”#” data-TGAD=”4,20″></a>
<a href=”#” data-TGAD=”4,20″></a>
<a href=”#” data-TGAD=”2,2″></a>
</textarea>
<div id=”t”></div>
[/js]

在点击按钮showAD后,会加载容器t里面的广告,只需要把该容器的id或对象传入即可:

[js]

document.getElementById(‘showAD’).onclick=function(){
document.getElementById(‘t’).innerHTML=document.getElementById(‘dynTest’).value;
TGAdsShow.init(“t”);
};

[/js]

在TGAdsShow.init(这里传入容器的id或对象);

也可以配合delayImage脚本来滚动加载

三、源代码

[js]

var TGAdsShow=(function(){
var doc=document,
_r=1*new Date,
nu=navigator.userAgent.toLowerCase(),
ie = nu.indexOf(“msie”) != -1,
opera=nu.indexOf(“opera”)!=-1,
strAttribute=”data-TGAD”,
strAttributeTitle=”title-TGAD”,
arrLinks=[],
arrLength,
arrLoadLinks=[];
function attach(d,a,c,b){if(d.addEventListener){d.addEventListener(a,c,b)}else{if(d.attachEvent){d.attachEvent(“on”+a,c)}}}
function loadJson(a,b,c){
var d=doc.createElement(“script”),e=doc.getElementsByTagName(‘head’)[0],bFn1=bFn2=true,f=doc.getElementsByTagName(“script”),j=f.length,h=false;
if(b==null||typeof(b)==’undefined’){bFn1=false}
if(c==null||typeof(c)==’undefined’){bFn2=false}
d.src=a;
d.onloadDone=false;
if(ie){
attach(d,”readystatechange”, function(e) {
if((“loaded”===d.readyState||”complete”===d.readyState) && !d.onloadDone){
d.onloadDone=true;
if(bFn1){b()}
d.onreadystatechange = null;
}
});
if (d.readyState === ‘loaded’ && d.nextSibling == null) {
if(bFn2){c()}
}
}else{
d.onload=function(){
d.onloadDone=true;
if(bFn1){b()}
d.onload=null;
};
d.onerror=function(){
if(bFn2){c()}
d.onerror=null;
};
}
while(j–){
if(f[j].src===a){
b();
h=true;
break;
}
}
if(!h){
doc.documentElement.firstChild.insertBefore(d,null);
}
}
function getElementsByAttribute(oElm,strTagName,strAttributeName,strAttributeValue){
var arrElements = (strTagName == “*” && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName),
arrReturnElements = new Array(),
oAttributeValue = (typeof strAttributeValue != “undefined”)? new RegExp(“(^|\\s)” + strAttributeValue + “(\\s|$)”) : null,
oCurrent,
oAttribute,
i=arrElements.length;
while(i–){
oCurrent = arrElements[i];
oAttribute = oCurrent.getAttribute && oCurrent.getAttribute(strAttributeName);
if(typeof oAttribute == “string” && oAttribute.length > 0){
if(typeof strAttributeValue == “undefined” || (oAttributeValue && oAttributeValue.test(oAttribute))){
arrReturnElements.push(oCurrent);
}
}
}
return arrReturnElements;
}
function loadADs(c){
var _c=c;
if(_c<arrLength){
var o=arrLinks[_c],ad=o.attributes[strAttribute].nodeValue.split(“,”),_0=ad[0],_1=ad[1],_load=false;
if(!(isNaN(_0)||isNaN(_1))){
var strSrc=”http://game.qq.com/time/qqadv/Info_new_”+_0+”.js?v=”+_r,
s=function(){
arrLoadLinks[_0]=1;
_load=true;
setTimeout(function(){removeScript(strSrc)},250);
show(o,_0,_1,_c);
};
if(1==arrLoadLinks[_0]){
show(o,_0,_1,_c);
}else{
setTimeout(function(){
loadJson(strSrc,
function(){if(!_load){s()}},
function(){if(!_load){s()}}
);
}
,0);
}
if(opera){setTimeout(function(){if(!_load){s()}},250)}
}
}
}
function show(o,_0,_1,c){
var _o=o,_c=c,objJson=null,strTitle;
try{
objJson=(new Function(“return “+”oDaTaNew”+_0))();
}catch(e){
objJson=eval(“oDaTaNew”+_0+’={“pos’+_1+'”:[“广告载入错误,请点击该链接,检查JSON是否生成!!”,”http://game.qq.com/time/qqadv/Info_new_’+_0+’.js”,”ad-loading.gif”,”50″,”50″]}’);
}
for(var k in objJson){
if(_1==k.toString().substring(3)){
if(_o.attributes[strAttribute]){
var _j=eval(“oDaTaNew”+_0+”.”+k);
if(_j){
_o.href=_j[1];
strTitle=decodeURI(_j[0]);
_o.innerHTML=”<img src=’http://ossweb-img.qq.com/upload/adw/”+_j[2]+”‘ alt=”+strTitle+” width=”+_j[3]+” height=”+_j[4]+” />”;
_o.removeAttribute(strAttribute);
var arrTitle=getElementsByAttribute(doc,”*”,strAttributeTitle,_0+”,”+_1),iTitleLen=arrTitle.length;
if(iTitleLen>0){
while(iTitleLen–){
var oTitle=arrTitle[iTitleLen];
oTitle.innerHTML=strTitle;
if(oTitle.nodeName==”A”){
oTitle.href=_j[1];
}
oTitle.removeAttribute(strAttributeTitle);
}
}
}
}
}
}
_c++;
loadADs(_c);
}
function removeScript(_s){
var objScr=doc.getElementsByTagName(‘script’),intScrLen=objScr.length,_obj=null;
while(intScrLen–){
_obj=objScr[intScrLen];
if(_obj.src==_s){
var p = _obj.parentNode;
if(p&&p.nodeType === 1){
p.removeChild(_obj)
}
}
}
}
return {
init:function(obj){
var _obj=((typeof(obj)==”object”)?obj:doc.getElementById(obj))||doc;
arrLinks=getElementsByAttribute(_obj,”A”,strAttribute);
arrLength=arrLinks.length;
if(arrLength>0){
loadADs(0);
}
}
};
})();

TGAdsShow.init();
[/js]

四、update

2011/5/4更新:修复一个性能bug,和结构。

2011/5/17更新:添加了对广告标题单独显示的支持。即:需要显示广告为

[js]
<a href=”#” title-TGAD=”44,91″></a>
[/js]

标签为title-TGAD,不一定是链接,也可以是

使用实例:http://gamesafe.qq.com/index.shtml

转载请注明:文档库 » 新广告系统页面脚本引入方式

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址