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 เว็บสโตร์
หลังจากติดตั้งแอป 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="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>
หน้าเว็บข้างต้นเป็นหน้าเว็บแบบง่าย ข้อเท็จจริงที่น่าสนใจที่สุดของหน้านี้คือผ่านการตรวจสอบ AMP และการตรวจสอบข้อมูลเมตาของเครื่องมือค้นหา Schema.org หากมีการนำหน้าเว็บนี้ไปใช้ในเว็บไซต์ข่าว หน้าเว็บนี้จะมีสิทธิ์รวมอยู่ในภาพหมุนการค้นหาใหม่ของ Google ที่มีไว้สำหรับเนื้อหา AMP โดยเฉพาะ จึงเป็นจุดเริ่มต้นที่ดีสำหรับการทำงานของเรา
ก่อนจะแก้ไขหน้าเว็บ ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ก่อน เมื่อทำงานบนเว็บไซต์ (โดยเฉพาะเว็บไซต์ที่เน้นอุปกรณ์เคลื่อนที่) โดยปกติแล้วการจำลองประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่เมื่อทดสอบในเบราว์เซอร์ถือเป็นแนวทางที่ดี เริ่มต้นโดยเปิดคอนโซลสำหรับนักพัฒนาแอปใน Chrome ผ่าน Menu > More Tools > Developer Tools ดังนี้
ตอนนี้ให้ตรวจสอบเอาต์พุต JavaScript ในคอนโซลของนักพัฒนาซอฟต์แวร์ ตรวจสอบว่าคุณได้เลือกแท็บคอนโซลแล้ว
ตอนนี้ให้คลิกปุ่มการจำลองอุปกรณ์ในคอนโซลของนักพัฒนาแอป โดยแสดงเป็นโทรศัพท์และแท็บเล็ตที่วางอยู่ข้างกัน
ในเมนูที่ปรากฏขึ้น ให้ตั้งค่าอุปกรณ์เป็น "Nexus 5X" ดังนี้
ตอนนี้เราก็เริ่มทำงานในหน้าเว็บได้แล้ว มาลองเพิ่มโฆษณาลงในบทความ AMP กัน
โฆษณาทั้งหมดใน AMP สร้างขึ้นโดยใช้คอมโพเนนต์ amp-ad การใช้คอมโพเนนต์นี้ช่วยให้เรากำหนดค่าโฆษณาได้หลายวิธี เช่น ความกว้าง ความสูง และโหมดเลย์เอาต์ อย่างไรก็ตาม แพลตฟอร์มโฆษณาหลายแห่งจะกำหนดให้มีการกำหนดค่าเพิ่มเติม เช่น รหัสบัญชีสำหรับเครือข่ายโฆษณา โฆษณาที่ควรแสดง หรือตัวเลือกสำหรับการกำหนดเป้าหมายโฆษณา สำหรับ amp-ad เราเพียงแค่กรอกตัวเลือกต่างๆ ที่จำเป็นเป็นแอตทริบิวต์ HTML
ดูตัวอย่างโฆษณา Double Click นี้
<amp-ad
width="300"
height="250"
type="doubleclick"
data-slot="/35096353/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-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
ลองเพิ่มตัวอย่างทั้ง 2 รายการข้างต้นลงในบทความของคุณหลังจากแท็ก <header> รีเฟรชหน้าเว็บ แล้วคุณจะเห็นโฆษณาทดสอบ 2 รายการปรากฏขึ้น
มาดูตัวเลือกเพิ่มเติมบางอย่างที่ใช้กับ DoubleClick ได้กัน ลองเพิ่มการกำหนดค่าโฆษณาตามพื้นที่ทางภูมิศาสตร์ 2 รายการนี้ลงในหน้าเว็บ
<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>
ขออภัยที่ควบคุมการกำหนดเป้าหมายตามภูมิศาสตร์จากโค้ดของหน้าเว็บเองไม่ได้ อย่างไรก็ตาม เราได้กำหนดค่าโฆษณาทดสอบเหล่านี้ในแดชบอร์ด DoubleClick ให้แสดงเฉพาะในบางประเทศแล้ว ซึ่งก็คือสหราชอาณาจักรและสหรัฐอเมริกา
รีเฟรชหน้าเว็บแล้วดู ภาพหน้าจอต่อไปนี้ถ่ายจากออสเตรเลีย ดังนั้นโฆษณาทั้ง 2 รายการจึงไม่โหลด
ตัวอย่างการกำหนดเป้าหมายตามภูมิศาสตร์ข้างต้นแสดงให้เห็นว่า amp-ad มีความยืดหยุ่นมากพอสำหรับฟีเจอร์แพลตฟอร์มโฆษณาทุกประเภท
ปัจจุบันเครือข่ายโฆษณาที่รองรับมีดังนี้
- A9
- Adblade
- Adform
- AdReactor
- AdSense
- AdTech
- Criteo
- Dot and Media
- Doubleclick
- Flite
- Industrybrains
- OpenX
- plista
- Smart AdServer
- Yieldmo
- Revcontent
- TripleLift
- Teads
- I-Mobile
- Webediads
อย่าลืมไปที่หน้าเอกสารประกอบสำหรับคอมโพเนนต์โฆษณา AMP เพื่อดูข้อมูลเกี่ยวกับแพลตฟอร์มโฆษณาล่าสุดที่รองรับ
ในบทถัดไป เราจะมาดูคอมโพเนนต์ AMP ขั้นสูงเพิ่มเติมและวิธีรวมคอมโพเนนต์เหล่านั้นไว้ในเอกสาร AMP
6. ขยายเนื้อหาด้วยคอมโพเนนต์เพิ่มเติม
ตอนนี้คุณมีเอกสาร AMP พื้นฐานที่มีข้อความ รูปภาพ และแม้แต่โฆษณาที่ฝังอยู่ในหน้า ซึ่งเป็นส่วนประกอบสำคัญทั้งหมดในการเล่าเรื่องและสร้างรายได้จากเนื้อหา อย่างไรก็ตาม เว็บไซต์สมัยใหม่มักมีฟังก์ชันการทำงานมากกว่าแค่รูปภาพและข้อความ
ดังนั้น มายกระดับเอกสาร AMP ของเราขึ้นไปอีกขั้นและสำรวจคอมโพเนนต์ที่มีให้ใช้งานนอกเหนือจากคอมโพเนนต์หลักที่กล่าวถึงก่อนหน้านี้กัน
ในบทนี้ เราจะลองเพิ่มฟังก์ชันการทำงานบนเว็บขั้นสูงเพิ่มเติมซึ่งมักพบในบทความข่าว
- วิดีโอ YouTube
- ทวีต
- คำพูดในบทความ
ฝังวิดีโอ YouTube
มาลองฝังวิดีโอ YouTube ลงในเอกสารกัน โค้ดต่อไปนี้จะฝังวิดีโอและเพิ่มลงในหน้าเว็บ
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480"
height="270">
<div fallback>
<p>The video could 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
เราได้ระบุความกว้างและความสูงของวิดีโออีกครั้งเพื่อให้ระบบเลย์เอาต์ 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"
data-tweetid="638793490521001985">
</amp-twitter>
data-tweetid เป็นอีกตัวอย่างหนึ่งของแอตทริบิวต์ที่กำหนดเองซึ่งผู้ให้บริการแพลตฟอร์มบางรายกำหนดให้ต้องระบุ ในกรณีนี้ Twitter จะรับรู้แอตทริบิวต์ data-tweetid ว่าสอดคล้องกับทวีตหนึ่งๆ ที่จะฝังในหน้าเว็บ
รีเฟรชเบราว์เซอร์และดูหน้าเว็บ คุณควรเห็นทวีตปรากฏขึ้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ Twitter
ไฮไลต์คำพูดในบทความ
องค์ประกอบทั่วไปในบทความข่าวคือการไฮไลต์ตัวอย่างข้อความที่น่าสนใจเป็นพิเศษจากบทความ เช่น คำพูดจากแหล่งที่มาหนึ่งๆ หรือข้อเท็จจริงที่สำคัญอาจซ้ำในแบบอักษรที่ใหญ่ขึ้นเพื่อดึงดูดความสนใจจากผู้อ่าน
อย่างไรก็ตาม เนื่องจากคำพูดหรือข้อความบางส่วนไม่ได้มีความยาวของอักขระสตริงเท่ากันเสมอไป จึงอาจเป็นการยากที่จะปรับขนาดแบบอักษรให้ใหญ่ขึ้นโดยให้สมดุลกับพื้นที่ที่ข้อความนั้นๆ จะใช้ในหน้าเว็บ
AMP มีคอมโพเนนต์อีกตัวหนึ่งที่สร้างขึ้นมาสำหรับสถานการณ์ประเภทนี้โดยเฉพาะ ซึ่งเรียกว่า amp-fit-text ซึ่งช่วยให้คุณกำหนดองค์ประกอบที่มีความกว้างและความสูงคงที่ รวมถึงขนาดแบบอักษรสูงสุดได้ คอมโพเนนต์จะปรับขนาดแบบอักษรอย่างชาญฉลาดเพื่อให้พอดีกับข้อความของคำพูดภายในความกว้างและความสูงที่มี
มาลองใช้งานกัน ก่อนอื่น ให้เพิ่มไลบรารีของคอมโพเนนต์ลงในแท็ก <head> ดังนี้
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
เพิ่มข้อมูลต่อไปนี้ลงในหน้าเว็บ
<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
Big, bold article quote goes here.
</amp-fit-text>
รีเฟรชหน้าเว็บแล้วดูผลลัพธ์
ตอนนี้ก็ทดลองต่อไป จะเกิดอะไรขึ้นหากคำพูดนั้นสั้นกว่ามาก
<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
#YOLO
</amp-fit-text>
หรือจะใช้คำพูดที่ยาวกว่านี้
<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>
ในการทดสอบครั้งสุดท้ายกับ 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-carousel-0.1.js"></script>
จากนั้นเราจะฝังภาพสไลด์แบบง่ายๆ ที่มีเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ รวมถึงความกว้างและความสูงที่กำหนดไว้ล่วงหน้า เพิ่มข้อมูลต่อไปนี้ลงในหน้าเว็บ
<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>
รีเฟรชหน้าเว็บ แล้วคุณจะเห็นภาพสไลด์ในหน้าเว็บ
คุณกำหนดค่าคอมโพเนนต์ภาพสไลด์ได้หลายวิธี ลองเปลี่ยนประเภทเป็น slides แทน แล้วดูผลลัพธ์ อย่าลืมเปลี่ยนแอตทริบิวต์ layout ของ amp-carousel และรูปภาพภายในให้เป็น responsive ด้วย
ตอนนี้คุณจะเห็นองค์ประกอบทีละรายการแทนที่จะเป็นรายการองค์ประกอบที่เลื่อนได้ ลองปัดในแนวนอนเพื่อเลื่อนดูองค์ประกอบต่างๆ หากปัดไปที่องค์ประกอบที่ 3 คุณจะปัดต่อไม่ได้
จากนั้นเพิ่มแอตทริบิวต์ loop รีเฟรชหน้าเว็บแล้วลองปัดไปทางซ้ายทันที ภาพสไลด์จะวนซ้ำไม่มีสิ้นสุด
สุดท้ายนี้ มาตั้งค่าให้ภาพสไลด์นี้เล่นอัตโนมัติทุกๆ 2 วินาทีกัน เพิ่มแอตทริบิวต์ autoplay ลงในหน้าเว็บและแอตทริบิวต์การหน่วงเวลาที่มีค่าเป็น 2000 ดังนี้ delay="2000"
ผลลัพธ์สุดท้ายควรมีลักษณะดังนี้
<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>
รีเฟรชหน้าเว็บแล้วลองใช้เลย
ภาพสไลด์เป็นเครื่องมือที่ยอดเยี่ยม แต่จะเกิดอะไรขึ้นหากเราต้องการให้เนื้อหาที่ซับซ้อนกว่าปรากฏในภาพสไลด์ มาลองผสมผสานกันหน่อยโดยวางโฆษณา ข้อความ และรูปภาพไว้ด้วยกันในภาพสไลด์เดียว แอมป์แคโรเซลจัดการกับเนื้อหาที่หลากหลายเช่นนี้ได้พร้อมกันจริงหรือ แน่นอน
ก่อนอื่น ให้เพิ่มรูปแบบนี้ลงในหน้าเพื่อให้คอมโพเนนต์ amp-fit-text และ amp-carousel ทำงานร่วมกันได้อย่างปลอดภัย
amp-fit-text {
white-space: normal;
}
ตอนนี้ลองวางโค้ดภาพหมุนต่อไปนี้ลงในหน้าเว็บ
<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>
รีเฟรชหน้าเว็บ แล้วคุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้
ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์ภาพหมุน
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-analytics-0.1.js"></script>
จากนั้นเราจะรวมคอมโพเนนต์ดังนี้
<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>
แม้จะดูซับซ้อนกว่า แต่จริงๆ แล้วเป็นรูปแบบที่ยืดหยุ่นมากในการอธิบายเหตุการณ์ประเภทต่างๆ นอกจากนี้ รูปแบบ JSON ยังไม่มี Blob ของโค้ด JavaScript ในตัวอย่างแบบเดิม ซึ่งอาจทำให้เกิดข้อผิดพลาดได้หากมีการเปลี่ยนแปลงโดยไม่ตั้งใจ
ในรูปแบบ JSON คีย์ทริกเกอร์จะมีชุดคีย์ที่แสดงถึงทริกเกอร์เหตุการณ์ทั้งหมดที่เราจะติดตาม คีย์ของทริกเกอร์เหล่านั้นคือคำอธิบายของเหตุการณ์ เช่น "การดูหน้าเว็บเริ่มต้น" ในตัวอย่างด้านบน ค่าคีย์ชื่อจะเกี่ยวข้องกับชื่อของหน้าที่กำลังดู
เมื่อขยายตัวอย่างข้างต้น เราจะเพิ่มทริกเกอร์อีกรายการได้คือ "คลิกที่ #header trigger"
<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>
ทริกเกอร์นี้ทํางานตรงตามชื่อของมัน โดยการใช้ตัวเลือก DOM "#header" เราสามารถค้นหาแท็กที่มีรหัส "header" และเมื่อเกิดเหตุการณ์ "clicked" หรือแตะบนอุปกรณ์ เราจะส่งการกระทําของเหตุการณ์ "clicked-header" ไปยังแพลตฟอร์มการวิเคราะห์พร้อมป้ายกํากับหมวดหมู่ "examples"
หากมีแพลตฟอร์มการติดตามที่กำหนดเองซึ่งต้องการผสานรวม คุณยังคงใช้ amp-analytics และกำหนดปลายทาง URL ที่ปรับเปลี่ยนในแบบของคุณเองสำหรับข้อมูลการติดตามได้ อ่านเพิ่มเติมเกี่ยวกับคอมโพเนนต์ amp-analytics ได้ที่นี่
9. การไปยังส่วนต่างๆ ของเว็บไซต์
ข้อกำหนดทั่วไปของเว็บไซต์บนอุปกรณ์เคลื่อนที่คือการรวมเมนูการนำทางของเว็บไซต์ เมนูเหล่านี้อาจมีได้หลายรูปแบบ ตัวอย่างวิธีแสดงการนำทางในเอกสาร AMP มีดังนี้
- ลิงก์กลับไปที่หน้าแรก ซึ่งเป็นตัวเลือกที่ง่ายที่สุด
- เมนูส่วนหัวย่อยผ่านคอมโพเนนต์ภาพหมุน
ลิงก์หน้าแรก
วิธีที่ง่ายที่สุดในการทำให้ผู้ใช้เข้าถึงตัวเลือกการนำทางปกติของเว็บไซต์คือการนำผู้ใช้กลับไปยังอินเทอร์เฟซเว็บไซต์ปกติ
ลองเพิ่มลิงก์ HTML นี้ลงในแท็ก <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>
และเพิ่มกฎนี้ลงใน CSS แบบอินไลน์
.home-button {
float: left;
}
ตอนนี้ให้รีเฟรชหน้าเว็บ คุณจะเห็นลิงก์ที่มุมซ้ายบนของหน้าซึ่งชี้ไปที่ homepage.html - หากคลิกลิงก์นี้ คุณจะพบว่าลิงก์ไม่ได้นำไปที่ใด
คุณสามารถแทนที่ลิงก์นี้ด้วย URL ของหน้าแรกของเว็บไซต์เพื่อให้ผู้ใช้ไปยังส่วนอื่นๆ ของเว็บไซต์ผ่านการนำทางของเว็บไซต์ปกติได้
ดังที่กล่าวไว้ วิธีนี้เป็นแนวทางที่ง่ายที่สุดที่มีอยู่ ซึ่งก็คือการใช้ประโยชน์จากการนำทางของเว็บไซต์ที่มีอยู่ จากนั้นเราจะดูทางเลือก 2 ทาง
เมนูส่วนหัวย่อย
อีกวิธีหนึ่งในการแก้ปัญหานี้คือการแสดงเมนูการนำทางของเว็บไซต์ภายในเอกสาร AMP หากต้องการจำกัดไว้ในส่วนเล็กๆ ของหน้าเว็บ เราสามารถใช้ภาพสไลด์เพื่อแสดงเมนูที่เลื่อนได้ใต้ส่วนหัวของเว็บไซต์
เนื่องจากเราต้องการคอมโพเนนต์ภาพสไลด์ โปรดเพิ่ม JavaScript ของคอมโพเนนต์ลงในแท็ก <head> ของหน้าเว็บ
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
ลองเพิ่มข้อมูลโค้ด HTML นี้ไว้ใต้แท็ก <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>
...
และเพิ่มกฎต่อไปนี้ลงใน CSS แบบอินไลน์
.sub-menu {
background: black;
}
.sub-menu a {
display: block;
background: tomato;
margin: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
ตอนนี้ให้รีเฟรชหน้าเว็บ คุณควรเห็นเมนูลิงก์ปรากฏใต้ชื่อบทความ คุณสามารถเลื่อนเมนูนี้ในแนวนอนเพื่อจัดเก็บลิงก์การนำทางจำนวนมาก
การไปยังส่วนต่างๆ ในเมนูย่อยนี้เป็นวิธีที่ยอดเยี่ยมในการจัดเก็บลิงก์จำนวนมากโดยไม่ใช้พื้นที่มากเกินไปในหน้า
10. การเพิ่มแบบอักษร
ตามที่ได้พูดคุยกันก่อนหน้านี้ ระบบไม่อนุญาตคำขอสไตล์ชีตภายนอกในเอกสาร AMP อย่างไรก็ตาม มีข้อยกเว้นหนึ่งข้อสำหรับกฎนี้ นั่นคือแบบอักษร
แบบอักษรเป็นส่วนสำคัญของประสบการณ์การอ่านบทความสำหรับผู้ใช้เว็บ และเนื่องจากเว็บเบราว์เซอร์จะดึงข้อมูลไฟล์แบบอักษรผ่านคำขอสไตล์ชีตภายนอก จึงจำเป็นต้องมีการยกเว้นนี้ใน AMP
มาลองเพิ่มการอ้างอิงแบบอักษร Raleway ลงในเอกสารกัน
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.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 ทั้งหมดที่พร้อมใช้งาน
ต่อไปนี้คือหัวข้อและลิงก์เพิ่มเติมบางส่วนที่คุณอาจต้องการสำรวจเพื่อเพิ่มพูนทักษะให้มากยิ่งขึ้น
- AMP By Example - แคตตาล็อกตัวอย่างที่ครอบคลุมสำหรับคอมโพเนนต์ AMP และรูปแบบคอมโพเนนต์
- ตัวอย่างโฆษณา DoubleClick - แคตตาล็อกตัวอย่าง amp-ad ที่ครอบคลุม
- ทุกเรื่องเกี่ยวกับการค้นพบเพจ
- แท็ก HTML ที่ไม่อนุญาต
- กฎและภาพเคลื่อนไหว CSS ที่ถูกจำกัด
- ข้อมูลเพิ่มเติมเกี่ยวกับ iframe
- AMP CDN
- รายการคอมโพเนนต์ AMP ที่ใช้ได้