Tạo trang AMP chỉ xuất hiện trên mobile cho blogspot

Tạo trang AMP chỉ xuất hiện trên mobile cho blogspot
Việc tạo trang AMP cho blogspot có thể được thực hiện theo 2 cách:
- Tạo 1 phiên bản AMP xuất hiện trên tất cả các thiết bị máy tính để bàn, máy tính bảng hoặc điện thoại thông minh.
- Tạo trang AMP tách biệt với trang chuẩn và trang AMP này chỉ xuất hiện trên mobile.

Thường ở các mẫu blogspot AMP chia sẻ free người ta chỉ tạo 1 phiên bản AMP dùng cho cả máy tính để bàn và thiết bị di động thông minh.
Nhưng trên blogspot ta hoàn toàn có thể tạo trang AMP riêng biệt từ trang chuẩn bằng cách sử dụng m=1URL trên thiết bị di động trong URL của Blogspot. Bằng cách này, AMP sẽ chỉ xuất hiện trên thiết bị di động.

Với việc tạo AMP trên Blogspot theo cách chỉ hiển thị AMP trên URL trên thiết bị di động m=1 này thì biểu tượng trình xác thực AMP trong tiện ích trình duyệt trên màn hình máy tính để bàn và máy tính bảng sẽ có màu xanh lam với biểu tượng liên kết như trong blog WordPress sử dụng plugin AMP.

Biểu tượng trình xác thực AMP trong tiện ích trình duyệt trên màn hình máy tính để bàn và máy tính bảng màu xanh có biểu tượng liên kết này cho người truy cập biết mình đang xem trang chuẩn thay vì xem trang AMP nhưng trang AMP vẫn đang có sẵn. Bằng cách nhấp vào biểu tượng màu xanh, khách truy cập sẽ được chuyển hướng đến trang AMP.

Vì vậy, nếu trên Blogger, chúng tôi chỉ tạo trang AMP trên URL trên thiết bị di động m=1khi khách truy cập nhấp vào biểu tượng trình xác thực AMP của tiện ích mở rộng màu xanh trên màn hình máy tính để bàn, khi đó khách truy cập sẽ được chuyển hướng đến URLm=1dưới dạng trang AMP.

Ưu điểm với blogspot thiết lập theo cách này nếu sử dụng Google adsense thì việc cài đặt code quảng cáo rất thuận tiện,bạn có thể cài đặt riêng rẽ mã quảng cáo khi xem trên máy tính bàn và khi xem trên mobile vì với 1 phiên bản dùng chung thường code cài theo ads AMP bị lỗi khi xem trên máy tính bàn.

Để tạo trang AMP trên Blogspot chỉ xuất hiện trên URL di động m=1, chúng ta cần một blog phải là AMP hợp lệ. Sau đó, chúng ta sẽ thực hiện một số thay đổi nhỏ để chỉ tạo AMP trên URL trên thiết bị di động m=1.

Bước 1

Tìm mã sau đây hoặc mã tương tự
<HTML amp='amp'  lang='vi'>
Thay thành
<HTML  lang='vi'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>
Tìm mã
<link expr:href='data:blog.url' rel='canonical'/>
Thay thành
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

Với hai bước này, chúng ta đã thực hiện trang AMP chỉ xuất hiện trên URL di động m=1.Ở đây, chúng ta không cần phải thực hiện thay đổi đối với bố cục trước của mẫu blogspot vì các phần tử AMP sẽ vẫn hoạt động trên màn hình máy tính để bàn mặc dù nó không phải là trang AMP.

Những gì chúng ta cần làm là tối ưu hóa quảng cáo Adsense. Chúng ta sẽ tạo quảng cáo Adsense riêng biệt khi hiển thị trên máy tính để bàn và quảng cáo khi hiển thị trên thiết bị di động.

Đối với quảng cáo hiển thị trên máy tính để bàn ta sử dụng là mã quảng cáo Adsense thông thường với nhiều tùy chỉnh hơn, và quảng cáo AMP hiển thị sử dụng amp-ad mà không bị lỗi khi xem trên máy tính bàn.

Điều đầu tiên cần làm là tách các js quảng cáo , vui lòng tìm mã js sau.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Thay thế nó bằng đoạn mã sau
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-1234567890",
          enable_page_level_ads: true
     });
//]]>
</script>
</b:if>
Thay trị số ca-pub-1234567890 theo tài khoản của bạn.

Sau đó, thay đổi tất cả mã quảng cáo cài đặt trước hoặc cài mới theo code như sau.
<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- Quảng cáo trên desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890'....với các trị số có trong mã quảng cáo cụ thể style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!--Quảng cáo AMP 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>
Thay các trị số  (1234567890) là mã tài khoản và mã  slot theo trị số tài khoản ads của bạn.
Trong code phần "Quảng cáo trên desktop" bạn hoàn toàn có thể thay bằng mã ads thông thường có trong mục các đơn vị quảng cáo với các tùy chỉnh cho phép.
Chú ý
Nhớ vào kiểm tra và đảm bảo robots.txt blog của bạn không chặn m = 1 URL.
Thủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments