1. סקירה כללית
השיעור הזה הוא המשך של המושגים שהוצגו במאמר Accelerated Mobile Pages Foundations (יסודות של דפי AMP). לפני שמתחילים את ה-Code Lab הזה, צריך להשלים את ה-Code Lab הקודם או לפחות להבין את המושגים הבסיסיים של AMP.
ב-codelab הזה נסביר איך AMP מטפל בפרסום, בניתוח נתונים, בהטמעת סרטונים, בשילוב עם רשתות חברתיות, בקרוסלות של תמונות ועוד. כדי לעשות את זה, תשתמשו בדוגמה משיעור ה-codelab בנושא יסודות, ותוסיפו את התכונות האלה באמצעות רכיבי AMP השונים.
מה תלמדו
- הצגת מודעות לרשת המדיה באמצעות 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 הזה צריך לבחור את התיקייה שבה ביצעתם פתיחת קובץ ZIP של קבצי הדוגמה של שיעור ה-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 מאפשרת לנו ליצור במהירות תכונות יעילות ומותאמות למכשירים ניידים במאמרים שלנו, עם מינימום מאמץ. ספריית ה-JavaScript המרכזית של AMP בתג <head> כוללת כמה רכיבים מרכזיים:
- amp-ad – מאגר להצגת מודעה.
- amp-img – מחליף את תג ה-img ב-HTML.
- amp-pixel – משמש כפיקסל למעקב כדי לספור צפיות בדף.
- amp-video – תג חלופי לתג הסרטון HTML5.
אפשר להשתמש בכל רכיבי הליבה שלמעלה באופן מיידי במסמך AMP. בדוגמת הקוד שלנו כבר נעשה שימוש ב-amp-img בדף, והסברנו איך הוא קשור למערכת הפריסה של AMP בסדנת הקוד AMP Foundations. לכן, בפרק הבא נסביר על 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. מוודאים שהכרטיסייה 'מסוף' נבחרה:
עכשיו לוחצים על לחצן סימולציית המכשיר ב-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 Ad כדי לקבל מידע על פלטפורמות המודעות העדכניות שנתמכות.
בפרק הבא נסביר על רכיבי 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 בדוגמה שלמעלה. ערך המפתח של הכותרת קשור לשם הדף שמוצג.
אם נרחיב את הדוגמה שלמעלה, נוכל להוסיף עוד טריגר 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, וכשהאירוע הוא click (קליק) או tap (הקשה) במכשיר, אנחנו שולחים פעולת אירוע 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 זמינים