Cách cài đặt mã quảng cáo AMP Adsense đáp ứng trên Blogspot AMP

Từ khi có dự án AMP áp dụng cho web/blog, Những người làm dự án AMP cũng đã hướng dẫn cách cài đặt mã quảng cáo Adsense AMP đáp ứng cho blogspot AMP.

Với việc sử dụng các mã quảng cáo đáp ứng trong tài khoản adsense sau đó thay các trị số vào code Google đã hướng dẫn tùy thuộc vào các vị trí và đảm bảo không vi phạm chính sách của Google.

Thời gian gần đây Adsense đã phát triển thuật toán tự động phát hiện mã quảng cáo được cài đặt trên trang AMP và đã đưa ra code cài đặt mã adsense đáp ứng mới và hơi khác với mã của dự án AMP đã cung cấp trước đó làm nhiều người áp dụng gặp khó khăn khi triển khai mã và thực hiện không thành công.

Thứ nhất là mã adsense cung cấp cần phải sửa lại một chút mới lưu được mẫu.
Thứ hai nếu áp dụng mã này khi xem trên máy tính bàn sẽ phát sinh lỗi về bố cục.

Sau đây là phần hướng dẫn cách cài đặt mã quảng cáo AMP Adsense đáp ứng trên Blogspot AMP

Mã quảng cáo AMP đáp ứng từ Adsense như sau:

<amp-ad width="100vw" height=320
     type="adsense"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890"
     data-auto-format="rspv"
     data-full-width>
  <div overflow></div>
</amp-ad>

Nhưng nếu được cài đặt trong mẫu của Blogspot thì cần điều chỉnh lại mới có thể lưu được mẫu. Mã sẽ được điều chỉnh như dưới đây.

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""/>
</amp-ad>

Và với chiều cao quảng cáo 320 pixel, Adsense cũng giải thích rằng kích thước quảng cáo AMP đáp ứng này an toàn để xuất hiện trong màn hình đầu tiên và dưới màn hình đầu tiên .

Và hãy nhớ rằng những quảng cáo AMP Adsense đáp ứng này chỉ dành cho thiết bị di động, vì vậy mã quảng cáo AMP Adsense đáp ứng này không phù hợp với giao diện của máy tính để bàn, do đó chúng ta cần một mẹo để cài đặt nó.

Trong trường hợp này, chúng ta cài đặt 2 mã quảng cáo từ cùng một vị trí và phân ra 2 tình huống:
- Sẽ chỉ xuất hiện trên máy tính để bàn
- Sẽ chỉ xuất hiện trên thiết bị di động
Bằng cách sử dụng thẻ có điều kiện trên thiết bị di động và máy tính để bàn.

Tại cùng một vị trí ta đặt mã như sau.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- Quảng cáo trên Desktop -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' height='250' layout='fixed-height' type='adsense'>
</amp-ad>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Quảng cáo trên mobile -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>
</b:if>

Với code trên phần mã dùng cho máy tính để bàn ta chỉ cần khống chế chiều cao của quảng cáo còn chiều rộng để tự động lấp đầy khoảng trống.

Thay các trị số data-ad-client='ca-pub-1234567890' và data-ad-slot='1234567890' từ các đơn vị quảng cáo đáp ứng của bạn.

Lưu ý:

+ Đối với máy tính bàn
Với các mã quảng cáo như:
Nội dung phù hợp ta cần thêm data-ad-format='autorelaxed' vào code
Quảng cáo trong nguồn cấp dữ liệu hoặc quảng cáo gốc trong bài viết ta cần thêm data-ad-format="fluid" vào code.

+ Với một số vị trí nhậy cảm như trong màn hình đầu tiên để cho chắc ăn không vi phạm chính sách của adsense tại phần code chỉ hiện trên mobile nên dùng mã sau:

<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' height='100' layout='fixed-height' type='adsense'>
</amp-ad>