This article mainly introduces a new way of post-advertising, supporting customized HTML ads, Baidu affiliate ads and Google affiliate ads. This method is executed after the page is loaded, and does not affect the display of content and is more user-friendly.
The easiest way for us to place advertisements on the website is to insert the JS code into the specified location. This has the consequence that the page is loaded in order. Occasionally, an advertisement code is stuck, and the entire page will be stuck, which brings a very poor experience to the user.
So how to solve this problem? Let’s talk about the principle first. Let’s reserve some placeholders on our page. In order not to affect the loading of the page content, we introduce JS processing at the bottom of the page and replace the placeholders with the corresponding advertisements one by one.
Let's look at the specific implementation steps below:
1. Place a placeholder on the page, which is actually a span mark
The code copy is as follows:
<span id="ads_one"></span>
<span id="ads_two"></span>
<span id="ads_three"></span>
2. Write independent JS script code: jbLoader.js
The code copy is as follows:
jbMap = window.jbMap || {};
function jbViaJs(locationId) {
var _f = undefined;
var _fconv = 'jbMap[/"' + locationId + '/"]';
try {
_f = eval(_fconv);
if (_f != undefined) {
_f()
}
} catch(e) {}
}
function 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];
break
}
}
if (jbTest == null) return;
if (!closetag) {
document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>");
jbViaJs(jbTest.id);
Return
}
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)) continue;
jbTest.parentNode.insertBefore(node, jbTest);
i--
}
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'+'ipt>');
};
jbMap['ads_three'] = function() {
document.writeln('<scri'+'pt async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="//www.VeVB.COM"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'script>');
};
Note: jbMap is an array that places advertisements. The array's Key and Span tag IDs correspond to them. We can add our own advertisements in this form in this JS. This advertising loading method supports customized HTML advertising, Baidu affiliate advertising, and Google affiliate advertising. Here we have demonstrated it.
3. Introduce JS at the bottom of the page and call jbLoader to load the ad
The code copy is as follows:
<script type="text/javascript" src='js/jbLoader.js'></script>
<script>jbLoader();</script><script>jbLoader(true);</script>
<script>jbLoader();</script><script>jbLoader(true);</script>
<script>jbLoader();</script><script>jbLoader(true);</script>
Note: The format must be the format as above. If there are several placeholders, add a few <script>jbLoader();</script><script>jbLoader(true);</script>
Don't ask the editor why he called this way. In fact, I have also studied it:
1. The first time jbLoader() is to write the tag, and the second time jbLoader(true) is to replace the tag.
2. Use two <script>s to get the corresponding elements in the second call.
3. Write a few lines of script when there are several placeholders to avoid affecting each other and display them separately.
In short: Many major websites are using this method, so everyone can use it with confidence. At this point, the call to load after the page advertisement is completed.