แนวคิดขั้นสูงของ Accelerated Mobile Pages

1. ภาพรวม

Codelab นี้เป็นการต่อยอดแนวคิดที่แนะนำในพื้นฐานของ Accelerated Mobile Pages คุณควรทําโค้ดแล็บก่อนหน้าให้เสร็จก่อนที่จะเริ่มโค้ดแล็บนี้ หรืออย่างน้อยก็ควรมีความเข้าใจพื้นฐานเกี่ยวกับแนวคิดหลักของ AMP อยู่แล้ว

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีที่ AMP จัดการการโฆษณา ข้อมูลวิเคราะห์ การฝังวิดีโอ การผสานรวมโซเชียลมีเดีย ภาพหมุน และอื่นๆ หากต้องการดำเนินการนี้ คุณจะต้องสร้างตัวอย่างจาก Codelab พื้นฐานโดยการเพิ่มฟีเจอร์เหล่านี้ผ่านคอมโพเนนต์ AMP ต่างๆ

สิ่งที่คุณจะได้เรียนรู้

  • โฆษณา Display ที่มี amp-ad
  • ฝังวิดีโอ YouTube, การ์ด Twitter และองค์ประกอบข้อความที่ปรับเปลี่ยนตามพื้นที่
  • สร้างภาพสไลด์ด้วยรูปภาพและชุดเนื้อหาโดยใช้ amp-carousel
  • รูปแบบการติดตามอย่างง่ายด้วย amp-analytics
  • วิธีเพิ่มการนำทางของเว็บไซต์ไปยังหน้าเว็บ
  • แบบอักษรทำงานร่วมกับ AMP อย่างไร

สิ่งที่คุณต้องมี

  • โค้ดตัวอย่าง
  • Chrome (หรือเบราว์เซอร์ที่เทียบเท่าซึ่งตรวจสอบคอนโซล JavaScript ได้)
  • Python (ควรเป็น 2.7) หรือส่วนขยายเว็บเซิร์ฟเวอร์ 200 OK ของ Chrome
  • โปรแกรมแก้ไขโค้ด (เช่น Atom, Sublime, Notepad++)

2. รับโค้ดตัวอย่าง

คุณสามารถดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้โดยทำดังนี้

...หรือโคลนที่เก็บ GitHub จากบรรทัดคำสั่งโดยทำดังนี้

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

คุณจะดาวน์โหลดไฟล์ ZIP ที่มีไฟล์ทรัพยากรตัวอย่างหลายไฟล์และarticle.htmlหน้าเริ่มต้น

คลายซิปโฟลเดอร์แล้วไปที่ไดเรกทอรีผ่านบรรทัดคำสั่งในคอมพิวเตอร์

3. เรียกใช้หน้าตัวอย่าง

หากต้องการทดสอบหน้าตัวอย่าง เราต้องเข้าถึงไฟล์จากเว็บเซิร์ฟเวอร์ การสร้างเว็บเซิร์ฟเวอร์ในเครื่องชั่วคราวเพื่อวัตถุประสงค์ในการทดสอบทำได้หลายวิธี สำหรับโค้ดแล็บนี้ เราจะให้วิธีการสำหรับตัวเลือกที่มีอยู่ 3 ตัวเลือก

  • แอป Google Chrome "Web Server for Chrome" - วิธีนี้เป็นวิธีที่แนะนำเนื่องจากเป็นโซลูชันที่ง่ายที่สุดและใช้ได้กับหลายแพลตฟอร์ม หมายเหตุ: วิธีนี้ต้องติดตั้ง Google Chrome
  • Firebase Hosting - ตัวเลือกอื่นหากคุณสนใจที่จะสำรวจแพลตฟอร์มการโฮสต์เนื้อหาสแตติกใหม่ของเราที่ชื่อ "Firebase Hosting" ด้วย เปิดใช้ SSL โดยค่าเริ่มต้น
  • เซิร์ฟเวอร์ HTTP Python ในเครื่อง - ต้องมีสิทธิ์เข้าถึงบรรทัดคำสั่ง

ตัวเลือกที่ 1: เว็บเซิร์ฟเวอร์สำหรับ Chrome

คุณสามารถค้นหาแอป "Web Server for Chrome" ได้ที่ลิงก์นี้ใน Chrome เว็บสโตร์

4c1bf1095afed87a.png

หลังจากติดตั้งแอป Chrome แล้ว คุณต้องชี้แอปไปยังโฟลเดอร์ที่ต้องการผ่านปุ่ม "เลือกโฟลเดอร์" สำหรับโค้ดแล็บนี้ คุณควรเลือกโฟลเดอร์ที่คลายซิปไฟล์ตัวอย่างของโค้ดแล็บ

นอกจากนี้ คุณควรเลือกตัวเลือก "แสดง index.html โดยอัตโนมัติ" และตั้งค่าพอร์ตเป็น "8000" คุณจะต้องรีสตาร์ทเว็บเซิร์ฟเวอร์เพื่อให้การเปลี่ยนแปลงเหล่านี้มีผล

เข้าถึง URL นี้ผ่านช่องทางต่อไปนี้

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

หากโหลด URL ด้านบนได้สำเร็จ ให้ไปที่ส่วนถัดไป

ตัวเลือกที่ 2: Firebase Hosting

หากสนใจสำรวจเว็บโฮสติ้งแบบคงที่ของ Firebase ใหม่ โปรดทำตามวิธีการที่นี่เพื่อติดตั้งใช้งานเว็บไซต์ AMP ไปยัง URL โฮสติ้งของ Firebase

Firebase Hosting เป็นผู้ให้บริการโฮสติ้งแบบคงที่ที่คุณใช้เพื่อติดตั้งใช้งานและโฮสต์เว็บไซต์แบบคงที่และชิ้นงานของเว็บไซต์ได้อย่างรวดเร็ว ซึ่งรวมถึงไฟล์ HTML, CSS และ JavaScript ผู้ใช้จะได้รับประโยชน์จากเวลาในการตอบสนองที่ลดลงเนื่องจากระบบจะแคชเนื้อหาแบบคงที่ในเครือข่ายนำส่งข้อมูล (CDN) ที่มีจุดเชื่อมต่ออินเทอร์เน็ต (PoP) อยู่ทั่วโลก

สุดท้ายนี้ โฮสติ้งของ Firebase จะแสดงผ่าน SSL เสมอ จึงเหมาะสำหรับ AMP และเว็บโดยทั่วไป หากคุณสนใจที่จะมุ่งเน้นเฉพาะ AMP ก็ไม่ต้องสนใจตัวเลือกนี้

ตัวเลือกที่ 3: เซิร์ฟเวอร์ HTTP Python

หากไม่ได้ใช้ Chrome หรือประสบปัญหาในการติดตั้งส่วนขยาย Chrome คุณยังใช้ Python จากบรรทัดคำสั่งเพื่อเปิดเว็บเซิร์ฟเวอร์ในเครื่องได้ด้วย

หากต้องการเรียกใช้เซิร์ฟเวอร์ HTTP ในตัวของ Python จากบรรทัดคำสั่ง ให้เรียกใช้คำสั่งต่อไปนี้

python -m SimpleHTTPServer

และเข้าถึง URL นี้

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

4. ดูข้อมูลเกี่ยวกับคอมโพเนนต์หลักของ AMP

ระบบคอมโพเนนต์ของ AMP ช่วยให้เราสร้างฟีเจอร์ที่มีประสิทธิภาพและตอบสนองได้รวดเร็วในบทความโดยใช้ความพยายามเพียงเล็กน้อย ไลบรารี JavaScript หลักของ AMP ในแท็ก <head> มีคอมโพเนนต์หลักหลายรายการ ดังนี้

  • amp-ad - คอนเทนเนอร์สำหรับแสดงโฆษณา
  • amp-img - ใช้แทนแท็ก img ใน HTML
  • amp-pixel - ใช้เป็นพิกเซลการติดตามเพื่อนับจำนวนการดูหน้าเว็บ
  • amp-video - แทนที่แท็กวิดีโอ HTML5

คุณสามารถใช้คอมโพเนนต์หลักทั้งหมดข้างต้นในเอกสาร AMP ได้ทันที โค้ดตัวอย่างของเราใช้ amp-img ในหน้าเว็บอยู่แล้ว และเราได้ศึกษาความสัมพันธ์กับระบบเลย์เอาต์ AMP ใน Codelab พื้นฐานของ AMP ดังนั้นมาดู amp-ad ในบทถัดไปกัน

5. การเพิ่มโฆษณา

article.amp.htmlหน้าตัวอย่างควรมีลักษณะดังนี้

<!doctype html>
<html ⚡ lang=&quo>t;e<n&qu>ot;
 < head
    meta charset>=&quo<t;utf-8" /
    meta name="viewport" content="width=device-wid>th,min<imum-scale=1,initial-scale=1"

    l>ink r<el="canonical" href="/article.ht>ml&quo<t;
    link rel=&<quot;s>hortcu<t icon" href=&qu>ot;amp_favicon.png"

    titleNews Article/title

    style amp-boilerplatebody{-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{visibili<ty:vis><ible}}@k><eyframes -amp-start{f>rom{visibility:hidden}to{visibility:visible}}/stylenoscriptstyle amp-boilerplatebo<dy{-we><bkit-anim>ation<:none;-moz-anima>tion: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",
       &q<uot;nam>e&q<uot;:> &q<uot;>John <Doe&qu>ot;
     },
     &quo<t;publi>sher&<quot;: >{
     <  >"@type&<quo>t;: &quo<t>;Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type&<qu>ot;: &qu<ot;ImageObject",
         "url": "https://example.co><m/amptim>es_lo<go.jpg&q>uot<;,
  > <     > "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    /script
  /head
  body
    header
      News Site
    /header
    article
      h1Article Name/h1

      pLorem 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

หน้าเว็บข้างต้นเป็นหน้าเว็บแบบง่าย ข้อเท็จจริงที่น่าสนใจที่สุดของหน้านี้คือผ่านการตรวจสอบ AMP และการตรวจสอบข้อมูลเมตาของเครื่องมือค้นหา Schema.org หากมีการนำหน้าเว็บนี้ไปใช้ในเว็บไซต์ข่าว หน้าเว็บนี้จะมีสิทธิ์รวมอยู่ในภาพหมุนการค้นหาใหม่ของ Google ที่มีไว้สำหรับเนื้อหา AMP โดยเฉพาะ จึงเป็นจุดเริ่มต้นที่ดีสำหรับการทำงานของเรา

ก่อนจะแก้ไขหน้าเว็บ ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ก่อน เมื่อทำงานบนเว็บไซต์ (โดยเฉพาะเว็บไซต์ที่เน้นอุปกรณ์เคลื่อนที่) โดยปกติแล้วการจำลองประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่เมื่อทดสอบในเบราว์เซอร์ถือเป็นแนวทางที่ดี เริ่มต้นโดยเปิดคอนโซลสำหรับนักพัฒนาแอปใน Chrome ผ่าน Menu > More Tools > Developer Tools ดังนี้

efc352f418f35761.png

ตอนนี้ให้ตรวจสอบเอาต์พุต JavaScript ในคอนโซลของนักพัฒนาซอฟต์แวร์ ตรวจสอบว่าคุณได้เลือกแท็บคอนโซลแล้ว

597d53fae21a0a60.png

ตอนนี้ให้คลิกปุ่มการจำลองอุปกรณ์ในคอนโซลของนักพัฒนาแอป โดยแสดงเป็นโทรศัพท์และแท็บเล็ตที่วางอยู่ข้างกัน

46d475a36472b495.png

ในเมนูที่ปรากฏขึ้น ให้ตั้งค่าอุปกรณ์เป็น "Nexus 5X" ดังนี้

db6dd4ac5476eed2.png

ตอนนี้เราก็เริ่มทำงานในหน้าเว็บได้แล้ว มาลองเพิ่มโฆษณาลงในบทความ AMP กัน

โฆษณาทั้งหมดใน AMP สร้างขึ้นโดยใช้คอมโพเนนต์ amp-ad การใช้คอมโพเนนต์นี้ช่วยให้เรากำหนดค่าโฆษณาได้หลายวิธี เช่น ความกว้าง ความสูง และโหมดเลย์เอาต์ อย่างไรก็ตาม แพลตฟอร์มโฆษณาหลายแห่งจะกำหนดให้มีการกำหนดค่าเพิ่มเติม เช่น รหัสบัญชีสำหรับเครือข่ายโฆษณา โฆษณาที่ควรแสดง หรือตัวเลือกสำหรับการกำหนดเป้าหมายโฆษณา สำหรับ amp-ad เราเพียงแค่กรอกตัวเลือกต่างๆ ที่จำเป็นเป็นแอตทริบิวต์ HTML

ดูตัวอย่างโฆษณา Double Click นี้

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

ดังที่คุณเห็น การกำหนดค่านี้เป็นแบบง่ายมาก โปรดทราบว่าแอตทริบิวต์ type นี้จะแจ้งให้คอมโพเนนต์ amp-ad ทราบว่าคุณต้องการใช้แพลตฟอร์มโฆษณาใด ในกรณีนี้ เราต้องการแพลตฟอร์มของ Double Click ค่าประเภทจึงเป็น doubleclick

แอตทริบิวต์ data-slot มีความเฉพาะเจาะจงมากกว่า แอตทริบิวต์ที่ขึ้นต้นด้วย data- ใน amp-ad เป็นแอตทริบิวต์เฉพาะของผู้ให้บริการ ซึ่งหมายความว่าผู้ให้บริการบางรายอาจไม่จำเป็นต้องใช้แอตทริบิวต์นี้ และอาจไม่ตอบสนองหากมีการระบุแอตทริบิวต์นี้ เช่น เปรียบเทียบตัวอย่าง Double Click ด้านบนกับโฆษณาทดสอบจากแพลตฟอร์ม A9

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

ลองเพิ่มตัวอย่างทั้ง 2 รายการข้างต้นลงในบทความของคุณหลังจากแท็ก <header> รีเฟรชหน้าเว็บ แล้วคุณจะเห็นโฆษณาทดสอบ 2 รายการปรากฏขึ้น

5dbcb01bee95147b.png

มาดูตัวเลือกเพิ่มเติมบางอย่างที่ใช้กับ DoubleClick ได้กัน ลองเพิ่มการกำหนดค่าโฆษณาตามพื้นที่ทางภูมิศาสตร์ 2 รายการนี้ลงในหน้าเว็บ

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot>=&q<uot;/3509635>3/amptesting/geo/uk"
  div fallbackNo ad appeared <beca>u<se you&>#3<9;re not browsing from the UK!/div
/amp-ad

amp-ad
  width="300"
  height="250">;
 < type=">doubleclick"
  data-slot="/35096353/amptestin<g/ge>o</us&quo>t;
  div fallbackNo ad appeared because you're not browsing from the US!/div
/amp-ad

ขออภัยที่ควบคุมการกำหนดเป้าหมายตามภูมิศาสตร์จากโค้ดของหน้าเว็บเองไม่ได้ อย่างไรก็ตาม เราได้กำหนดค่าโฆษณาทดสอบเหล่านี้ในแดชบอร์ด DoubleClick ให้แสดงเฉพาะในบางประเทศแล้ว ซึ่งก็คือสหราชอาณาจักรและสหรัฐอเมริกา

รีเฟรชหน้าเว็บแล้วดู ภาพหน้าจอต่อไปนี้ถ่ายจากออสเตรเลีย ดังนั้นโฆษณาทั้ง 2 รายการจึงไม่โหลด

c53cbc464074deab.png

ตัวอย่างการกำหนดเป้าหมายตามภูมิศาสตร์ข้างต้นแสดงให้เห็นว่า amp-ad มีความยืดหยุ่นมากพอสำหรับฟีเจอร์แพลตฟอร์มโฆษณาทุกประเภท

ปัจจุบันเครือข่ายโฆษณาที่รองรับมีดังนี้

อย่าลืมไปที่หน้าเอกสารประกอบสำหรับคอมโพเนนต์โฆษณา AMP เพื่อดูข้อมูลเกี่ยวกับแพลตฟอร์มโฆษณาล่าสุดที่รองรับ

ในบทถัดไป เราจะมาดูคอมโพเนนต์ AMP ขั้นสูงเพิ่มเติมและวิธีรวมคอมโพเนนต์เหล่านั้นไว้ในเอกสาร AMP

6. ขยายเนื้อหาด้วยคอมโพเนนต์เพิ่มเติม

ตอนนี้คุณมีเอกสาร AMP พื้นฐานที่มีข้อความ รูปภาพ และแม้แต่โฆษณาที่ฝังอยู่ในหน้า ซึ่งเป็นส่วนประกอบสำคัญทั้งหมดในการเล่าเรื่องและสร้างรายได้จากเนื้อหา อย่างไรก็ตาม เว็บไซต์สมัยใหม่มักมีฟังก์ชันการทำงานมากกว่าแค่รูปภาพและข้อความ

ดังนั้น มายกระดับเอกสาร AMP ของเราขึ้นไปอีกขั้นและสำรวจคอมโพเนนต์ที่มีให้ใช้งานนอกเหนือจากคอมโพเนนต์หลักที่กล่าวถึงก่อนหน้านี้กัน

ในบทนี้ เราจะลองเพิ่มฟังก์ชันการทำงานบนเว็บขั้นสูงเพิ่มเติมซึ่งมักพบในบทความข่าว

  • วิดีโอ YouTube
  • ทวีต
  • คำพูดในบทความ

ฝังวิดีโอ YouTube

มาลองฝังวิดีโอ YouTube ลงในเอกสารกัน โค้ดต่อไปนี้จะฝังวิดีโอและเพิ่มลงในหน้าเว็บ

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width=>&qu<ot;480">
  he<i>ght="270"
  div fall<ba>ck
<    >p<The video co>uld not be loaded./p
  /div
/amp-youtube

รีเฟรชหน้าเว็บแล้วดูที่หน้าเว็บ คุณควรเห็นข้อความ "โหลดวิดีโอไม่ได้" แทนวิดีโอ

แม้ว่าเบราว์เซอร์จะแสดงวิดีโอ YouTube ได้โดยไม่มีปัญหา แต่คุณก็จะยังได้รับข้อผิดพลาดนี้ เหตุผล วิดีโอไม่ได้โหลดไม่สำเร็จ แต่คอมโพเนนต์เองต่างหากที่ล้มเหลว

โปรดทราบว่าคอมโพเนนต์บางอย่างไม่ได้รวมอยู่ในไฟล์ JavaScript ของไลบรารี AMP หลัก เราต้องรวมคำขอ JavaScript เพิ่มเติมสำหรับคอมโพเนนต์ YouTube โดยเฉพาะ คอมโพเนนต์ทั้งหมด ยกเว้นชุดหลัก จะต้องมีการอ้างอิง JavaScript เพิ่มเติมเหล่านี้

เพิ่มคำขอต่อไปนี้ลงในแท็ก <head>

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

รีเฟรชหน้าเว็บ แล้วคุณจะเห็นวิดีโอ YouTube

be536b1d0f366e27.png

เราได้ระบุความกว้างและความสูงของวิดีโออีกครั้งเพื่อให้ระบบเลย์เอาต์ AMP คำนวณสัดส่วนภาพได้ นอกจากนี้ เรายังตั้งค่าประเภทเลย์เอาต์เป็นแบบปรับตามพื้นที่ด้วย ซึ่งหมายความว่าวิดีโอนี้จะเติมความกว้างขององค์ประกอบระดับบน

ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ YouTube

แสดงทวีต

การฝังทวีตที่จัดรูปแบบไว้ล่วงหน้าจาก Twitter เป็นฟีเจอร์ทั่วไปของบทความข่าว คอมโพเนนต์ Twitter ของ AMP ช่วยให้คุณใช้งานฟังก์ชันนี้ได้อย่างง่ายดาย

เริ่มต้นด้วยการเพิ่มคำขอ JavaScript ต่อไปนี้ลงในแท็ก <head> ของเอกสาร

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

ตอนนี้ในบทความ ให้เพิ่มโค้ดนี้เพื่อฝังทวีต

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  dat>a<-tweetid=&qu>ot;638793490521001985"
/amp-twitter

data-tweetid เป็นอีกตัวอย่างหนึ่งของแอตทริบิวต์ที่กำหนดเองซึ่งผู้ให้บริการแพลตฟอร์มบางรายกำหนดให้ต้องระบุ ในกรณีนี้ Twitter จะรับรู้แอตทริบิวต์ data-tweetid ว่าสอดคล้องกับทวีตหนึ่งๆ ที่จะฝังในหน้าเว็บ

รีเฟรชเบราว์เซอร์และดูหน้าเว็บ คุณควรเห็นทวีตปรากฏขึ้น

b0423604fdf85209.png

ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ Twitter

ไฮไลต์คำพูดในบทความ

องค์ประกอบทั่วไปในบทความข่าวคือการไฮไลต์ตัวอย่างข้อความที่น่าสนใจเป็นพิเศษจากบทความ เช่น คำพูดจากแหล่งที่มาหนึ่งๆ หรือข้อเท็จจริงที่สำคัญอาจซ้ำในแบบอักษรที่ใหญ่ขึ้นเพื่อดึงดูดความสนใจจากผู้อ่าน

อย่างไรก็ตาม เนื่องจากคำพูดหรือข้อความบางส่วนไม่ได้มีความยาวของอักขระสตริงเท่ากันเสมอไป จึงอาจเป็นการยากที่จะปรับขนาดแบบอักษรให้ใหญ่ขึ้นโดยให้สมดุลกับพื้นที่ที่ข้อความนั้นๆ จะใช้ในหน้าเว็บ

AMP มีคอมโพเนนต์อีกตัวหนึ่งที่สร้างขึ้นมาสำหรับสถานการณ์ประเภทนี้โดยเฉพาะ ซึ่งเรียกว่า amp-fit-text ซึ่งช่วยให้คุณกำหนดองค์ประกอบที่มีความกว้างและความสูงคงที่ รวมถึงขนาดแบบอักษรสูงสุดได้ คอมโพเนนต์จะปรับขนาดแบบอักษรอย่างชาญฉลาดเพื่อให้พอดีกับข้อความของคำพูดภายในความกว้างและความสูงที่มี

มาลองใช้งานกัน ก่อนอื่น ให้เพิ่มไลบรารีของคอมโพเนนต์ลงในแท็ก <head> ดังนี้

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

เพิ่มข้อมูลต่อไปนี้ลงในหน้าเว็บ

<amp-fit-text width="400" height="75" layout="respo>nsive" max-font-size="42&quo<t;
  Big, bol>d article quote goes here.
/amp-fit-text

รีเฟรชหน้าเว็บแล้วดูผลลัพธ์

ตอนนี้ก็ทดลองต่อไป จะเกิดอะไรขึ้นหากคำพูดนั้นสั้นกว่ามาก

<amp-fit-text width="400" height="75" layout="respo>nsive&quo<t; max-font-s>ize="42"
  #YOLO
/amp-fit-text

หรือจะใช้คำพูดที่ยาวกว่านี้

<amp-fit-text width="400" height="75" layout="respo>nsive" 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 fl<oating on the> floor. Shall be lifted—nevermore!
/amp-fit-text

ในการทดสอบครั้งสุดท้ายกับ amp-fit-text ให้ลองสร้างข้อความสั้นๆ เช่น #YOLO โดยมีความสูงที่มากขึ้น เช่น ค่า 400 และคงค่าแอตทริบิวต์ max-font-size ไว้ที่ 42 หน้าเว็บที่ได้จะมีลักษณะอย่างไร ข้อความอยู่ตรงกลางในแนวตั้งหรือไม่ หรือความสูงของแท็ก amp-fit-text จะย่อให้พอดีกับขนาดแบบอักษรสูงสุดหรือไม่ เมื่อทราบถึงระบบเลย์เอาต์ของ AMP แล้ว ให้ลองตอบคำถามก่อนแก้ไขเอกสาร

7. ภาพสไลด์ที่ซับซ้อน

อีกฟีเจอร์ที่พบบ่อยในการพัฒนาเว็บคือภาพสไลด์ AMP มีคอมโพเนนต์ทั่วไปที่ออกแบบมาเพื่อตอบสนองความต้องการนี้ มาเริ่มจากตัวอย่างง่ายๆ เช่น ภาพสไลด์กัน

อย่าลืมรวมไลบรารีคอมโพเนนต์ภาพสไลด์โดยเพิ่มคำขอ JavaScript ต่อไปนี้ลงในแท็ก <head> ของเอกสาร

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

จากนั้นเราจะฝังภาพสไลด์แบบง่ายๆ ที่มีเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ รวมถึงความกว้างและความสูงที่กำหนดไว้ล่วงหน้า เพิ่มข้อมูลต่อไปนี้ลงในหน้าเว็บ

<amp-carousel layout="fixed-height" height="168&qu>ot;< type="carousel" 
  amp-img src="mounta><ins-1.jp>g&q<uot; width="300" height="168"/amp-><img
  am>p-i<mg src="mountains-2.jpg" width="300&quo><t; heigh>t<="168&qu>ot;/amp-img
  amp-img src="mountains-3.jpg" width="300" height="168"/amp-img
/amp-carousel

รีเฟรชหน้าเว็บ แล้วคุณจะเห็นภาพสไลด์ในหน้าเว็บ

b55c8919ac22396f.png

คุณกำหนดค่าคอมโพเนนต์ภาพสไลด์ได้หลายวิธี ลองเปลี่ยนประเภทเป็น slides แทน แล้วดูผลลัพธ์ อย่าลืมเปลี่ยนแอตทริบิวต์ layout ของ amp-carousel และรูปภาพภายในให้เป็น responsive ด้วย

ตอนนี้คุณจะเห็นองค์ประกอบทีละรายการแทนที่จะเป็นรายการองค์ประกอบที่เลื่อนได้ ลองปัดในแนวนอนเพื่อเลื่อนดูองค์ประกอบต่างๆ หากปัดไปที่องค์ประกอบที่ 3 คุณจะปัดต่อไม่ได้

จากนั้นเพิ่มแอตทริบิวต์ loop รีเฟรชหน้าเว็บแล้วลองปัดไปทางซ้ายทันที ภาพสไลด์จะวนซ้ำไม่มีสิ้นสุด

สุดท้ายนี้ มาตั้งค่าให้ภาพสไลด์นี้เล่นอัตโนมัติทุกๆ 2 วินาทีกัน เพิ่มแอตทริบิวต์ autoplay ลงในหน้าเว็บและแอตทริบิวต์การหน่วงเวลาที่มีค่าเป็น 2000 ดังนี้ delay="2000"

ผลลัพธ์สุดท้ายควรมีลักษณะดังนี้

<amp-carousel layout="responsive" width="300" height="168" 
         type=">;sl<ides" autoplay delay="2000" loop
  amp-img src="mounta><ins-1.jp>g&q<uot; width="300" height="168" layout="responsive&><quot;/am>p-i<mg
  amp-img src="mountains-2.jpg" width="300" height=><"16>8<" layout>="responsive"/amp-img
  amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"/amp-img
/amp-carousel

รีเฟรชหน้าเว็บแล้วลองใช้เลย

ภาพสไลด์เป็นเครื่องมือที่ยอดเยี่ยม แต่จะเกิดอะไรขึ้นหากเราต้องการให้เนื้อหาที่ซับซ้อนกว่าปรากฏในภาพสไลด์ มาลองผสมผสานกันหน่อยโดยวางโฆษณา ข้อความ และรูปภาพไว้ด้วยกันในภาพสไลด์เดียว แอมป์แคโรเซลจัดการกับเนื้อหาที่หลากหลายเช่นนี้ได้พร้อมกันจริงหรือ แน่นอน

ก่อนอื่น ให้เพิ่มรูปแบบนี้ลงในหน้าเพื่อให้คอมโพเนนต์ amp-fit-text และ amp-carousel ทำงานร่วมกันได้อย่างปลอดภัย

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

ตอนนี้ลองวางโค้ดภาพหมุนต่อไปนี้ลงในหน้าเว็บ

<amp-carousel layout="fixed-height" height="250&qu>ot; t<ype="carousel" 
    amp-img src="blocky-mounta><ins-1.jp>g"<; width="300" height="250"/amp-img

    amp-ad width="300" height="250&qu>ot;
     < type="dou>bleclick"
      data-slo<t=&q>uot;/<3509635>3/ampt<esting/image/static"
        div placeholderThi>s advert is still loading./div
    /amp-ad

    <amp-fit-text >w<idth="30>0" height="250" layout="fixed"
        Big, bold article quote goes here.
    /amp-fit-text
/amp-carousel

รีเฟรชหน้าเว็บ แล้วคุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้

1c92ba4977b3c6d1.png

a1b05df74f023f25.png

ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ภาพหมุน

8. ติดตามด้วย amp-analytics

โดยทั่วไปแล้ว แพลตฟอร์ม Analytics จะผสานรวมเข้ากับเว็บไซต์ผ่านข้อมูลโค้ด JavaScript แบบอินไลน์และการเรียกฟังก์ชัน ซึ่งจะทริกเกอร์เหตุการณ์ที่ส่งกลับไปยังระบบ Analytics AMP มีไวยากรณ์การกำหนดค่า JSON ที่ยืดหยุ่นเพื่อจำลองกระบวนการนี้สำหรับพาร์ทเนอร์ด้านการวิเคราะห์หลายราย

ต่อไปนี้คือตัวอย่างการติดตาม Google Analytics ที่ขับเคลื่อนด้วย JavaScript แบบเดิม ซึ่งเราจะเขียนใหม่ในรูปแบบ JSON ของ amp-analytics ก่อนอื่นมาดูแนวทาง JavaScript แบบดั้งเดิมกัน

<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

โค้ดด้านบนค่อนข้างเรียบง่าย โดยจะส่งการแจ้งเตือนสำหรับเหตุการณ์การดูหน้าเว็บที่จะติดตาม

หากต้องการจำลองข้อมูลทั้งหมดข้างต้นในคอมโพเนนต์ amp-analytics เราต้องรวมไลบรารีคอมโพเนนต์ไว้ใน <head> ของเอกสารก่อน

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

จากนั้นเราจะรวมคอมโพเนนต์ดังนี้

<amp-analytics type="googleanaly>t<ics"
script type="ap>plication/json"
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "re<quest&q>u<ot;: "pag>eview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
/script
/amp-analytics

แม้จะดูซับซ้อนกว่า แต่จริงๆ แล้วเป็นรูปแบบที่ยืดหยุ่นมากในการอธิบายเหตุการณ์ประเภทต่างๆ นอกจากนี้ รูปแบบ JSON ยังไม่มี Blob ของโค้ด JavaScript ในตัวอย่างแบบเดิม ซึ่งอาจทำให้เกิดข้อผิดพลาดได้หากมีการเปลี่ยนแปลงโดยไม่ตั้งใจ

ในรูปแบบ JSON คีย์ทริกเกอร์จะมีชุดคีย์ที่แสดงถึงทริกเกอร์เหตุการณ์ทั้งหมดที่เราจะติดตาม คีย์ของทริกเกอร์เหล่านั้นคือคำอธิบายของเหตุการณ์ เช่น "การดูหน้าเว็บเริ่มต้น" ในตัวอย่างด้านบน ค่าคีย์ชื่อจะเกี่ยวข้องกับชื่อของหน้าที่กำลังดู

เมื่อขยายตัวอย่างข้างต้น เราจะเพิ่มทริกเกอร์อีกรายการได้คือ "คลิกที่ #header trigger"

<amp-analytics type="googleanaly>t<ics"
script type="ap>plication/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>&quot;: "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
/script
/amp-analytics

ทริกเกอร์นี้ทํางานตรงตามชื่อของมัน โดยการใช้ตัวเลือก DOM "#header" เราสามารถค้นหาแท็กที่มีรหัส "header" และเมื่อเกิดเหตุการณ์ "clicked" หรือแตะบนอุปกรณ์ เราจะส่งการกระทําของเหตุการณ์ "clicked-header" ไปยังแพลตฟอร์มการวิเคราะห์พร้อมป้ายกํากับหมวดหมู่ "examples"

หากมีแพลตฟอร์มการติดตามที่กำหนดเองซึ่งต้องการผสานรวม คุณยังคงใช้ amp-analytics และกำหนดปลายทาง URL ที่ปรับเปลี่ยนในแบบของคุณเองสำหรับข้อมูลการติดตามได้ อ่านเพิ่มเติมเกี่ยวกับคอมโพเนนต์ amp-analytics ได้ที่นี่

9. การไปยังส่วนต่างๆ ของเว็บไซต์

ข้อกำหนดทั่วไปของเว็บไซต์บนอุปกรณ์เคลื่อนที่คือการรวมเมนูการนำทางของเว็บไซต์ เมนูเหล่านี้อาจมีได้หลายรูปแบบ ตัวอย่างวิธีแสดงการนำทางในเอกสาร AMP มีดังนี้

  1. ลิงก์กลับไปที่หน้าแรก ซึ่งเป็นตัวเลือกที่ง่ายที่สุด
  2. เมนูส่วนหัวย่อยผ่านคอมโพเนนต์ภาพหมุน

ลิงก์หน้าแรก

วิธีที่ง่ายที่สุดในการทำให้ผู้ใช้เข้าถึงตัวเลือกการนำทางปกติของเว็บไซต์คือการนำผู้ใช้กลับไปยังอินเทอร์เฟซเว็บไซต์ปกติ

ลองเพิ่มลิงก์ HTML นี้ลงในแท็ก <header>

<header>
  <a href="homepage.>html&<quot;
    amp-img class="home-button" src="icons/home.pn><g" >wid<th>="36"<; heigh>t="36"/amp-img
  /a

  News Site
/header

และเพิ่มกฎนี้ลงใน CSS แบบอินไลน์

.home-button {
  float: left;
}

ตอนนี้ให้รีเฟรชหน้าเว็บ คุณจะเห็นลิงก์ที่มุมซ้ายบนของหน้าซึ่งชี้ไปที่ homepage.html - หากคลิกลิงก์นี้ คุณจะพบว่าลิงก์ไม่ได้นำไปที่ใด

c856bc8d86acb31c.png

คุณสามารถแทนที่ลิงก์นี้ด้วย URL ของหน้าแรกของเว็บไซต์เพื่อให้ผู้ใช้ไปยังส่วนอื่นๆ ของเว็บไซต์ผ่านการนำทางของเว็บไซต์ปกติได้

ดังที่กล่าวไว้ วิธีนี้เป็นแนวทางที่ง่ายที่สุดที่มีอยู่ ซึ่งก็คือการใช้ประโยชน์จากการนำทางของเว็บไซต์ที่มีอยู่ จากนั้นเราจะดูทางเลือก 2 ทาง

เมนูส่วนหัวย่อย

อีกวิธีหนึ่งในการแก้ปัญหานี้คือการแสดงเมนูการนำทางของเว็บไซต์ภายในเอกสาร AMP หากต้องการจำกัดไว้ในส่วนเล็กๆ ของหน้าเว็บ เราสามารถใช้ภาพสไลด์เพื่อแสดงเมนูที่เลื่อนได้ใต้ส่วนหัวของเว็บไซต์

เนื่องจากเราต้องการคอมโพเนนต์ภาพสไลด์ โปรดเพิ่ม JavaScript ของคอมโพเนนต์ลงในแท็ก <head> ของหน้าเว็บ

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

ลองเพิ่มข้อมูลโค้ด HTML นี้ไว้ใต้แท็ก <header>

...
</header>
<div class="sub->men<u"
  amp-carousel layout="fixed-height" height=>"<;38" type=&qu>ot;carous<el>"<;
    a href=">;#example<1&>quot;<Example 1/a
    a >href="#example2&q<uo>t;Exa<mple 2/a
    a hre>f="#<ex>ample<3"Longer Name>d Example< 3>/a
  <  a href="#ex>ample4&qu<ot>;Ex<ample 4/a
   > <a hr>e<f=">;#example5"Example 5/a
    a href="#example6"Example 6/a
  /amp-carousel
/div
article
...

และเพิ่มกฎต่อไปนี้ลงใน CSS แบบอินไลน์

.sub-menu {
  background: black;
}

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

ตอนนี้ให้รีเฟรชหน้าเว็บ คุณควรเห็นเมนูลิงก์ปรากฏใต้ชื่อบทความ คุณสามารถเลื่อนเมนูนี้ในแนวนอนเพื่อจัดเก็บลิงก์การนำทางจำนวนมาก

cc548326befbbb0e.png

การไปยังส่วนต่างๆ ในเมนูย่อยนี้เป็นวิธีที่ยอดเยี่ยมในการจัดเก็บลิงก์จำนวนมากโดยไม่ใช้พื้นที่มากเกินไปในหน้า

10. การเพิ่มแบบอักษร

ตามที่ได้พูดคุยกันก่อนหน้านี้ ระบบไม่อนุญาตคำขอสไตล์ชีตภายนอกในเอกสาร AMP อย่างไรก็ตาม มีข้อยกเว้นหนึ่งข้อสำหรับกฎนี้ นั่นคือแบบอักษร

แบบอักษรเป็นส่วนสำคัญของประสบการณ์การอ่านบทความสำหรับผู้ใช้เว็บ และเนื่องจากเว็บเบราว์เซอร์จะดึงข้อมูลไฟล์แบบอักษรผ่านคำขอสไตล์ชีตภายนอก จึงจำเป็นต้องมีการยกเว้นนี้ใน AMP

มาลองเพิ่มการอ้างอิงแบบอักษร Raleway ลงในเอกสารกัน

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

ตอนนี้ให้อัปเดต CSS เพื่อรวมการอ้างอิงถึง Raleway ดังนี้

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

รีเฟรชหน้าเว็บและดูรูปลักษณ์ใหม่ของหน้าเว็บ นอกจากนี้ ให้ตรวจสอบเอาต์พุตของเครื่องมือตรวจสอบ แล้วคุณจะเห็นว่าไม่มีการร้องเรียนเกี่ยวกับคำขอภายนอกนี้

11. ยินดีด้วย

คุณทำ Advanced AMP Codelab เสร็จแล้วและได้สำรวจคอมโพเนนต์หลักๆ ของ AMP เรียบร้อยแล้ว

เราหวังว่าคุณจะเข้าใจวิธีใช้ amp-ad และ amp-analytics เพื่อรองรับแพลตฟอร์มโฆษณาและผู้ให้บริการวิเคราะห์ต่างๆ อย่าลืมดูรายการคอมโพเนนต์ AMP ทั้งหมดที่พร้อมใช้งาน

ต่อไปนี้คือหัวข้อและลิงก์เพิ่มเติมบางส่วนที่คุณอาจต้องการสำรวจเพื่อเพิ่มพูนทักษะให้มากยิ่งขึ้น