مفاهیم پیشرفته صفحات موبایل تسریع شده

۱. مرور کلی

این آزمایشگاه کد، ادامه مفاهیم معرفی شده در مبانی صفحات موبایل پرشتاب است. شما باید قبل از شروع این آزمایشگاه، آزمایشگاه کد قبلی را تکمیل کرده باشید یا حداقل درک اولیه‌ای از مفاهیم اصلی AMP داشته باشید.

در این آزمایشگاه کد، یاد خواهید گرفت که AMP چگونه تبلیغات، تجزیه و تحلیل، جاسازی ویدیو، ادغام رسانه‌های اجتماعی، چرخ فلک‌های تصویر و موارد دیگر را مدیریت می‌کند. برای دستیابی به این هدف، با اضافه کردن این ویژگی‌ها از طریق اجزای مختلف AMP، بر اساس مثال آزمایشگاه کد Foundations کار خود را پیش خواهید برد.

آنچه یاد خواهید گرفت

  • نمایش تبلیغات با amp-ad.
  • ویدیوهای یوتیوب، کارت‌های توییتر و عناصر متنی واکنش‌گرا را جاسازی کنید.
  • با استفاده از amp-carousel، کروسل‌هایی با تصاویر و ترکیبی از محتوا بسازید.
  • الگوهای ردیابی ساده با amp-analytics.
  • راه‌هایی برای افزودن ناوبری سایت به صفحه شما.
  • نحوه کار فونت‌ها با AMP

آنچه نیاز دارید

  • کد نمونه
  • کروم (یا یک مرورگر معادل که بتواند کنسول جاوا اسکریپت را بررسی کند)
  • پایتون (ترجیحاً ۲.۷) یا افزونه‌ی وب سرور کروم ۲۰۰ اوکی
  • ویرایشگر کد (مثلاً Atom، Sublime، Notepad++)

۲. کد نمونه را دریافت کنید

می‌توانید تمام کدهای نمونه را روی رایانه خود دانلود کنید:

... یا مخزن GitHub را از خط فرمان کلون کنید:

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

شما یک فایل زیپ حاوی چندین نمونه فایل منبع و صفحه آغازین article.html را دانلود خواهید کرد.

پوشه را از حالت فشرده خارج کرده و از طریق خط فرمان روی رایانه خود به دایرکتوری بروید.

۳. صفحه نمونه را اجرا کنید

برای آزمایش صفحه نمونه خود، باید از طریق یک وب سرور به فایل‌ها دسترسی پیدا کنیم. روش‌های مختلفی برای ایجاد یک وب سرور محلی موقت برای اهداف آزمایش وجود دارد. برای این آزمایش کد، دستورالعمل‌هایی برای ۳ گزینه موجود ارائه خواهیم داد:

  • برنامه گوگل کروم "وب سرور برای کروم" - این روش توصیه می‌شود زیرا ساده‌ترین و چند پلتفرمی‌ترین راه حل موجود است. توجه: این روش نیاز به نصب گوگل کروم دارد.
  • میزبانی وب فایربیس - اگر به بررسی پلتفرم میزبانی وب استاتیک جدید ما، "فایربیس هاستینگ"، علاقه‌مند هستید، گزینه دیگری است. SSL به طور پیش‌فرض فعال است.
  • یک سرور محلی HTTP پایتون - نیاز به دسترسی به خط فرمان دارد.

گزینه شماره ۱: وب سرور برای کروم

می‌توانید برنامه‌ی «وب سرور برای کروم» را در این لینک در فروشگاه وب کروم پیدا کنید.

4c1bf1095afed87a.png

پس از نصب برنامه کروم، باید از طریق دکمه «انتخاب پوشه» برنامه را به یک پوشه خاص هدایت کنید. برای این آزمایشگاه کد، باید پوشه‌ای را که فایل‌های نمونه آزمایشگاه کد را در آن از حالت فشرده خارج کرده‌اید، انتخاب کنید.

علاوه بر این، باید گزینه "Automatically show index.html" را تیک بزنید و پورت را روی "8000" تنظیم کنید. برای اعمال این تغییرات، باید وب سرور را مجدداً راه‌اندازی کنید.

دسترسی به این آدرس اینترنتی از طریق:

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

اگر آدرس اینترنتی بالا با موفقیت بارگیری شد، می‌توانید به بخش بعدی بروید.

گزینه شماره ۲: میزبانی فایربیس

اگر به بررسی میزبانی وب استاتیک جدید Firebase ما علاقه‌مند هستید، می‌توانید دستورالعمل‌های موجود در اینجا را برای استقرار سایت AMP خود در یک URL میزبانی Firebase دنبال کنید.

Firebase Hosting یک ارائه دهنده میزبانی استاتیک است که می‌توانید از آن برای استقرار سریع و میزبانی یک وب‌سایت استاتیک و فایل‌های آن، از جمله فایل‌های HTML، CSS و جاوا اسکریپت، استفاده کنید. کاربران از کاهش تأخیر بهره‌مند می‌شوند زیرا محتوای استاتیک در یک شبکه تحویل محتوا (CDN) با نقاط حضور (PoPs) واقع در سراسر جهان ذخیره می‌شود.

در نهایت، میزبانی فایربیس همیشه از طریق SSL ارائه می‌شود، بنابراین برای AMP و به طور کلی وب عالی است. اگر بیشتر علاقه‌مند به تمرکز صرف روی AMP هستید، به سادگی این گزینه را نادیده بگیرید.

گزینه شماره ۳: سرور HTTP پایتون

اگر از کروم استفاده نمی‌کنید یا در نصب افزونه کروم مشکل دارید، می‌توانید از پایتون از طریق خط فرمان برای راه‌اندازی یک وب سرور محلی استفاده کنید.

برای اجرای سرور HTTP داخلی پایتون از خط فرمان، کافیست دستور زیر را اجرا کنید:

python -m SimpleHTTPServer

و به این آدرس اینترنتی دسترسی پیدا کنید:

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

۴. اجزای اصلی AMP را بیاموزید

سیستم کامپوننت‌های AMP به ما این امکان را می‌دهد که با حداقل تلاش، ویژگی‌های کارآمد و واکنش‌گرا را به سرعت در مقالات خود ایجاد کنیم. کتابخانه اصلی جاوا اسکریپت AMP در تگ <head> شامل چندین کامپوننت اصلی است:

  • amp-ad - محفظه‌ای برای نمایش تبلیغ.
  • amp-img - جایگزینی برای تگ img در HTML.
  • amp-pixel - به عنوان پیکسل ردیابی برای شمارش بازدیدهای صفحه استفاده می‌شود.
  • amp-video - جایگزینی برای تگ video در HTML5.

تمام اجزای اصلی فوق می‌توانند بلافاصله در یک سند AMP استفاده شوند. کد مثال ما از قبل از amp-img در صفحه ما استفاده می‌کند و ما نحوه ارتباط آن با سیستم طرح‌بندی AMP را در آزمایشگاه کد AMP Foundations بررسی کردیم، بنابراین بیایید amp-ad در فصل بعدی بررسی کنیم!

۵. افزودن آگهی

صفحه نمونه 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 اختصاص داده شده بود، می‌شد، بنابراین این یک نقطه شروع عالی برای کار ماست.

قبل از اینکه صفحه را تغییر دهیم، بیایید ابزارهای توسعه‌دهنده کروم را باز کنیم. هنگام کار بر روی یک وب‌سایت (به‌ویژه وب‌سایت‌های متمرکز بر موبایل) معمولاً ایده خوبی است که هنگام آزمایش در مرورگر، یک تجربه موبایل را شبیه‌سازی کنید. با باز کردن کنسول توسعه‌دهندگان در کروم از طریق Menu > More Tools > Developer Tools شروع کنید :

efc352f418f35761.png

حالا خروجی جاوا اسکریپت را در کنسول توسعه‌دهنده بررسی کنید. مطمئن شوید که تب Console انتخاب شده است:

597d53fae21a0a60.png

حالا روی دکمه شبیه‌سازی دستگاه در کنسول توسعه‌دهنده کلیک کنید. این دستگاه با یک تلفن و تبلت که کنار هم قرار گرفته‌اند، نمایش داده می‌شود:

۴۶d475a36472b495.png

در منویی که ظاهر می‌شود، دستگاه را روی «Nexus 5X» تنظیم کنید:

db6dd4ac5476eed2.png

حالا می‌توانیم روی خود صفحه کار کنیم. بیایید سعی کنیم یک تبلیغ به مقاله AMP خود اضافه کنیم !

تمام تبلیغات در AMP با استفاده از کامپوننت amp-ad ساخته می‌شوند. با استفاده از این کامپوننت می‌توانیم تبلیغات خود را به روش‌های مختلفی مانند عرض، ارتفاع و حالت طرح‌بندی پیکربندی کنیم. با این حال، بسیاری از پلتفرم‌های تبلیغاتی به پیکربندی‌های اضافی مانند شناسه حساب برای شبکه تبلیغاتی، اینکه کدام تبلیغ باید نمایش داده شود یا گزینه‌هایی برای هدف‌گیری تبلیغات نیاز دارند. برای amp-ad ما به سادگی گزینه‌های مختلف مورد نیاز را به عنوان ویژگی‌های HTML پر می‌کنیم.

به این نمونه از تبلیغات دابل کلیک نگاهی بیندازید:

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

همانطور که می‌بینید، این یک پیکربندی بسیار ساده است. به ویژگی type توجه کنید، این ویژگی به کامپوننت amp-ad اطلاع می‌دهد که از کدام پلتفرم تبلیغاتی می‌خواهید استفاده کنید. در این مورد، ما پلتفرم Double Click را می‌خواستیم و بنابراین مقدار type برابر 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> به مقاله خود اضافه کنید . صفحه را رفرش کنید ، باید ببینید که دو تبلیغ آزمایشی ظاهر شده‌اند:

5dbcb01bee95147b.png

بیایید گزینه‌های بیشتری را که می‌توان با Double Click استفاده کرد، بررسی کنیم. سعی کنید این دو پیکربندی تبلیغات هدفمند جغرافیایی را به صفحه خود اضافه کنید :

<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>

متأسفانه نمی‌توان هدف‌گیری جغرافیایی را از طریق کد خود صفحه کنترل کرد. با این حال، این تبلیغات آزمایشی از قبل در داشبورد دابل کلیک پیکربندی شده‌اند تا فقط در کشورهای خاص، به‌ویژه بریتانیا و ایالات متحده آمریکا، نمایش داده شوند.

صفحه را رفرش کنید و نگاهی بیندازید. تصویر زیر از استرالیا گرفته شده است، بنابراین هیچ یک از تبلیغات بارگیری نمی‌شوند:

c53cbc464074deab.png

مثال هدف‌گیری جغرافیایی بالا نشان می‌دهد که amp-ad چگونه برای انواع ویژگی‌های پلتفرم تبلیغاتی به اندازه کافی انعطاف‌پذیر است.

شبکه‌های تبلیغاتی که در حال حاضر پشتیبانی می‌شوند عبارتند از:

برای کسب اطلاعات در مورد جدیدترین پلتفرم‌های تبلیغاتی پشتیبانی‌شده، حتماً صفحه مستندات مربوط به کامپوننت AMP Ad را بررسی کنید.

در فصل بعدی، اجزای پیشرفته‌تر AMP و نحوه گنجاندن آنها در اسناد AMP خود را بررسی خواهیم کرد.

۶. محتوا را با کامپوننت‌های توسعه‌یافته گسترش دهید

در حال حاضر شما یک سند AMP اولیه با متن، تصویر و حتی یک تبلیغ جاسازی شده در صفحه دارید - همه عناصر کلیدی برای روایت یک داستان و کسب درآمد از محتوای شما. با این حال، وب‌سایت‌های مدرن اغلب شامل قابلیت‌های بیشتری نسبت به تصاویر و متن ساده هستند.

بنابراین بیایید سند AMP خود را به سطح بعدی ببریم و بررسی کنیم که چه اجزایی فراتر از اجزای اصلی ذکر شده در بالا در دسترس هستند.

در این فصل سعی خواهیم کرد قابلیت‌های وب پیشرفته‌تری را که معمولاً در مقالات خبری یافت می‌شوند، اضافه کنیم:

  • ویدیوهای یوتیوب
  • توییت‌ها
  • نقل قول های مقاله

یک ویدیوی یوتیوب را جاسازی کنید

بیایید یک ویدیوی یوتیوب را در سند جاسازی کنیم. کد زیر یک ویدیو را جاسازی می‌کند، آن را به صفحه شما اضافه می‌کند :

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

صفحه را رفرش کنید و به صفحه نگاه کنید. باید به جای ویدیو این متن را ببینید: "ویدئو قابل بارگذاری نیست."

حتی اگر مرورگر شما بتواند ویدیوهای یوتیوب را بدون مشکل نمایش دهد، باز هم این خطا را دریافت خواهید کرد. چرا؟ در واقع ویدیو بارگیری نشده است، بلکه خود مؤلفه از کار افتاده است.

به یاد داشته باشید، همه کامپوننت‌ها در فایل جاوا اسکریپت کتابخانه اصلی AMP گنجانده نشده‌اند. ما باید یک درخواست جاوا اسکریپت اضافی برای کامپوننت YouTube به طور خاص اضافه کنیم. همه کامپوننت‌ها به جز یک مجموعه اصلی، به این ارجاعات جاوا اسکریپت اضافی نیاز دارند.

درخواست زیر را به تگ <head> اضافه کنید : 

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

صفحه را رفرش کنید و باید ویدیوی یوتیوب را ببینید:

be536b1d0f366e27.png

یک بار دیگر عرض و ارتفاع ویدیو را مشخص کرده‌ایم تا نسبت ابعاد توسط سیستم طرح‌بندی AMP محاسبه شود. علاوه بر این، نوع طرح‌بندی روی واکنش‌گرا تنظیم شده است، به این معنی که این ویدیو عرض عنصر والد خود را پر می‌کند.

درباره کامپوننت یوتیوب بیشتر بدانید.

نمایش توییت

جاسازی توییت‌های از پیش قالب‌بندی‌شده از توییتر یکی از ویژگی‌های رایج مقالات خبری است. کامپوننت AMP توییتر می‌تواند این قابلیت را به راحتی فراهم کند.

با اضافه کردن درخواست جاوا اسکریپت زیر به تگ <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 نمونه دیگری از یک ویژگی سفارشی است که توسط یک فروشنده پلتفرم خاص مورد نیاز است. در این حالت، توییتر ویژگی data-tweetid را به عنوان مربوط به یک توییت خاص که باید در صفحه جاسازی شود، تشخیص می‌دهد.

مرورگر خود را رفرش کنید و نگاهی به صفحه بیندازید. باید توییت زیر را ببینید:

b0423604fdf85209.png

درباره کامپوننت توییتر بیشتر بدانید.

برجسته کردن نقل قول مقاله

یکی از عناصر رایج در مقالات خبری، برجسته کردن بخش‌های جذاب متن مقاله است. برای مثال، نقل قولی از یک منبع خاص یا یک واقعیت مهم ممکن است با فونت بزرگتری تکرار شود تا توجه خواننده را جلب کند.

با این حال، از آنجایی که همه نقل قول‌ها یا قطعات متن لزوماً طول کاراکترهای رشته‌ای یکسانی ندارند، ایجاد تعادل بین اندازه فونت بزرگتر و میزان فضایی که متن خاص در صفحه اشغال خواهد کرد، می‌تواند دشوار باشد.

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 با ارتفاع بسیار بزرگتر - مثلاً مقدار ۴۰۰ - ایجاد کنید و مقدار ویژگی max-font-size را روی ۴۲ نگه دارید. صفحه حاصل چگونه به نظر می‌رسد؟ آیا متن به صورت عمودی در مرکز قرار می‌گیرد یا ارتفاع برچسب amp-fit-text برای متناسب شدن با حداکثر اندازه فونت کاهش می‌یابد؟ با توجه به آنچه در مورد سیستم طرح‌بندی AMP می‌دانید، سعی کنید قبل از ویرایش سند به این سوال پاسخ دهید!

۷. چرخ و فلک‌های پیچیده

یکی دیگر از ویژگی‌های رایج در توسعه وب، چرخ و فلک است. AMP شامل یک جزء عمومی است که برای برآوردن این نیاز طراحی شده است. بیایید با یک مثال ساده مانند چرخ و فلک تصاویر شروع کنیم.

به یاد داشته باشید که کتابخانه کامپوننت carousel را با اضافه کردن درخواست جاوا اسکریپت زیر به تگ <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>

صفحه خود را رفرش کنید ، باید یک چرخ فلک در صفحه خود ببینید:

b55c8919ac22396f.png

کامپوننت carousel را می‌توان به روش‌های مختلفی پیکربندی کرد. سعی کنید نوع آن را به slides تغییر دهید و نتیجه را ببینید. حتماً ویژگی layout مربوط به amp-carousel و تصاویر داخل آن را نیز تغییر دهید تا responsive باشند.

حالا به جای فهرستی از عناصر که به صورت اسکرول نمایش داده می‌شوند، هر عنصر را در یک زمان مشاهده خواهید کرد. برای حرکت بین عناصر، انگشت خود را به صورت افقی روی صفحه بکشید . اگر به عنصر سوم برسید، دیگر نمی‌توانید بیشتر از این روی صفحه بکشید.

سپس، ویژگی loop را اضافه کنید . صفحه را رفرش کنید و فوراً به سمت چپ بکشید. چرخ فلک بی‌پایان می‌چرخد.

در آخر، بیایید کاری کنیم که این چرخ و فلک با سرعت هر ۲ ثانیه به طور خودکار پخش شود. ویژگی autoplay را به صفحه اضافه کنید و ویژگی delay را با مقدار ۲۰۰۰ به این صورت اضافه کنید: 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>

صفحه را رفرش کنید ، باید چیزی شبیه به این را ببینید:

1c92ba4977b3c6d1.png

a1b05df74f023f25.png

درباره کامپوننت Carousel بیشتر بدانید.

۸. با amp-analytics پیگیری کنید

پلتفرم‌های تحلیلی معمولاً از طریق قطعه کدهای جاوا اسکریپت درون‌خطی و فراخوانی توابع که رویدادهایی را که به سیستم تحلیلی ارسال می‌شوند، فعال می‌کنند، در وب‌سایت‌ها ادغام می‌شوند. AMP یک سینتکس پیکربندی JSON انعطاف‌پذیر برای تکرار این فرآیند برای چندین شریک تحلیلی ارائه می‌دهد.

در ادامه مثالی از ردیابی سنتی گوگل آنالیتیکس مبتنی بر جاوا اسکریپت آمده است که آن را در قالب JSON amp-analytics بازنویسی خواهیم کرد. ابتدا رویکرد سنتی جاوا اسکریپت: 

<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 شامل کد جاوا اسکریپت در مثال سنتی نمی‌شود که در صورت تغییر تصادفی می‌تواند منجر به اشتباه شود.

در قالب JSON، کلید triggers شامل مجموعه‌ای از کلیدها است که نشان‌دهنده تمام triggerهای رویدادی است که ما ردیابی خواهیم کرد، کلیدهای این triggerها توضیحاتی از رویداد هستند، برای مثال "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 را اینجا بخوانید!

۹. پیمایش سایت شما

یکی از الزامات رایج وب‌سایت‌های موبایل، وجود منوی ناوبری سایت است. این منوها می‌توانند اشکال مختلفی داشته باشند. در اینجا چند مثال از نحوه نمایش ناوبری در یک سند AMP آورده شده است:

  1. لینک به صفحه اصلی شما - ساده‌ترین گزینه.
  2. یک منوی زیرعنوان از طریق کامپوننت چرخ فلک.

لینک صفحه اصلی

ساده‌ترین راه برای اینکه کاربران به گزینه‌های ناوبری معمول وب‌سایت شما دسترسی پیدا کنند، این است که آنها را به رابط کاربری معمول وب‌سایت خود برگردانید!

سعی کنید این لینک 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 اشاره می‌کند - اگر روی این لینک کلیک کنید، خیلی زود متوجه خواهید شد که به جایی منتهی نمی‌شود.

c856bc8d86acb31c.png

این لینک می‌تواند با آدرس اینترنتی صفحه اصلی وب‌سایت شما جایگزین شود تا کاربران بتوانند از طریق ناوبری وب‌سایت معمولی شما به سایر قسمت‌های سایت شما هدایت شوند.

همانطور که گفته شد، این ساده‌ترین رویکرد موجود است - استفاده از ناوبری وب‌سایت موجود شما. در ادامه دو گزینه دیگر را بررسی خواهیم کرد.

منوی زیرعنوان

رویکرد دیگر برای این مشکل، نمایش منوی ناوبری سایت شما در داخل سند AMP است. برای اینکه منو در بخش کوچکی از صفحه شما قرار گیرد، می‌توانیم از یک چرخ و فلک برای نمایش یک منوی قابل پیمایش در زیر هدر سایت استفاده کنیم.

از آنجایی که به کامپوننت carousel نیاز داریم، حتماً کد جاوا اسکریپت کامپوننت را به تگ <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;
}

حالا صفحه را رفرش کنید . باید منویی از لینک‌ها را زیر عنوان مقاله خود ببینید. این منو را می‌توان به صورت افقی اسکرول کرد تا لینک‌های ناوبری زیادی را در خود جای دهد.

cc548326befbbb0e.png

این ناوبری زیرمنو راهی عالی برای ذخیره تعداد زیادی لینک بدون اشغال فضای زیاد در صفحه شماست.

۱۰. افزودن فونت‌ها

همانطور که قبلاً بحث شد، هیچ درخواست استایل‌شیت خارجی در اسناد 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;
}

صفحه خود را رفرش کنید و ظاهر جدید صفحه خود را بررسی کنید. همچنین خروجی اعتبارسنج را بررسی کنید و متوجه خواهید شد که هیچ شکایتی در رابطه با این درخواست خارجی وجود ندارد.

۱۱. تبریک می‌گویم!

شما آزمایشگاه کد پیشرفته AMP را به پایان رسانده‌اید و با موفقیت بسیاری از اجزای کلیدی AMP را بررسی کرده‌اید!

امیدوارم برای شما روشن شده باشد که چگونه می‌توان از amp-ad و amp-analytics برای پشتیبانی از انواع پلتفرم‌های تبلیغاتی و فروشندگان تجزیه و تحلیل استفاده کرد. حتماً لیست کامل اجزای AMP موجود را بررسی کنید.

در ادامه به برخی از موضوعات و لینک‌های اضافی اشاره می‌کنیم که شاید بخواهید برای تقویت بیشتر مهارت‌هایتان آنها را بررسی کنید!