Khái niệm nâng cao về Accelerated Mobile Pages

1. Tổng quan

Lớp học lập trình này là phần tiếp nối các khái niệm được giới thiệu trong Accelerated Mobile Pages Foundations. Bạn nên hoàn thành lớp học lập trình trước khi bắt đầu lớp học lập trình này hoặc ít nhất là đã hiểu rõ các khái niệm cốt lõi của AMP.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách AMP xử lý quảng cáo, phân tích, nhúng video, tích hợp mạng xã hội, băng chuyền hình ảnh và nhiều nội dung khác. Để đạt được điều này, bạn sẽ xây dựng dựa trên ví dụ trong lớp học lập trình Kiến thức cơ bản bằng cách thêm các tính năng này thông qua nhiều thành phần AMP.

Kiến thức bạn sẽ học được

• Quảng cáo hiển thị bằng amp-ad.
• Nhúng video trên YouTube, thẻ Twitter và các phần tử văn bản thích ứng.
• Tạo băng chuyền bằng hình ảnh và các tổ hợp nội dung bằng amp-carousel.
• Các mẫu theo dõi đơn giản bằng amp-analytics.
• Các cách thêm thành phần điều hướng trang web vào trang.
• Cách phông chữ hoạt động với AMP.

Bạn cần có

• Mã mẫu
• Chrome (hoặc một trình duyệt tương đương có thể kiểm tra bảng điều khiển JavaScript)
• Python (tốt nhất là 2.7) hoặc tiện ích Chrome 200 OK Web Server
• Trình soạn thảo mã (ví dụ: Atom, Sublime, Notepad++)

2. Nhận mã mẫu

Bạn có thể tải tất cả mã mẫu xuống máy tính:

Tải tệp Zip xuống

...hoặc sao chép kho lưu trữ GitHub từ dòng lệnh:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Bạn sẽ tải một tệp ZIP chứa một số tệp tài nguyên mẫu và trang article.html ban đầu xuống.

Giải nén thư mục rồi chuyển đến thư mục đó thông qua dòng lệnh trên máy tính.

3. Chạy trang mẫu

Để kiểm thử trang mẫu, chúng ta cần truy cập vào các tệp từ một máy chủ web. Có một số cách để tạo máy chủ web cục bộ tạm thời cho mục đích kiểm thử. Trong lớp học lập trình này, chúng tôi sẽ cung cấp hướng dẫn cho 3 lựa chọn có sẵn:

• Ứng dụng "Web Server for Chrome" của Google Chrome – Đây là phương pháp được đề xuất vì đây là giải pháp đơn giản nhất và có thể dùng trên nhiều nền tảng. Lưu ý: phương pháp này yêu cầu bạn cài đặt Google Chrome.
• Lưu trữ Firebase – Một lựa chọn thay thế nếu bạn cũng muốn khám phá nền tảng lưu trữ tài sản tĩnh mới của chúng tôi "Lưu trữ Firebase". Được bật SSL theo mặc định.
• Máy chủ HTTP Python cục bộ – Cần có quyền truy cập vào dòng lệnh.

Lưu ý: Bạn nên sử dụng HTTPS trong môi trường sản xuất. HTTPS mang lại nhiều lợi ích ngoài vấn đề bảo mật, trong đó có SEO. Bạn có thể đọc thêm về chủ đề này tại đây.

Cách 1: Web Server for Chrome

Bạn có thể tìm thấy ứng dụng "Web Server for Chrome" tại đường liên kết này trên Cửa hàng Chrome trực tuyến.

Sau khi cài đặt Ứng dụng Chrome, bạn phải trỏ ứng dụng đến một thư mục cụ thể thông qua nút "Chọn thư mục". Đối với lớp học lập trình này, bạn nên chọn thư mục nơi bạn giải nén các tệp ví dụ của lớp học lập trình.

Ngoài ra, bạn nên đánh dấu vào lựa chọn "Tự động hiện index.html" và đặt cổng thành "8000". Bạn sẽ cần khởi động lại máy chủ web để các thay đổi này có hiệu lực.

Truy cập vào URL này thông qua:

http://localhost:8000/article.amp.html

Nếu tải thành công URL ở trên, bạn có thể tiếp tục chuyển sang phần tiếp theo.

Cách 2: Lưu trữ Firebase

Nếu muốn khám phá dịch vụ lưu trữ web tĩnh mới của Firebase, bạn có thể làm theo hướng dẫn tại đây để triển khai trang web AMP của mình vào một URL Lưu trữ Firebase.

Lưu trữ Firebase là một nhà cung cấp dịch vụ lưu trữ tĩnh mà bạn có thể sử dụng để nhanh chóng triển khai và lưu trữ một trang web tĩnh cùng các thành phần của trang web đó, bao gồm cả tệp HTML, CSS và JavaScript. Người dùng được hưởng lợi từ việc giảm độ trễ vì nội dung tĩnh được lưu vào bộ nhớ đệm trong mạng phân phối nội dung (CDN) với các điểm hiện diện (PoP) trên khắp thế giới.

Cuối cùng, tính năng Lưu trữ Firebase luôn được phân phát qua SSL, vì vậy, tính năng này rất phù hợp với AMP và web nói chung. Nếu bạn chỉ quan tâm đến việc tập trung vào AMP thì chỉ cần bỏ qua lựa chọn này.

Cách 3: Máy chủ HTTP Python

Nếu không sử dụng Chrome hoặc gặp khó khăn khi cài đặt tiện ích của Chrome, bạn cũng có thể sử dụng Python từ dòng lệnh để khởi động một máy chủ web cục bộ.

Để chạy máy chủ HTTP tích hợp của Python qua dòng lệnh, chỉ cần thực thi lệnh sau:

python -m SimpleHTTPServer

Và truy cập vào URL này:

http://localhost:8000/article.amp.html

4. Tìm hiểu các thành phần AMP cốt lõi

Hệ thống thành phần của AMP cho phép chúng tôi nhanh chóng tạo các tính năng hiệu quả và thích ứng vào bài viết của mình mà không tốn nhiều công sức. Thư viện JavaScript AMP cốt lõi trong thẻ <head> bao gồm một số thành phần cốt lõi:

• amp-ad – Vùng chứa để hiển thị quảng cáo.
• amp-img – Thay thế cho thẻ img HTML.
• amp-pixel – Được dùng làm pixel theo dõi để tính số lượt xem trang.
• amp-video – Thay thế cho thẻ video HTML5.

Bạn có thể sử dụng ngay tất cả các thành phần cốt lõi nêu trên trong tài liệu AMP. Mã ví dụ của chúng ta đã sử dụng amp-img trong trang và chúng ta đã khám phá cách mã này liên quan đến hệ thống bố cục AMP trong lớp học lập trình Kiến thức cơ bản về AMP. Vì vậy, hãy khám phá amp-ad trong chương tiếp theo!

Lưu ý: Nhúng video HTML5 và pixel theo dõi là những tính năng quan trọng trong quá trình phát triển web. Nếu muốn nhúng các thành phần này, bạn có thể khám phá các trang tham chiếu tương ứng của chúng tại đây và tại đây.

5. Thêm quảng cáo

Trang article.amp.html mẫu của bạn sẽ có dạng như sau:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Ở trên là một trang đơn giản. Điểm thú vị nhất của trang này là nó vượt qua cả quy trình xác thực AMP và quy trình xác thực siêu dữ liệu của công cụ tìm kiếm Schema.org. Nếu được triển khai trên một trang web tin tức, trang này sẽ đủ điều kiện được đưa vào băng chuyền tìm kiếm mới của Google dành riêng cho nội dung tạo bằng AMP. Vì vậy, đây là điểm xuất phát tuyệt vời cho công việc của chúng ta.

Trước khi sửa đổi trang, hãy mở Công cụ cho nhà phát triển Chrome. Khi làm việc trên một trang web (đặc biệt là trang web tập trung vào thiết bị di động), bạn nên mô phỏng trải nghiệm trên thiết bị di động khi kiểm thử trong trình duyệt. Bắt đầu bằng cách mở Bảng điều khiển dành cho nhà phát triển trong Chrome thông qua Menu > More Tools > Developer Tools:

Bây giờ, hãy kiểm tra đầu ra JavaScript trong bảng điều khiển dành cho nhà phát triển. Đảm bảo bạn đã chọn thẻ Bảng điều khiển:

Bây giờ, hãy nhấp vào nút mô phỏng thiết bị trong bảng điều khiển dành cho nhà phát triển. Biểu tượng này là hình ảnh một chiếc điện thoại và máy tính bảng đặt cạnh nhau:

Trong trình đơn xuất hiện, hãy đặt thiết bị thành "Nexus 5X":

Giờ đây, chúng ta có thể bắt đầu làm việc trên chính trang đó. Hãy thử thêm một quảng cáo vào bài viết AMP của chúng ta!

Tất cả quảng cáo trong AMP đều được tạo bằng thành phần amp-ad. Khi sử dụng thành phần này, chúng ta có thể định cấu hình quảng cáo theo nhiều cách, chẳng hạn như chiều rộng, chiều cao và chế độ bố cục. Tuy nhiên, nhiều nền tảng quảng cáo sẽ yêu cầu bạn thiết lập thêm, chẳng hạn như mã tài khoản cho mạng quảng cáo, quảng cáo nào sẽ được phân phát hoặc các lựa chọn nhắm mục tiêu quảng cáo. Đối với amp-ad, chúng ta chỉ cần điền vào các lựa chọn bắt buộc dưới dạng thuộc tính HTML.

Hãy xem ví dụ này về quảng cáo Nhấp đúp:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

Như bạn có thể thấy, đây là một cấu hình rất đơn giản. Hãy lưu ý đến thuộc tính type. Thuộc tính này thông báo cho thành phần amp-ad về nền tảng quảng cáo mà bạn muốn sử dụng. Trong trường hợp này, chúng tôi muốn nền tảng của Double Click và do đó, giá trị loại là doubleclick.

Thuộc tính data-slot độc đáo hơn. Mọi thuộc tính bắt đầu bằng data- trong amp-ad đều là thuộc tính dành riêng cho nhà cung cấp. Điều này có nghĩa là không phải nhà cung cấp nào cũng bắt buộc phải có thuộc tính cụ thể này và họ cũng không nhất thiết phải phản ứng nếu bạn cung cấp thuộc tính này. Ví dụ: hãy so sánh ví dụ về Double Click ở trên với một quảng cáo thử nghiệm trên nền tảng A9:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Hãy thử thêm cả hai ví dụ trên vào bài viết của bạn ngay sau thẻ <header>. Làm mới trang và bạn sẽ thấy 2 quảng cáo thử nghiệm xuất hiện:

Lưu ý quan trọng: Bạn có thể gặp một số lỗi trong bảng điều khiển dành cho nhà phát triển, chẳng hạn như "Nội dung hỗn hợp" hoặc "XMLHttpRequest không thể tải". Vấn đề trước có thể liên quan đến quảng cáo A9 vì không phải tất cả nội dung mà quảng cáo này tải đều an toàn. Đây là một yêu cầu đáng chú ý đối với tất cả quảng cáo được phân phát trên AMP.

Hãy khám phá một số lựa chọn khác mà bạn có thể sử dụng với thao tác Nhấn đúp. Hãy thử thêm hai cấu hình quảng cáo nhắm mục tiêu theo địa lý này vào trang của bạn:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Rất tiếc, bạn không thể kiểm soát tính năng nhắm mục tiêu theo vị trí từ mã của chính trang. Tuy nhiên, những quảng cáo thử nghiệm này đã được định cấu hình trong trang tổng quan DoubleClick để chỉ xuất hiện ở một số quốc gia cụ thể, đặc biệt là Vương quốc Anh và Hợp chúng quốc Hoa Kỳ.

Làm mới trang rồi xem thử. Ảnh chụp màn hình sau đây được chụp ở Úc, nên cả hai quảng cáo đều không tải:

Ví dụ về nhắm mục tiêu theo vị trí địa lý ở trên minh hoạ cách amp-ad đủ linh hoạt cho mọi loại tính năng của nền tảng quảng cáo.

Lưu ý: Bạn có thể nhận thấy rằng bên trong các thẻ amp-ad này có thêm các thẻ div có một thuộc tính có tên là fallback. Bạn có đoán được thuộc tính dự phòng biểu thị điều gì không? Thẻ này thông báo cho hệ thống tải của AMP chỉ hiển thị nội dung của phần tử đó khi phần tử mẹ không tải thành công. Điều này có nghĩa là phần tử mẹ sẽ quay lại phần tử con – do đó có thuật ngữ "dự phòng".

Sau đây là các mạng quảng cáo hiện được hỗ trợ:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot and Media
• Doubleclick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Hãy nhớ xem trang tài liệu về thành phần Quảng cáo AMP để biết thông tin về các nền tảng quảng cáo được hỗ trợ mới nhất.

Trong chương tiếp theo, chúng ta sẽ tìm hiểu thêm về các thành phần AMP nâng cao và cách đưa các thành phần đó vào tài liệu AMP.

Lưu ý: Không có JavaScript nào do mạng quảng cáo cung cấp được phép chạy bên trong tài liệu AMP. Thay vào đó, thời gian chạy AMP sẽ tải một iframe từ một nguồn gốc khác (thông qua hộp cát iframe) dưới dạng tài liệu AMP và thực thi JS của mạng quảng cáo bên trong hộp cát iframe đó.

Lưu ý quan trọng: Thông số kỹ thuật của amp-ad có thể sẽ thay đổi đáng kể theo thời gian. Phương pháp hiện tại được thiết kế để khởi động định dạng này nhằm có thể hiển thị quảng cáo.

6. Mở rộng nội dung bằng các thành phần mở rộng

Đến đây, bạn đã có một tài liệu AMP cơ bản có văn bản, hình ảnh và thậm chí cả quảng cáo được nhúng trên trang – tất cả những thành phần chính để kể một câu chuyện và kiếm tiền từ nội dung của bạn. Tuy nhiên, các trang web hiện đại thường có nhiều chức năng hơn là chỉ có hình ảnh và văn bản.

Vì vậy, hãy nâng cấp tài liệu AMP của chúng ta lên một tầm cao mới và khám phá những thành phần có sẵn ngoài các thành phần cốt lõi đã đề cập trước đó.

Trong chương này, chúng ta sẽ thử thêm nhiều chức năng nâng cao trên web thường thấy trong các bài viết tin tức:

• Video trên YouTube
• Tweet
• Trích dẫn trong bài viết

Nhúng video trên YouTube

Hãy thử nhúng một video trên YouTube vào tài liệu. Đoạn mã sau đây sẽ nhúng một video, thêm video đó vào trang của bạn:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Làm mới trang rồi xem trang. Bạn sẽ thấy văn bản "Không tải được video này" thay vì video.

Ngay cả khi trình duyệt của bạn có thể hiển thị video trên YouTube mà không gặp vấn đề, bạn vẫn sẽ nhận được lỗi này. Tại sao? Video thực sự không tải được, mà chính thành phần đó không tải được.

Xin lưu ý rằng không phải thành phần nào cũng có trong tệp JavaScript của thư viện AMP cốt lõi. Chúng ta cần thêm một yêu cầu JavaScript khác cho thành phần YouTube. Tất cả các thành phần (ngoại trừ một nhóm thành phần cốt lõi) sẽ yêu cầu các tham chiếu JavaScript bổ sung này.

Thêm yêu cầu sau vào thẻ <head>:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Làm mới trang và bạn sẽ thấy video trên YouTube:

Một lần nữa, chúng ta đã chỉ định chiều rộng và chiều cao của video để hệ thống bố cục AMP tính toán tỷ lệ khung hình. Ngoài ra, loại bố cục đã được đặt thành thích ứng, tức là video này sẽ lấp đầy chiều rộng của phần tử mẹ.

Tìm hiểu thêm về thành phần YouTube.

Lưu ý: Ngoài thành phần YouTube, AMP còn có một thành phần video HTML5 chung có tên là amp-video và một thành phần AMP dành riêng cho Brightcove Video Cloud hoặc trình phát Perform có tên là amp-brightcove. Hãy xem " AMP By Example" để biết thêm các ví dụ về việc phát video, bao gồm cả video trên Facebook, Instagram, Vine, Twitter và Dailymotion.

Lưu ý: Thuộc tính dự phòng rất hữu ích khi cung cấp thông tin trong trường hợp một thành phần không tải được. Điều gì xảy ra nếu trình duyệt của người dùng không hỗ trợ một thành phần AMP cụ thể? Để cải thiện trải nghiệm người dùng, bạn nên thông báo cho người dùng biết lý do có thể khiến chức năng bị thiếu.

Hiển thị một bài đăng trên Twitter

Nhúng các tweet được định dạng sẵn từ Twitter là một tính năng phổ biến của các bài viết tin tức. Thành phần Twitter AMP có thể dễ dàng cung cấp chức năng này.

Bắt đầu bằng cách thêm yêu cầu JavaScript sau vào thẻ <head> của tài liệu:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Giờ đây, trong bài viết của bạn, hãy thêm mã này để nhúng chính tweet đó:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

Thuộc tính data-tweetid là một ví dụ khác về thuộc tính tuỳ chỉnh mà một nhà cung cấp nền tảng cụ thể yêu cầu. Trong trường hợp này, Twitter nhận ra thuộc tính data-tweetid tương ứng với một tweet cụ thể cần được nhúng vào trang.

Làm mới trình duyệt rồi xem trang. Bạn sẽ thấy tweet xuất hiện:

Tìm hiểu thêm về thành phần Twitter.

Lưu ý: AMP có nhiều thành phần hơn nữa để nhúng nội dung từ các mạng xã hội. Hãy xem thành phần Instagram và thành phần Vine.

Đánh dấu một câu trích dẫn trong bài viết

Một thành phần phổ biến trong các bài viết tin tức là làm nổi bật những đoạn văn bản đặc biệt hấp dẫn trong bài viết. Ví dụ: một câu trích dẫn từ một nguồn cụ thể hoặc một sự kiện quan trọng có thể được lặp lại bằng phông chữ lớn hơn để thu hút sự chú ý của người đọc.

Tuy nhiên, vì không phải tất cả các câu trích dẫn hoặc đoạn văn bản đều có độ dài chuỗi ký tự giống nhau, nên có thể khó cân bằng cỡ chữ lớn hơn với lượng không gian mà văn bản cụ thể sẽ chiếm trên trang.

AMP có một thành phần khác dành riêng cho loại tình huống này, đó là amp-fit-text. Bạn có thể xác định một phần tử có chiều rộng và chiều cao cố định cũng như kích thước phông chữ tối đa. Thành phần này tự động điều chỉnh cỡ chữ để vừa với văn bản của câu trích dẫn trong chiều rộng và chiều cao có sẵn.

Hãy thử xem sao. Trước tiên, hãy thêm thư viện của thành phần vào thẻ <head>:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Thêm nội dung sau vào trang của bạn:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Làm mới trang và xem kết quả!

Bây giờ, hãy thử nghiệm thêm. Điều gì sẽ xảy ra nếu câu trích dẫn ngắn hơn nhiều?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

Hoặc bạn muốn một câu trích dẫn dài hơn?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

Trong thử nghiệm cuối cùng với amp-fit-text, hãy thử tạo một đoạn văn bản ngắn như #YOLO với chiều cao lớn hơn nhiều – ví dụ: giá trị 400 – và duy trì giá trị thuộc tính max-font-size là 42. Trang kết quả sẽ trông như thế nào? Văn bản có được căn giữa theo chiều dọc hay chiều cao của thẻ amp-fit-text có thu nhỏ để vừa với cỡ chữ tối đa không? Hãy cố gắng trả lời câu hỏi trước khi chỉnh sửa tài liệu dựa trên những gì bạn biết về hệ thống bố cục của AMP!

7. Băng chuyền phức tạp

Một tính năng phổ biến khác trong phát triển web là băng chuyền. AMP có một thành phần chung được thiết kế để đáp ứng nhu cầu này. Hãy bắt đầu bằng một ví dụ đơn giản như một băng chuyền hình ảnh.

Hãy nhớ thêm thư viện thành phần băng chuyền bằng cách thêm yêu cầu JavaScript sau vào thẻ <head> của tài liệu:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Tiếp theo, chúng ta sẽ nhúng một băng chuyền hình ảnh đơn giản có bố cục thích ứng và chiều rộng cũng như chiều cao được xác định trước. Thêm nội dung sau vào trang của bạn:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Làm mới trang của bạn và bạn sẽ thấy một băng chuyền trên trang:

Bạn có thể định cấu hình thành phần băng chuyền theo nhiều cách. Hãy thử thay đổi kiểu thành slides và xem kết quả. Hãy nhớ thay đổi thuộc tính layout của amp-carousel và hình ảnh bên trong thành responsive.

Giờ đây, thay vì danh sách các phần tử có thể cuộn, bạn sẽ thấy từng phần tử một. Thử vuốt theo chiều ngang để di chuyển qua các phần tử. Nếu vuốt đến phần tử thứ ba, bạn sẽ không thể vuốt tiếp.

Tiếp theo, hãy thêm thuộc tính loop. Làm mới trang rồi thử vuốt sang trái ngay lập tức. Băng chuyền lặp lại vô tận.

Cuối cùng, hãy đặt băng chuyền này tự động phát sau mỗi 2 giây. Thêm thuộc tính autoplay vào trang và thuộc tính delay có giá trị là 2000 như sau: delay="2000".

Kết quả cuối cùng sẽ có dạng như sau:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Làm mới trang rồi thử xem!

Lưu ý: Có thể bạn đã nhận thấy chúng tôi đang sử dụng loại bố cục fixed-height trong băng chuyền. Đây là yêu cầu của loại carousel, trong khi loại slides yêu cầu loại bố cục responsive. Các phần tử có chiều cao cố định sẽ chiếm không gian có sẵn nhưng vẫn giữ nguyên chiều cao. Bạn phải xác định thuộc tính chiều cao, còn thuộc tính chiều rộng không được xuất hiện hoặc phải được đặt thành auto để fixed-height hoạt động.

Băng chuyền hình ảnh rất hữu ích, nhưng nếu chúng ta muốn nội dung phức tạp hơn xuất hiện trong băng chuyền thì sao? Hãy thử kết hợp một chút bằng cách đặt một quảng cáo, một số văn bản và một hình ảnh cùng nhau trong một băng chuyền. amp-carousel có thể xử lý tất cả các loại nội dung như vậy cùng một lúc không? Chắc chắn rồi.

Trước tiên, hãy thêm kiểu này vào trang để đảm bảo các thành phần amp-fit-text và amp-carousel hoạt động cùng nhau một cách an toàn:

amp-fit-text {
    white-space: normal;
}

Bây giờ, hãy thử đặt mã băng chuyền sau đây vào trang của bạn:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Làm mới trang và bạn sẽ thấy nội dung như sau:

Tìm hiểu thêm về Thành phần Băng chuyền.

Lưu ý: Trong ví dụ cuối cùng, có thể bạn đã nhận thấy thành phần amp-ad có một phần tử div con có thuộc tính placeholder. Nếu còn nhớ, bạn sẽ thấy chúng ta đã gặp phải một tình huống tương tự với amp-ad trước đó trong lớp học lập trình bằng hệ thống fallback. Sự khác biệt giữa phần giữ chỗ và phương án dự phòng là gì? Các phần tử Fallback sẽ xuất hiện khi phần tử mẹ không tải được, tức là nếu không có quảng cáo. Trong khi đó, các phần tử placeholder sẽ xuất hiện thay cho phần tử mẹ trong khi phần tử mẹ đang tải. Theo một nghĩa nào đó, mỗi thuộc tính sẽ đánh dấu điểm bắt đầu và điểm kết thúc của quy trình tải phần tử mẹ.

Lưu ý quan trọng: Rất tiếc, thành phần amp-ad sử dụng một iframe ở chế độ nền, điều này có thể gây trở ngại cho cử chỉ vuốt của chính băng chuyền. Chúng tôi đã biết vấn đề này và đang tìm hiểu nguyên nhân.

8. Theo dõi bằng amp-analytics

Các nền tảng Analytics thường được tích hợp vào trang web thông qua các đoạn mã JavaScript nội tuyến và lệnh gọi hàm kích hoạt các sự kiện được gửi lại cho hệ thống Analytics. AMP cung cấp một cú pháp cấu hình JSON linh hoạt để sao chép quy trình này cho một số đối tác phân tích.

Sau đây là ví dụ về tính năng theo dõi Google Analytics truyền thống dựa trên JavaScript mà chúng ta sẽ viết lại ở định dạng JSON của amp-analytic. Trước tiên, hãy xem phương pháp JavaScript truyền thống:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Đoạn mã trên khá đơn giản, nó gửi một thông báo để theo dõi sự kiện lượt xem trang.

Để sao chép tất cả những điều trên trong thành phần amp-analytics, trước tiên, chúng ta sẽ đưa thư viện thành phần vào <head> của tài liệu:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Sau đó, chúng ta sẽ thêm thành phần như sau:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Có vẻ như định dạng này phức tạp hơn nhưng thực tế đây là một định dạng rất linh hoạt để mô tả nhiều loại sự kiện. Ngoài ra, định dạng JSON không bao gồm blob mã JavaScript trong ví dụ truyền thống. Điều này có thể dẫn đến sai sót nếu vô tình bị thay đổi.

Ở định dạng JSON, khoá triggers bao gồm một tập hợp các khoá đại diện cho tất cả trình kích hoạt sự kiện mà chúng ta sẽ theo dõi, các khoá của những trình kích hoạt đó là nội dung mô tả về sự kiện, ví dụ: "default pageview" (lượt xem trang mặc định) ở trên. Giá trị khoá tiêu đề liên quan đến tên của trang đang được xem.

Mở rộng ví dụ trên, chúng ta có thể thêm một điều kiện kích hoạt khác là "nhấp vào điều kiện kích hoạt #header":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Điều kiện kích hoạt này đúng như tên gọi của nó. Bằng cách sử dụng bộ chọn DOM "#header", chúng ta có thể truy vấn một thẻ có mã nhận dạng "header" và khi sự kiện đó là "clicked" hoặc được nhấn trên thiết bị, chúng ta sẽ gửi một thao tác sự kiện "clicked-header" đến nền tảng phân tích với nhãn danh mục "examples".

Nếu có một nền tảng theo dõi tuỳ chỉnh mà bạn muốn tích hợp, bạn vẫn có thể sử dụng amp-analytics và xác định các điểm cuối URL được cá nhân hoá của riêng mình cho thông tin theo dõi. Hãy đọc thêm về thành phần amp-analytics tại đây!

Lưu ý: Trong tất cả các ví dụ về số liệu phân tích này, bạn phải thay thế "UA-YYYY-Y" bằng mã theo dõi Google Analytics của trang web của riêng bạn.

Lưu ý: Nếu quan tâm đến các hệ thống theo dõi đơn giản hơn, bạn có thể xem xét amp-pixel. Nếu chỉ cần theo dõi lượt xem trang, thì đây là một giải pháp có trọng lượng nhẹ hơn so với amp-analytics vì giải pháp này chỉ nhằm mục đích giải quyết các yêu cầu của tính năng theo dõi pixel truyền thống. Tìm hiểu thêm về vấn đề này tại đây!

Lưu ý quan trọng: Thành phần số liệu phân tích vẫn đang trong quá trình hoàn thiện. Khi thành phần amp-analytics phát triển, sẽ có nhiều nền tảng phân tích hơn tham gia và nhiều loại sự kiện hơn để theo dõi. Để biết thông tin mới nhất, hãy đọc tài liệu tham khảo.

9. Di chuyển trên trang web của bạn

Một yêu cầu thường gặp đối với trang web dành cho thiết bị di động là phải có trình đơn điều hướng trang web. Các trình đơn này có thể có nhiều hình thức khác nhau. Sau đây là một số ví dụ về cách trình bày thành phần điều hướng trên tài liệu AMP:

1. Liên kết trở lại trang chủ của bạn – lựa chọn đơn giản nhất.
2. Trình đơn tiêu đề phụ thông qua thành phần băng chuyền.

Đường liên kết đến trang chủ

Cách đơn giản nhất để người dùng truy cập vào các lựa chọn điều hướng thông thường trên trang web của bạn là chỉ cần chuyển hướng họ trở lại giao diện trang web thông thường!

Hãy thử thêm đường liên kết HTML này vào thẻ <header>:

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

Và thêm quy tắc này vào CSS nội tuyến:

.home-button {
  float: left;
}

Bây giờ, hãy làm mới trang. Bạn sẽ thấy một đường liên kết ở góc trên cùng bên trái của trang trỏ đến homepage.html. Nếu nhấp vào đường liên kết này, bạn sẽ nhanh chóng nhận ra rằng đường liên kết này không dẫn đến đâu cả.

Bạn có thể thay thế đường liên kết này bằng URL của trang chủ trang web để cho phép người dùng chuyển đến các phần khác trên trang web thông qua chế độ điều hướng thông thường của trang web.

Như đã đề cập, đây là phương pháp đơn giản nhất hiện có – tận dụng hệ thống điều hướng hiện có trên trang web của bạn. Tiếp theo, chúng ta sẽ tìm hiểu 2 phương án thay thế.

Trình đơn tiêu đề phụ

Một cách tiếp cận khác đối với vấn đề này là trình bày trình đơn điều hướng của trang web trong tài liệu AMP. Để giới hạn trong một phần nhỏ của trang, chúng ta có thể sử dụng băng chuyền để trình bày một trình đơn có thể cuộn bên dưới tiêu đề của trang web.

Vì chúng ta cần thành phần băng chuyền, hãy nhớ thêm JavaScript của thành phần này vào thẻ <head> của trang:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Hãy thử thêm đoạn mã HTML này ngay bên dưới thẻ <header>:

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

Sau đó, thêm các quy tắc này vào CSS nội tuyến:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

Bây giờ, hãy làm mới trang. Bạn sẽ thấy một trình đơn gồm các đường liên kết xuất hiện bên dưới tiêu đề bài viết. Bạn có thể cuộn ngang trình đơn này để lưu trữ nhiều đường liên kết điều hướng.

Trình đơn con này là một cách hiệu quả để lưu trữ nhiều đường liên kết mà không chiếm quá nhiều không gian trên trang của bạn.

10. Thêm phông chữ

Như đã thảo luận trước đó, không có yêu cầu nào về biểu định kiểu bên ngoài được phép trong tài liệu AMP. Tuy nhiên, có một trường hợp ngoại lệ đối với quy tắc này: phông chữ.

Phông chữ là một phần quan trọng trong trải nghiệm đọc bài viết của người dùng web và vì trình duyệt web tìm nạp các tệp phông chữ thông qua các yêu cầu biểu định kiểu bên ngoài, nên việc loại trừ này là cần thiết trong AMP.

Hãy thử thêm một tham chiếu đến phông chữ Raleway vào tài liệu:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

Bây giờ, hãy cập nhật CSS để thêm một tham chiếu đến Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Làm mới trang của bạn và xem giao diện mới của trang. Ngoài ra, hãy kiểm tra đầu ra của trình xác thực và bạn sẽ nhận thấy rằng không có vấn đề gì liên quan đến yêu cầu bên ngoài này.

Lưu ý: Bạn không cần thêm bất kỳ thành phần nào khác để đưa một phông chữ vào tài liệu. Tuy nhiên, thực tế là có một thành phần tên là amp-font. Thực tế, bạn không dùng sự kiện này để tải phông chữ trên web. Thay vào đó, bạn có thể dùng sự kiện này để phát hiện xem phông chữ trên web đã tải thành công hay chưa và phản hồi một cách thích hợp nếu cần.

Bạn có thể dùng tính năng này để ẩn văn bản cho đến khi phông chữ được tải đầy đủ, nhờ đó người dùng sẽ không thấy văn bản chuyển từ phông chữ tạm thời sang phông chữ thực. Trong trường hợp phông chữ không tải được, bạn có thể chỉ cần hiển thị phông chữ tạm thời. Sau tất cả, trường hợp xấu nhất sẽ là nếu người dùng không đọc được văn bản nào! Đọc thêm về amp-font tại đây.

11. Xin chúc mừng!

Bạn đã hoàn thành lớp học lập trình AMP nâng cao và khám phá thành công nhiều thành phần chính của AMP!

Hy vọng bạn đã hiểu rõ cách sử dụng amp-ad và amp-analytics để hỗ trợ mọi loại nền tảng quảng cáo và nhà cung cấp dịch vụ phân tích. Hãy nhớ khám phá danh sách đầy đủ các thành phần AMP hiện có.

Sau đây là một số chủ đề và đường liên kết khác mà bạn có thể muốn khám phá để nâng cao kỹ năng của mình hơn nữa!

• AMP By Example – Danh mục ví dụ phong phú về các thành phần AMP và mẫu thành phần.
• Ví dụ về quảng cáo DoubleClick – Danh mục phong phú về các ví dụ về quảng cáo AMP.
• Tất cả thông tin về tính năng Khám phá trang
• Thẻ HTML không được phép
• Quy tắc và ảnh động CSS bị hạn chế
• Thông tin khác về iFrame
• CDN của AMP
• Danh sách các thành phần AMP hiện có