1. סקירה כללית
ה-codelab הזה הוא המשך של המושגים שהוצגו ב-Accelerated Mobile Pages Foundations. כדאי להשלים את שיעור ה-Lab הקודם לפני שמתחילים את השיעור הזה, או לפחות להכיר את המושגים הבסיסיים של AMP.
בשיעור Codelab הזה נסביר איך AMP מטפל בפרסום, בניתוח נתונים, בהטמעת סרטונים, בשילוב עם רשתות חברתיות, בקרוסלות של תמונות ועוד. כדי לעשות את זה, תוסיפו את התכונות האלה באמצעות רכיבי AMP השונים, על סמך הדוגמה משיעור ה-codelab בנושא יסודות.
מה תלמדו
- הצגת מודעות לרשת המדיה באמצעות amp-ad.
- הטמעה של סרטונים ב-YouTube, כרטיסים בטוויטר ורכיבי טקסט רספונסיביים.
- אפשר ליצור קרוסלות עם תמונות ושילובים של תוכן באמצעות amp-carousel.
- דפוסי מעקב פשוטים באמצעות amp-analytics.
- דרכים להוספת ניווט באתר לדף.
- איך גופנים פועלים עם AMP.
הדרישות
- קוד לדוגמה
- דפדפן Chrome (או דפדפן מקביל שיכול לבדוק את לוח Javascript)
- Python (רצוי בגרסה 2.7) או התוסף Chrome 200 OK Web Server
- עורך קוד (לדוגמה, Atom, Sublime, Notepad++)
2. קבלת קוד לדוגמה
אפשר להוריד את כל הקוד לדוגמה למחשב:
…או משכפלים את המאגר ב-GitHub משורת הפקודה:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git
קובץ ZIP יורד למחשב. הוא מכיל כמה קבצים לדוגמה של משאבים ואת דף ההתחלה article.html.
פותחים את התיקייה ועוברים לספרייה דרך שורת הפקודה במחשב.
3. מריצים את הדף לדוגמה
כדי לבדוק את דף הדוגמה שלנו, אנחנו צריכים לגשת לקבצים משרת אינטרנט. יש כמה דרכים ליצור שרת אינטרנט מקומי זמני לצורך בדיקה. בשיעור Lab הזה נספק הוראות ל-3 אפשרויות שזמינות:
- אפליקציית Google Chrome Web Server for Chrome – זו הגישה המומלצת כי זהו הפתרון הכי פשוט וזמין לכל הפלטפורמות. הערה: כדי להשתמש בשיטה הזו, צריך להתקין את Google Chrome.
- אירוח ב-Firebase – אפשרות חלופית אם אתם רוצים גם לנסות את פלטפורמת האירוח החדשה שלנו לנכסים סטטיים, 'אירוח ב-Firebase'. ההגדרה הזו מופעלת כברירת מחדל.
- שרת HTTP מקומי של Python – נדרשת גישה לשורת הפקודה.
אפשרות 1: Web Server for Chrome
אפשר למצוא את האפליקציה Web Server for Chrome בקישור הזה בחנות האינטרנט של Chrome.
אחרי שמתקינים את אפליקציית Chrome, צריך להפנות את האפליקציה לתיקייה מסוימת באמצעות הלחצן 'בחירת תיקייה'. בשיעור ה-Lab הזה צריך לבחור את התיקייה שבה ביצעתם את פתיחת הקובץ של דוגמאות הקוד של שיעור ה-Lab.
בנוסף, צריך לסמן את האפשרות Automatically show index.html (הצגה אוטומטית של index.html) ולהגדיר את היציאה ל-8000. כדי שהשינויים האלה ייכנסו לתוקף, צריך להפעיל מחדש את שרת האינטרנט.
גישה לכתובת ה-URL הזו דרך:
http://localhost:8000/article.amp.html
אם כתובת ה-URL שלמעלה נטענת בהצלחה, אפשר להמשיך לקטע הבא.
אפשרות 2: אירוח ב-Firebase
אם אתם רוצים לנסות את שירות האירוח החדש שלנו לאתרים סטטיים ב-Firebase, אתם יכולים לפעול לפי ההוראות שזמינות כאן כדי לפרוס את אתר ה-AMP שלכם לכתובת URL של אירוח ב-Firebase.
אירוח ב-Firebase הוא ספק אירוח סטטי שאפשר להשתמש בו כדי לפרוס ולארח במהירות אתר סטטי ואת הנכסים שלו, כולל קובצי 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 מאפשרת לנו ליצור במהירות תכונות יעילות ומגיבות במאמרים שלנו, במאמץ מינימלי. ספריית הליבה של AMP JavaScript בתג <head> כוללת כמה רכיבי ליבה:
- amp-ad – מאגר להצגת מודעה.
- amp-img – מחליף את תג ה-img ב-HTML.
- amp-pixel – משמש כפיקסל למעקב כדי לספור צפיות בדף.
- amp-video – תחליף לתג הסרטון HTML5.
אפשר להשתמש בכל רכיבי הליבה שלמעלה באופן מיידי במסמך AMP. בדוגמת הקוד שלנו כבר נעשה שימוש ב-amp-img בדף, ובסדנת הקוד בנושא יסודות AMP הסברנו איך הוא קשור למערכת הפריסה של 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. אם הדף הזה היה מוטמע באתר חדשות, הוא היה עומד בדרישות להצגה בקרוסלה החדשה של תוכן AMP בחיפוש Google, ולכן הוא נקודת התחלה מצוינת לעבודה שלנו.
לפני שמשנים את הדף, פותחים את הכלים למפתחים ב-Chrome. כשעובדים על אתר (במיוחד על אתר שמתמקד בנייד), בדרך כלל מומלץ לדמות חוויית שימוש בנייד כשבודקים בדפדפן. מתחילים בפתיחת מסוף המפתחים ב-Chrome דרך Menu > More Tools > Developer Tools:
עכשיו בודקים את פלט ה-JavaScript ב-Developer Console. מוודאים שהכרטיסייה 'מסוף' נבחרה:
עכשיו לוחצים על לחצן סימולציית המכשיר במסוף למפתחים. הסמל שמייצג אותו הוא טלפון וטאבלט שמונחים זה לצד זה:
בתפריט שמופיע, מגדירים את המכשיר ל-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>
נסו להוסיף את שתי הדוגמאות שלמעלה למאמר שלכם מיד אחרי התג <header>. מרעננים את הדף ואמורים לראות שתי מודעות לבדיקה:
בהמשך מתוארות חלק מהאפשרויות הזמינות לשימוש ב-DoubleClick. כדאי לנסות להוסיף לדף את שתי ההגדרות האלה של טירגוט גיאוגרפי של מודעות:
<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 להצגה רק במדינות מסוימות, ספציפית בבריטניה ובארצות הברית.
מרעננים את הדף ובודקים. צילום המסך הבא צולם באוסטרליה, ולכן אף אחת מהמודעות לא נטענת:
הדוגמה של טירגוט גיאוגרפי שלמעלה ממחישה את הגמישות של 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 תוכל לחשב את יחס הגובה-רוחב. בנוסף, סוג הפריסה הוגדר כרספונסיבי, כלומר הסרטון ימלא את הרוחב של רכיב האב שלו.
הצגת ציוץ
הטמעה של ציוצים מפורמטים מראש מטוויטר היא תכונה נפוצה בכתבות חדשותיות. רכיב ה-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 כמתאים לציוץ מסוים שיוטמע בדף.
מרעננים את הדפדפן ומסתכלים על הדף. הציוץ אמור להופיע:
הדגשת ציטוט ממאמר
אחד מהאלמנטים הנפוצים בכתבות חדשותיות הוא הדגשה של קטעי טקסט מעניינים במיוחד מתוך הכתבה. לדוגמה, ציטוט ממקור מסוים או עובדה חשובה עשויים לחזור על עצמם בגופן גדול יותר כדי למשוך את תשומת הלב של הקורא.
עם זאת, מכיוון שלא כל הציטוטים או קטעי הטקסט הם בהכרח באורך זהה של תווים, יכול להיות קשה לאזן בין גודל הגופן הגדול לבין כמות המקום שהטקסט הספציפי יתפוס בדף.
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.
עכשיו, במקום רשימה של רכיבים שצריך לגלול בה, יוצג רכיב אחד בכל פעם. נסו להחליק אופקית כדי לעבור בין הרכיבים. אם מחליקים לאלמנט השלישי, אי אפשר להחליק יותר.
לאחר מכן, מוסיפים את מאפיין 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-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, המפתח triggers כולל קבוצה של מפתחות שמייצגים את כל טריגרים האירועים שנעקוב אחריהם. המפתחות של הטריגרים האלה הם תיאורים של האירוע, לדוגמה default pageview בדוגמה שלמעלה. ערך המפתח title מתייחס לשם הדף שמוצג.
אם נרחיב את הדוגמה שלמעלה, נוכל להוסיף עוד טריגר click on #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-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 של דף הבית של האתר, כדי לאפשר למשתמשים לנווט לחלקים אחרים באתר באמצעות הניווט הרגיל באתר.
כמו שציינו, זו הגישה הפשוטה ביותר שזמינה – היא מתבססת על הניווט הקיים באתר. בשלב הבא נסביר על שתי חלופות.
תפריט כותרות משנה
גישה נוספת לפתרון הבעיה הזו היא להציג את תפריט הניווט של האתר בתוך מסמך ה-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. מעולה!
סיימתם את שיעור ה-Lab בנושא AMP מתקדם, והצלחתם להכיר הרבה רכיבים חשובים של AMP.
אנחנו מקווים שהסברנו בצורה ברורה איך אפשר להשתמש ב-amp-ad וב-amp-analytics כדי לתמוך בכל מיני פלטפורמות פרסום וספקי ניתוח נתונים. מומלץ לעיין ברשימה המלאה של רכיבי AMP שזמינים.
בהמשך מפורטים נושאים וקישורים נוספים שיעזרו לכם לשפר את הכישורים שלכם עוד יותר.
- AMP By Example – קטלוג נרחב של דוגמאות לרכיבי AMP ולתבניות רכיבים.
- דוגמאות למודעות ב-Double Click – קטלוג נרחב של דוגמאות ל-amp-ad.
- מידע על חשיפת דפים
- תגי HTML אסורים
- כללים ואנימציות מוגבלים של CSS
- מידע נוסף על iFrames
- ה-CDN של AMP
- רשימת רכיבי AMP זמינים