Tutorial 2x Cách thu gọn các khoảng trống khi không có quảng cáo AdSense cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,062
Được Like
8,885
Cách thu gọn các khoảng trống khi không có quảng cáo AdSense cho XenForo 2

Nếu bạn biết một hoặc nhiều vị trí quảng cáo trên trang của bạn không phải lúc nào cũng được lấp đầy, bạn có thể hướng dẫn trình duyệt thu gọn các div trống bằng cách thêm phương thức collapseEmptyDivs() vào thẻ của bạn.

Phương pháp này có thể kích hoạt một dòng lại nội dung trên trang của bạn, vì vậy cách bạn sử dụng nó phụ thuộc vào tần suất bạn mong đợi một vị trí quảng cáo được lấp đầy.

Nếu bạn không sử dụng phương thức collapseEmptyDivs(), một <div> trống sẽ không thu gọn và nội dung trang sẽ không bao giờ được chỉnh lại. Điều này có thể dẫn đến một khoảng trống trên trang nếu quảng cáo không được phân phát cho một trong các vị trí quảng cáo của nó.

Theo mặc định, các vị trí quảng cáo không được lấp đầy sẽ hiển thị, điều này có thể dẫn đến không gian trống trên trang của bạn. Nếu bạn biết một hoặc nhiều vị trí quảng cáo trên trang của bạn dường như không được lấp đầy, bạn có thể hướng dẫn thư viện Google Publisher Tag (GPT) thu gọn chúng.

Thận trọng: Sử dụng tính năng này có thể kích hoạt một dòng lại nội dung trên trang của bạn, vì vậy nó nên được sử dụng một cách thận trọng.

Cấu hình tối ưu của tính năng này sẽ phụ thuộc vào tần suất bạn mong đợi các vị trí quảng cáo được lấp đầy:
  1. Nếu các vị trí được lấp đầy hầu hết thời gian, hãy sử dụng PubAdsService.collapseEmptyDivs(). Trong cấu hình này, các vị trí quảng cáo được mở rộng theo mặc định và chỉ thu gọn nếu chúng không thể được lấp đầy.
  2. Nếu hầu hết thời gian không được lấp đầy, hãy sử dụng PubAdsService.collapseEmptyDivs(true). Trong cấu hình này, các vị trí quảng cáo được thu gọn theo mặc định và chỉ mở rộng nếu chúng có thể được lấp đầy.
Bạn cũng có thể định cấu hình ghi đè trên mỗi vị trí, như được hiển thị trong ví dụ bên dưới, nếu các vị trí cụ thể trên trang của bạn có nhiều khả năng được lấp đầy.
Mã:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Collapse empty ad slots</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
// Configure all ad slots on the page to be expanded by default, but
// collapse slots that are unable to be filled with an ad.
googletag.pubads().collapseEmptyDivs();

// The above setting assumes all ad slots are likely to be filled.
// If ad slots are not likely to be filled, pass true as a parameter as
// shown below. In this configuration, slots will be collapsed by
// default and expanded only if they are able to be filled.
// googletag.pubads().collapseEmptyDivs(true);

// This slot will use the page-level settings configured above.
googletag.defineSlot('/6355419/Travel', [300, 250], 'ad-slot-1')
.setTargeting("test", "responsive")
.addService(googletag.pubads());

// Configure per-slot overrides.
// This slot will be expanded by default, but collapse if it cannot be
// filled.
googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
.setTargeting("test", "responsive")
.setCollapseEmptyDiv(true)
.addService(googletag.pubads());

// This slot will be expanded by default and never collapse.
googletag.defineSlot('/6355419/Travel', [200, 150], 'ad-slot-3')
.setTargeting("test", "responsive")
.setCollapseEmptyDiv(false)
.addService(googletag.pubads());

// This slot will be collapsed by default and only expand if it can be
// filled.
googletag.defineSlot('/6355419/Travel', [150, 100], 'ad-slot-4')
.setTargeting("test", "responsive")
.setCollapseEmptyDiv(true, true)
.addService(googletag.pubads());

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<style>
div.ad-container {
border: solid;
}

div.ad-slot {
border-style: dashed;
display: inline-block;
}
</style>
</head>
<body>
<div class="ad-container">
<p>Ad slot #1</p>
<div id="ad-slot-1" class="ad-slot" style="width: 300px; height: 250px;"></div>
</div>

<div class="ad-container">
<p>Ad slot #2</p>
<div id="ad-slot-2" class="ad-slot" style="width: 250px; height: 200px;"></div>
</div>

<div class="ad-container">
<p>Ad slot #3</p>
<div id="ad-slot-3" class="ad-slot" style="width: 200px; height: 150px;"></div>
</div>

<div class="ad-container">
<p>Ad slot #4</p>
<div id="ad-slot-4" class="ad-slot" style="width: 150px; height: 100px;"></div>
</div>

<script>
googletag.cmd.push(function() {
googletag.display('ad-slot-1');
});
</script>
</body>
</html>

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom