이 기사는 주로 새로운 포스트 밴딩 방법, 맞춤형 HTML 광고, Baidu 계열사 광고 및 Google 제휴 광고를 지원하는 새로운 방법을 소개합니다. 이 방법은 페이지가로드 된 후에 실행되며 컨텐츠 표시에 영향을 미치지 않으며보다 사용자 친화적입니다.
웹 사이트에 광고를 배치하는 가장 쉬운 방법은 JS 코드를 지정된 위치에 삽입하는 것입니다. 이는 페이지가 순서대로로드 된 결과가 있습니다. 때때로 광고 코드가 고정되고 전체 페이지가 고정되어 사용자에게 매우 열악한 경험을 제공합니다.
그렇다면이 문제를 해결하는 방법은 무엇입니까? 먼저 원리에 대해 이야기합시다. 우리 페이지에 일부 자리 표시자를 예약합시다. 페이지 컨텐츠로드에 영향을 미치지 않기 위해 페이지 하단에 JS 처리를 도입하고 자리 표시자를 해당 광고로 하나씩 교체합니다.
아래의 특정 구현 단계를 살펴 보겠습니다.
1. 자리 표시자를 페이지에 배치하는데, 실제로는 스팬 마크입니다.
코드 사본은 다음과 같습니다.
<span id = "ads_one"> </span>
<span id = "ads_two"> </span>
<span id = "ads_three"> </span>
2. 독립적 인 JS 스크립트 코드를 쓰십시오 : jbloader.js
코드 사본은 다음과 같습니다.
jbmap = window.jbmap || {};
함수 jbviajs (locationId) {
var _f = 정의되지 않은;
var _fconv = 'jbmap [/"' + locationId + '/"]';
노력하다 {
_f = 평가 (_fconv);
if (_f! = 정의되지 않은) {
_에프()
}
} catch (e) {}
}
함수 jbloader (closetag) {
var jbtest = null,
jbtestpos = document.getElementsByTagName ( "span");
for (var i = 0; i <jbtestpos.length; i ++) {
if (jbtestpos [i] .classname == "jbtestpos") {
jbtest = jbtestpos [i];
부서지다
}
}
if (jbtest == null) 반환;
if (! closetag) {
document.write ( "<span id = jbtestpos_" + jbtest.id + "style = display : none>");
jbviajs (jbtest.id);
반품
}
document.write ( "</span>");
var real = document.getElementById ( "jbtestpos_" + jbtest.id);
for (var i = 0; i <real.childnodes.length; i ++) {
var node = real.childnodes [i];
if (node.tagname == "script"&& /closetag/.test(node.classname)) 계속;
jbtest.parentnode.insertbefore (Node, Jbtest);
나--
}
jbtest.parentnode.removechild (jbtest);
Real.parentNode.RemoveChild (Real)
}
jbmap [ 'ads_one'] = function () {
document.writeln ( '<a href = "// www.vevb.com/"target = "_ blank"> wulin.com </a>');
};
jbmap [ 'ads_two'] = function () {
document.writeln ( '<scr'+'ipt type = "text/javaScript"> var cpro_id = "u336546"; </script> <script src = "http://cpro.baidustatic.com/cpro/ui/c.js"type "="text/javascript "> </scr');
};
jbmap [ 'ads_three'] = function () {
document.writeln ( '<scri'+'pt async src = "// pagead2.googlesyndicatic.com/pagead/js/adsbygoogle.js"></scri'+'pt> insty ="display : inline-block; width : 300px; data-ad-slot = "2253650178"data-Override-Format = "true"data-page-url = "// www.vevb.com"> </in> <scri '+'pt> (adsbygoogle = wind
};
참고 : JBMAP는 광고를 배치하는 배열입니다. 배열의 키 및 스팬 태그 ID는 그들과 일치합니다. 우리는이 JS 에서이 형태로 우리 자신의 광고를 추가 할 수 있습니다. 이 광고로드 방법은 맞춤형 HTML 광고, Baidu 제휴 광고 및 Google 제휴 광고를 지원합니다. 여기서 우리는 그것을 시연했습니다.
3. 페이지 하단에 JS를 소개하고 JBLOADER에 전화하여 광고를로드합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = 'js/jbloader.js'> </script>
<cript> jbloader (); </script> <cript> jbloader (true); </script>
<cript> jbloader (); </script> <cript> jbloader (true); </script>
<cript> jbloader (); </script> <cript> jbloader (true); </script>
참고 : 형식은 위와 같이 형식이어야합니다. 자리 표시자가 여러 경우 <cript> jbloader (); </script> <cript> jbloader (true); </script>를 추가하십시오
편집자에게 왜 이런 식으로 전화했는지 묻지 마십시오. 사실, 나는 또한 그것을 연구했습니다.
1. JBLOADER ()가 처음으로 태그를 작성하는 것은 처음이며 두 번째는 JBLOADER (TRUE)가 태그를 교체하는 것입니다.
2. 두 개의 <cript>를 사용하여 두 번째 호출에서 해당 요소를 얻습니다.
3. 여러 줄의 스크립트를 작성하여 여러 자리 표시자가있을 때 서로 영향을 미치지 않고 별도로 표시하십시오.
요컨대 : 많은 주요 웹 사이트 가이 방법을 사용하고 있으므로 모든 사람이 자신감을 가지고 사용할 수 있습니다. 이 시점에서 페이지 광고 후로드 호출이 완료됩니다.