Nếu có yêu cầu cụ thể đối với đơn vị quảng cáo Multiplex thích ứng, bạn có thể tuỳ chỉnh giao diện của chúng bằng cách thêm thông số vào mã quảng cáo. Những thông số này cho phép bạn thay đổi các khía cạnh như bố cục của đơn vị đơn vị quảng cáo Multiplex và cho biết cách bạn muốn sắp xếp các hàng và cột của quảng cáo trong đơn vị quảng cáo này.
Bạn cũng có thể sử dụng những thông số này để đặt các chế độ cài đặt khác nhau cho thiết bị di động và máy tính để bàn. Ví dụ: nếu bạn chỉ cung cấp một giá trị cho thông số bố cục, thì bố cục của đơn vị quảng cáo Multiplex sẽ giống nhau trên thiết bị di động và máy tính để bàn. Ngược lại, nếu bạn cung cấp 2 giá trị cho thông số bố cục thì đơn vị quảng cáo Multiplex sẽ có 1 bố cục trên thiết bị di động (giá trị đầu tiên) và 1 bố cục khác trên máy tính để bàn (giá trị thứ hai).
Xin lưu ý rằng những lựa chọn này chỉ dành cho đơn vị quảng cáo Multiplex thích ứng và bạn cần có tất cả các thông số thì mới tuỳ chỉnh được. Sau khi sửa đổi mã quảng cáo, hãy nhớ thử nghiệm đơn vị quảng cáo Multiplex trên các thiết bị và màn hình khác nhau để chắc chắn rằng chúng hoạt động đúng cách.
Thay đổi bố cục của đơn vị quảng cáo Multiplex
Thông số bố cục (data-matched-content-ui-type) cho phép bạn kiểm soát cách sắp xếp văn bản và hình ảnh trong đơn vị quảng cáo Multiplex. Ví dụ: bạn có thể chọn để hình ảnh và văn bản cạnh nhau, hình ảnh phía trên văn bản, v.v.
Bạn có thể sử dụng các tùy chọn bố cục sau:
Trong bố cục này, hình ảnh và văn bản xuất hiện bên cạnh nhau. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="image_sidebyside" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Trong bố cục này, hình ảnh và văn bản xuất hiện bên cạnh nhau bên trong thẻ. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="image_card_sidebyside" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Trong bố cục này, hình ảnh và văn bản được xếp chồng lên nhau. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="image_stacked" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Trong bố cục này, hình ảnh và văn bản được xếp chồng lên nhau bên trong một thẻ. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="image_card_stacked" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Bố cục chỉ văn bản không có hình ảnh. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="text" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Bố cục chỉ văn bản trong thẻ. Để chọn bố cục này, hãy thêm thông số data-matched-content-ui-type="text_card" vào mã quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text_card"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Chỉ định số hàng và số cột trong đơn vị quảng cáo Multiplex
Quảng cáo bên trong đơn vị quảng cáo Multiplex được sắp xếp trong một lưới. Bạn có thể chỉ định số hàng và cột mà bạn muốn lưới đó hiển thị. Ví dụ: bạn có thể đặt đơn vị quảng cáo Multiplex là hình vuông 2x2, cột 4x1, v.v.
Bạn đặt số hàng bằng thông số data-matched-content-rows-num và số cột bằng thông số data-matched-content-columns-num. Bạn phải đặt cả hai thông số và data-matched-content-ui-type cùng nhau.
- Số hàng và cột mà bạn có thể đặt sẽ bị hạn chế. Tổng số quảng cáo trong đơn vị quảng cáo Multiplex phải nằm trong khoảng từ 1 đến 30. Nếu bạn cố gắng hiển thị ít hơn 1 hoặc nhiều hơn 30 quảng cáo, thì đơn vị quảng cáo Multiplex sẽ không hiển thị hàng và cột nào.
- Đôi khi, chúng tôi có thể không hiển thị chính xác số hàng và/hoặc số cột bạn đã chỉ định. Ví dụ: nếu bạn đã đặt rất nhiều cột nhưng đơn vị quảng cáo Multiplex không đủ rộng để chứa toàn bộ số cột đó. Trong trường hợp này, chúng tôi sẽ điều chỉnh số hàng và/hoặc cột để quảng cáo vừa với không gian hiện có và cung cấp trải nghiệm tốt cho người dùng.
Ví dụ về hàng và cột
Đoạn mã trong ví dụ này minh hoạ cách tạo một đơn vị quảng cáo Multiplex có 4 hàng và 1 cột sẽ hiển thị tổng cộng 4 quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Đoạn mã trong ví dụ này minh hoạ cách tạo một đơn vị quảng cáo Multiplex có 2 hàng và 2 cột sẽ hiển thị tổng cộng 4 quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="2"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Đoạn mã trong ví dụ này minh hoạ cách tạo một đơn vị quảng cáo Multiplex có 3 hàng và 3 cột sẽ hiển thị tổng cộng 9 quảng cáo.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Mã trong ví dụ này minh hoạ cách tạo đơn vị quảng cáo Multiplex có lưới 4x1 trên thiết bị di động và lưới 2x2 trên máy tính để bàn. Bạn nên sử dụng cách thiết lập này nếu có trang web thích ứng.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4,2"
data-matched-content-columns-num="1,2"
data-matched-content-ui-type="image_stacked,image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Cách xử lý
Sau khi bạn tuỳ chỉnh đơn vị quảng cáo Multiplex, nó có thể không xuất hiện giống như bạn mong đợi. Dưới đây là một số vấn đề thường gặp với đơn vị quảng cáo Multiplex và cách khắc phục:
Có 2 lý do có thể khiến điều này xảy ra:
- Tổng số quảng cáo trong đơn vị quảng cáo Multiplex phải nhỏ hơn 1 hoặc nhiều hơn 30. Bạn nên thay đổi số hàng và/hoặc cột trong đơn vị quảng cáo Multiplex để tổng số quảng cáo nằm trong giới hạn này.
- Đơn vị quảng cáo Multiplex quá rộng so với số lượng quảng cáo bạn đã đặt. Trong trường hợp này, bạn nên thử giảm chiều rộng của đơn vị quảng cáo Multiplex.
Sử dụng bảng điều khiển để tìm lỗi trong đơn vị quảng cáo Multiplex
Bạn có thể sử dụng bảng điều khiển trong trình duyệt để kiểm tra xem bạn đã sửa đổi chính xác mã quảng cáo Multiplex hay chưa. Ví dụ: bảng điều khiển có thể cho bạn biết liệu mã quảng cáo có thiếu một thông số bắt buộc hoặc liệu một thông số có chứa giá trị không hợp lệ hay không.
Nếu sử dụng Chrome thì bạn có thể làm theo những bước sau để kiểm tra mã quảng cáo trong Bảng điều khiển DevTools:
- Truy cập vào trang có đơn vị quảng cáo Multiplex.
- Nhấn đồng thời các phím Ctrl+Shift+J (Windows/Linux) hoặc Cmd+Opt+J (Mac).
- Kiểm tra Bảng điều khiển xem có thông báo lỗi hay không.
