ত্বরিত মোবাইল পৃষ্ঠাগুলি উন্নত ধারণা

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবটি অ্যাক্সিলারেটেড মোবাইল পেজ ফাউন্ডেশনে প্রবর্তিত ধারণাগুলির ধারাবাহিকতা। এই ল্যাবটি শুরু করার আগে আপনার পূর্ববর্তী কোড ল্যাবটি ইতিমধ্যেই সম্পন্ন করা উচিত ছিল অথবা কমপক্ষে AMP এর মূল ধারণাগুলি সম্পর্কে প্রাথমিক ধারণা থাকা উচিত ছিল।

এই কোডল্যাবে, আপনি শিখবেন কিভাবে AMP বিজ্ঞাপন, বিশ্লেষণ, ভিডিও এম্বেডিং, সোশ্যাল মিডিয়া ইন্টিগ্রেশন, ইমেজ ক্যারোসেল এবং আরও অনেক কিছু পরিচালনা করে। এটি অর্জনের জন্য আপনি বিভিন্ন AMP উপাদানের মাধ্যমে এই বৈশিষ্ট্যগুলি যুক্ত করে ফাউন্ডেশন কোডল্যাবের উদাহরণ তৈরি করবেন।

তুমি কি শিখবে

• amp-ad সহ বিজ্ঞাপন প্রদর্শন করুন।
• ইউটিউব ভিডিও, টুইটার কার্ড এবং প্রতিক্রিয়াশীল টেক্সট উপাদান এম্বেড করুন।
• অ্যাম্প-ক্যারোসেল ব্যবহার করে ছবি এবং কন্টেন্টের সংমিশ্রণ দিয়ে ক্যারোসেল তৈরি করুন।
• অ্যাম্প-অ্যানালিটিক্স সহ সহজ ট্র্যাকিং প্যাটার্ন।
• আপনার পৃষ্ঠায় সাইট নেভিগেশন যোগ করার উপায়।
• AMP-এর সাথে ফন্টগুলি কীভাবে কাজ করে।

তোমার যা লাগবে

• নমুনা কোড
• ক্রোম (অথবা সমতুল্য ব্রাউজার যা জাভাস্ক্রিপ্ট কনসোল পরিদর্শন করতে পারে)
• পাইথন (বিশেষত 2.7) অথবা Chrome 200 OK ওয়েব সার্ভার এক্সটেনশন
• কোড এডিটর (যেমন Atom, Sublime, Notepad++)

2. নমুনা কোড পান

আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন:

জিপ ডাউনলোড করুন

...অথবা কমান্ড লাইন থেকে GitHub সংগ্রহস্থলটি ক্লোন করুন:

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

আপনি একটি ZIP ফাইল ডাউনলোড করবেন যেখানে বেশ কয়েকটি উদাহরণ রিসোর্স ফাইল এবং শুরুর article.html পৃষ্ঠা থাকবে।

ফোল্ডারটি আনজিপ করুন এবং আপনার কম্পিউটারের কমান্ড লাইনের মাধ্যমে ডিরেক্টরিতে নেভিগেট করুন।

৩. নমুনা পৃষ্ঠাটি চালান

আমাদের নমুনা পৃষ্ঠাটি পরীক্ষা করার জন্য আমাদের একটি ওয়েব সার্ভার থেকে ফাইলগুলি অ্যাক্সেস করতে হবে। পরীক্ষার উদ্দেশ্যে একটি অস্থায়ী স্থানীয় ওয়েব সার্ভার তৈরি করার বিভিন্ন উপায় রয়েছে। এই কোড ল্যাবের জন্য আমরা 3টি বিকল্পের জন্য নির্দেশাবলী প্রদান করব:

• গুগল ক্রোম অ্যাপ "ওয়েব সার্ভার ফর ক্রোম" - এটি প্রস্তাবিত পদ্ধতি কারণ এটি সবচেয়ে সহজ এবং ক্রস প্ল্যাটফর্ম সমাধান। দ্রষ্টব্য: এই পদ্ধতির জন্য গুগল ক্রোম ইনস্টল করা প্রয়োজন।
• ফায়ারবেস হোস্টিং - যদি আপনি আমাদের নতুন স্ট্যাটিক অ্যাসেট হোস্টিং প্ল্যাটফর্ম "ফায়ারবেস হোস্টিং" অন্বেষণ করতে আগ্রহী হন তবে একটি বিকল্প বিকল্প। ডিফল্টরূপে SSL-সক্ষম।
• একটি স্থানীয় HTTP পাইথন সার্ভার - কমান্ড-লাইনে অ্যাক্সেস প্রয়োজন।

দ্রষ্টব্য : প্রোডাকশন পরিবেশে HTTPS ব্যবহার করার জন্য জোরালোভাবে সুপারিশ করা হচ্ছে। HTTPS-এর কেবল নিরাপত্তা ছাড়াও SEO সহ বেশ কিছু সুবিধা রয়েছে। আপনি এই বিষয় সম্পর্কে আরও পড়তে পারেন এখানে ।

বিকল্প #১: ক্রোমের জন্য ওয়েব সার্ভার

আপনি Chrome ওয়েব স্টোরের এই লিঙ্কে "Web Server for Chrome" অ্যাপটি খুঁজে পেতে পারেন।

Chrome অ্যাপ ইনস্টল করার পরে আপনাকে "ফোল্ডার নির্বাচন করুন" বোতামের মাধ্যমে অ্যাপটিকে একটি নির্দিষ্ট ফোল্ডারে নির্দেশ করতে হবে। এই কোড ল্যাবের জন্য আপনাকে সেই ফোল্ডারটি নির্বাচন করতে হবে যেখানে আপনি কোড ল্যাব উদাহরণ ফাইলগুলি আনজিপ করেছেন।

অতিরিক্তভাবে, আপনাকে "Automatically show index.html" বিকল্পটি টিক দিতে হবে এবং পোর্টটি "8000" এ সেট করতে হবে। এই পরিবর্তনগুলি কার্যকর করার জন্য আপনাকে ওয়েব সার্ভারটি পুনরায় চালু করতে হবে।

এই URL টি এর মাধ্যমে অ্যাক্সেস করুন:

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

উপরের URLটি সফলভাবে লোড হলে আপনি পরবর্তী বিভাগে যেতে পারেন।

বিকল্প #২: ফায়ারবেস হোস্টিং

আপনি যদি আমাদের নতুন Firebase স্ট্যাটিক ওয়েব হোস্টিং অন্বেষণ করতে আগ্রহী হন, তাহলে আপনার AMP সাইটটি Firebase হোস্টিং URL-এ স্থাপন করতে এখানে উপলব্ধ নির্দেশাবলী অনুসরণ করতে পারেন।

ফায়ারবেস হোস্টিং হল একটি স্ট্যাটিক হোস্টিং প্রোভাইডার যা ব্যবহার করে আপনি একটি স্ট্যাটিক ওয়েবসাইট এবং এর সম্পদগুলি দ্রুত স্থাপন এবং হোস্ট করতে পারেন; যার মধ্যে HTML, CSS এবং জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত। ব্যবহারকারীরা হ্রাসপ্রাপ্ত ল্যাটেন্সি থেকে উপকৃত হন কারণ স্ট্যাটিক কন্টেন্ট একটি কন্টেন্ট ডেলিভারি নেটওয়ার্কে (CDN) ক্যাশে করা হয় যেখানে বিশ্বজুড়ে পয়েন্ট অফ প্রেজেন্স (PoPs) অবস্থিত থাকে।

পরিশেষে, Firebase হোস্টিং সর্বদা SSL এর মাধ্যমে পরিবেশিত হয় তাই এটি AMP এবং সাধারণভাবে ওয়েবের জন্য দুর্দান্ত। আপনি যদি কেবল AMP-তে মনোনিবেশ করতে আগ্রহী হন তবে কেবল এই বিকল্পটি উপেক্ষা করুন।

বিকল্প #৩: HTTP পাইথন সার্ভার

যদি আপনি Chrome ব্যবহার না করেন অথবা Chrome এক্সটেনশন ইনস্টল করতে সমস্যা হয়, তাহলে আপনি স্থানীয় ওয়েব সার্ভার চালু করতে কমান্ড-লাইন থেকে Python ব্যবহার করতে পারেন।

কমান্ড লাইন থেকে পাইথনের অন্তর্নির্মিত HTTP সার্ভার চালানোর জন্য কেবল নিম্নলিখিতগুলি সম্পাদন করুন:

python -m SimpleHTTPServer

এবং এই URL টি অ্যাক্সেস করুন:

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

৪. মূল AMP উপাদানগুলি শিখুন

AMP-এর কম্পোনেন্ট সিস্টেম আমাদেরকে ন্যূনতম প্রচেষ্টার মাধ্যমে দ্রুত আমাদের নিবন্ধগুলিতে দক্ষ এবং প্রতিক্রিয়াশীল বৈশিষ্ট্য তৈরি করতে সাহায্য করে। <head> ট্যাগের মূল AMP জাভাস্ক্রিপ্ট লাইব্রেরিতে বেশ কয়েকটি মূল উপাদান রয়েছে:

• amp-ad - বিজ্ঞাপন প্রদর্শনের জন্য ধারক।
• amp-img - HTML img ট্যাগের প্রতিস্থাপন।
• amp-pixel - পৃষ্ঠার ভিউ গণনা করার জন্য ট্র্যাকিং পিক্সেল হিসেবে ব্যবহৃত হয়।
• amp-video - HTML5 ভিডিও ট্যাগের প্রতিস্থাপন।

উপরের সমস্ত মূল উপাদানগুলি একটি AMP ডকুমেন্টে তাৎক্ষণিকভাবে ব্যবহার করা যেতে পারে। আমাদের উদাহরণ কোডটি ইতিমধ্যেই আমাদের পৃষ্ঠায় amp-img ব্যবহার করে এবং আমরা AMP ফাউন্ডেশন কোড ল্যাবে AMP লেআউট সিস্টেমের সাথে এটি কীভাবে সম্পর্কিত তা অন্বেষণ করেছি, তাই আসুন পরবর্তী অধ্যায়ে amp-ad অন্বেষণ করি!

দ্রষ্টব্য : ওয়েব ডেভেলপমেন্টে HTML5 ভিডিও এবং ট্র্যাকিং পিক্সেল এম্বেড করা গুরুত্বপূর্ণ বৈশিষ্ট্য। আপনি যদি এই উপাদানগুলি এম্বেড করতে আগ্রহী হন তবে আপনি এখানে এবং এখানে তাদের সংশ্লিষ্ট রেফারেন্স পৃষ্ঠাগুলি অন্বেষণ করতে পারেন।

৫. একটি বিজ্ঞাপন যোগ করা

আপনার নমুনা 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 ডেভেলপার টুলস খুলি। কোনও ওয়েবসাইটে কাজ করার সময় (বিশেষ করে মোবাইল ফোকাসড ওয়েবসাইট) ব্রাউজারে পরীক্ষা করার সময় সাধারণত মোবাইল অভিজ্ঞতা অনুকরণ করা একটি ভাল ধারণা। Menu > More Tools > Developer Tools মাধ্যমে Chrome-এ ডেভেলপার কনসোল খোলার মাধ্যমে শুরু করুন :

এবার ডেভেলপার কনসোলে জাভাস্ক্রিপ্ট আউটপুট পরীক্ষা করুন। নিশ্চিত করুন যে আপনি কনসোল ট্যাবটি নির্বাচন করেছেন:

এখন ডেভেলপার কনসোলে ডিভাইস সিমুলেশন বোতামে ক্লিক করুন। এটি একটি ফোন এবং ট্যাবলেট দ্বারা প্রতিনিধিত্ব করা হয় যা একে অপরের পাশে বসে আছে:

প্রদর্শিত মেনুতে, ডিভাইসটিকে "Nexus 5X" এ সেট করুন:

এখন আমরা পৃষ্ঠাটিতেই কাজ শুরু করতে পারি। আসুন আমাদের 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 এর প্ল্যাটফর্ম চেয়েছিলাম এবং তাই টাইপের মান ছিল doubleclick ।

data-slot অ্যাট্রিবিউটটি আরও অনন্য। amp-ad-এ data- দিয়ে শুরু হওয়া যেকোনো অ্যাট্রিবিউটই বিক্রেতার নির্দিষ্ট অ্যাট্রিবিউট। এর মানে হল যে সমস্ত বিক্রেতার এই নির্দিষ্ট অ্যাট্রিবিউটের প্রয়োজন হবে না এবং এটি সরবরাহ করা হলে তারা অবশ্যই প্রতিক্রিয়া জানাবে না। উদাহরণস্বরূপ, উপরের ডাবল ক্লিক উদাহরণটিকে A9 প্ল্যাটফর্মের একটি পরীক্ষামূলক বিজ্ঞাপনের সাথে তুলনা করুন:

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

উপরের দুটি উদাহরণই <header> ট্যাগের ঠিক পরে আপনার নিবন্ধে যোগ করার চেষ্টা করুন। পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি দুটি পরীক্ষার বিজ্ঞাপন দেখতে পাবেন:

গুরুত্বপূর্ণ : আপনার ডেভেলপার কনসোলে কিছু ত্রুটি থাকতে পারে যেমন 'মিশ্র সামগ্রী' অথবা 'XMLHttpRequest লোড হতে পারে না'। প্রথমটি সম্ভবত A9 বিজ্ঞাপনের সাথে সম্পর্কিত কারণ এটি লোড করা সমস্ত সামগ্রী নিরাপদ নয়। এটি AMP-তে পরিবেশিত সমস্ত বিজ্ঞাপনের জন্য একটি লক্ষণীয় প্রয়োজনীয়তা।

ডাবল ক্লিকের মাধ্যমে ব্যবহারের জন্য আরও কিছু বিকল্প খুঁজে বের করা যাক। আপনার পৃষ্ঠায় এই দুটি জিওটার্গেটিং বিজ্ঞাপন কনফিগারেশন যোগ করার চেষ্টা করুন:

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

দুর্ভাগ্যবশত, পৃষ্ঠার কোড থেকেই জিওটার্গেটিং নিয়ন্ত্রণ করা সম্ভব নয়। তবে, এই পরীক্ষামূলক বিজ্ঞাপনগুলি ইতিমধ্যেই ডাবল ক্লিক ড্যাশবোর্ডে কনফিগার করা হয়েছে যাতে শুধুমাত্র নির্দিষ্ট দেশে, বিশেষ করে যুক্তরাজ্য এবং মার্কিন যুক্তরাষ্ট্রে দেখা যায়।

পৃষ্ঠাটি রিফ্রেশ করে দেখুন। নিচের স্ক্রিনশটটি অস্ট্রেলিয়া থেকে তোলা হয়েছে, তাই কোনও বিজ্ঞাপনই লোড হচ্ছে না:

উপরের জিওটার্গেটিং উদাহরণটি দেখায় যে amp-ad কিভাবে সকল ধরণের বিজ্ঞাপন প্ল্যাটফর্ম বৈশিষ্ট্যের জন্য যথেষ্ট নমনীয়।

দ্রষ্টব্য : আপনি হয়তো লক্ষ্য করবেন যে এই amp-ad ট্যাগগুলির ভিতরে অতিরিক্ত div ট্যাগ রয়েছে যার উপর fallback নামে একটি অ্যাট্রিবিউট রয়েছে। আপনি কি অনুমান করতে পারেন যে fallback অ্যাট্রিবিউটটি কী বোঝায়? এটি AMP-এর লোডিং সিস্টেমকে কেবল তখনই সেই এলিমেন্টের বিষয়বস্তু দেখানোর জন্য অবহিত করে যখন প্যারেন্ট এলিমেন্টটি সফলভাবে লোড হতে ব্যর্থ হয়। এর অর্থ হল প্যারেন্ট এলিমেন্টটি চাইল্ড এলিমেন্টের উপর ফিরে আসে - তাই 'fallback' শব্দটি ব্যবহার করা হয়েছে।

বর্তমানে সমর্থিত বিজ্ঞাপন নেটওয়ার্কগুলি নিম্নরূপ:

• A9 সম্পর্কে
• অ্যাডব্লেড
• অ্যাডফর্ম
• অ্যাডরিয়েক্টর
• অ্যাডসেন্স
• অ্যাডটেক
• ক্রাইটিও
• ডট এবং মিডিয়া
• ডাবলক্লিক করুন
• ফ্লাইট
• ইন্ডাস্ট্রিব্রেইনস
• ওপেনএক্স
• প্লাইস্টা
• স্মার্ট অ্যাডসার্ভার
• ইয়েলডমো
• সন্তুষ্টি
• ট্রিপললিফ্ট
• টিডস
• আই-মোবাইল
• ওয়েবিডিয়াডস

সর্বশেষ সমর্থিত বিজ্ঞাপন প্ল্যাটফর্ম সম্পর্কে তথ্যের জন্য AMP বিজ্ঞাপন উপাদানের ডকুমেন্টেশন পৃষ্ঠাটি অবশ্যই দেখুন।

পরবর্তী অধ্যায়ে আমরা আরও উন্নত AMP উপাদানগুলি এবং কীভাবে সেগুলিকে আমাদের AMP নথিতে অন্তর্ভুক্ত করতে হয় তা অন্বেষণ করব।

দ্রষ্টব্য : AMP ডকুমেন্টের ভেতরে জাভাস্ক্রিপ্ট চালানোর অনুমতি থাকলে কোনও বিজ্ঞাপন নেটওয়ার্ক চালানো যাবে না। পরিবর্তে, AMP রানটাইম একটি ভিন্ন উৎস থেকে (iframe স্যান্ডবক্সের মাধ্যমে) একটি iframe AMP ডকুমেন্ট হিসেবে লোড করে এবং সেই iframe স্যান্ডবক্সের ভেতরে বিজ্ঞাপন নেটওয়ার্কের JS কার্যকর করে।

গুরুত্বপূর্ণ : সময়ের সাথে সাথে amp-ad এর স্পেসিফিকেশন উল্লেখযোগ্যভাবে পরিবর্তিত হতে পারে। বর্তমান পদ্ধতিটি বিজ্ঞাপন দেখানোর জন্য ফর্ম্যাটটিকে বুটস্ট্র্যাপ করার জন্য ডিজাইন করা হয়েছে।

৬. বর্ধিত উপাদান সহ সামগ্রী প্রসারিত করুন

এখন আপনার কাছে একটি মৌলিক AMP ডকুমেন্ট আছে যেখানে টেক্সট, ছবি এবং এমনকি পৃষ্ঠায় এম্বেড করা একটি বিজ্ঞাপনও আছে - গল্প বলা এবং আপনার কন্টেন্ট থেকে অর্থ উপার্জনের জন্য এই সমস্ত মূল উপাদান। তবে, আধুনিক ওয়েবসাইটগুলিতে প্রায়শই কেবল ছবি এবং টেক্সটের চেয়ে বেশি কার্যকারিতা থাকে।

তাহলে আসুন আমাদের AMP ডকুমেন্টটিকে পরবর্তী স্তরে নিয়ে যাই এবং আগে উল্লেখিত মূল উপাদানগুলির বাইরে আর কোন উপাদানগুলি উপলব্ধ তা অন্বেষণ করি।

এই অধ্যায়ে আমরা আরও উন্নত ওয়েব কার্যকারিতা যোগ করার চেষ্টা করব যা সাধারণত সংবাদ নিবন্ধগুলিতে পাওয়া যায়:

• ইউটিউব ভিডিও
• টুইট
• প্রবন্ধের উদ্ধৃতি

একটি 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>

পৃষ্ঠাটি রিফ্রেশ করুন এবং পৃষ্ঠাটি দেখুন। আপনি ভিডিওর পরিবর্তে এই লেখাটি দেখতে পাবেন: "ভিডিওটি লোড করা যায়নি।"

এমনকি যদি আপনার ব্রাউজার কোনও সমস্যা ছাড়াই ইউটিউব ভিডিও দেখাতে পারে, তবুও আপনি এই ত্রুটিটি দেখতে পাবেন। কেন? ভিডিওটি আসলে লোড হতে ব্যর্থ হয়নি, বরং উপাদানটি নিজেই ব্যর্থ হয়েছে।

মনে রাখবেন, কোর এএমপি লাইব্রেরি জাভাস্ক্রিপ্ট ফাইলে সমস্ত উপাদান অন্তর্ভুক্ত থাকে না। বিশেষ করে ইউটিউব উপাদানের জন্য আমাদের একটি অতিরিক্ত জাভাস্ক্রিপ্ট অনুরোধ অন্তর্ভুক্ত করতে হবে। একটি কোর সেট ছাড়া সমস্ত উপাদানের জন্য এই অতিরিক্ত জাভাস্ক্রিপ্ট রেফারেন্সগুলির প্রয়োজন হবে।

<head> ট্যাগে নিম্নলিখিত অনুরোধটি যোগ করুন :

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

পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি ইউটিউব ভিডিওটি দেখতে পাবেন:

AMP লেআউট সিস্টেম দ্বারা আকৃতির অনুপাত গণনা করার জন্য আমরা আবারও ভিডিওর প্রস্থ এবং উচ্চতা নির্দিষ্ট করেছি। এছাড়াও লেআউটের ধরণটি প্রতিক্রিয়াশীল হিসাবে সেট করা হয়েছে যার অর্থ এই ভিডিওটি তার মূল উপাদানের প্রস্থ পূরণ করবে।

YouTube উপাদান সম্পর্কে আরও জানুন।

দ্রষ্টব্য : ইউটিউব কম্পোনেন্ট ছাড়াও, AMP-তে amp-video নামে একটি জেনেরিক HTML5 ভিডিও কম্পোনেন্ট এবং Brightcove ভিডিও ক্লাউড বা amp-brightcove নামে একটি AMP কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে। Facebook ভিডিও, Instagram, Vine, Twitter এবং Dailymotion সহ আরও ভিডিও প্লেব্যাক উদাহরণের জন্য " AMP By Example " দেখুন।

দ্রষ্টব্য : কোনও কম্পোনেন্ট লোড না হলে তথ্য প্রদানের জন্য ফলব্যাক অ্যাট্রিবিউটটি কার্যকর। ব্যবহারকারীর ব্রাউজার যদি কোনও নির্দিষ্ট 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 অ্যাট্রিবিউটটিকে পৃষ্ঠায় এম্বেড করার জন্য একটি নির্দিষ্ট টুইটের সাথে সম্পর্কিত হিসাবে স্বীকৃতি দেয়।

আপনার ব্রাউজার রিফ্রেশ করুন এবং পৃষ্ঠাটি দেখুন। আপনি টুইটটি দেখতে পাবেন:

টুইটার উপাদান সম্পর্কে আরও জানুন।

দ্রষ্টব্য : সামাজিক নেটওয়ার্ক থেকে কন্টেন্ট এম্বেড করার জন্য AMP-তে আরও অনেক উপাদান রয়েছে। Instagram উপাদান এবং Vine উপাদানটি দেখুন।

একটি নিবন্ধের উদ্ধৃতি হাইলাইট করুন

সংবাদ নিবন্ধের একটি সাধারণ উপাদান হল নিবন্ধের আকর্ষণীয় অংশগুলিকে তুলে ধরা। উদাহরণস্বরূপ, পাঠকের দৃষ্টি আকর্ষণ করার জন্য কোনও নির্দিষ্ট উৎস থেকে উদ্ধৃতি বা কোনও গুরুত্বপূর্ণ তথ্য বড় অক্ষরে পুনরাবৃত্তি করা যেতে পারে।

তবে, যেহেতু সমস্ত উদ্ধৃতি বা লেখার স্নিপেটগুলি একই দৈর্ঘ্যের স্ট্রিং অক্ষর নয়, তাই পৃষ্ঠায় নির্দিষ্ট লেখাটি যে পরিমাণ স্থান গ্রহণ করবে তার সাথে বৃহত্তর ফন্টের আকারের ভারসাম্য বজায় রাখা কঠিন হতে পারে।

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 এর লেআউট সিস্টেম সম্পর্কে আপনি যা জানেন তা জেনে ডকুমেন্ট সম্পাদনা করার আগে প্রশ্নের উত্তর দেওয়ার চেষ্টা করুন!

৭. জটিল ক্যারোসেল

ওয়েব ডেভেলপমেন্টের আরেকটি সাধারণ বৈশিষ্ট্য হল ক্যারোজেল। এএমপিতে এই চাহিদা পূরণের জন্য ডিজাইন করা একটি জেনেরিক উপাদান রয়েছে। আসুন একটি সহজ উদাহরণ দিয়ে শুরু করি, যেমন ছবির ক্যারোজেল।

আপনার ডকুমেন্টের <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 পরিবর্তন করার চেষ্টা করুন এবং ফলাফলটি দেখুন। responsive হওয়ার জন্য amp-carousel layout অ্যাট্রিবিউট এবং এর ভিতরের ছবিগুলি পরিবর্তন করতে ভুলবেন না।

এখন স্ক্রলিং এলিমেন্টের তালিকার পরিবর্তে আপনি একবারে একটি এলিমেন্ট দেখতে পাবেন। এলিমেন্টগুলির মধ্য দিয়ে যাওয়ার জন্য অনুভূমিকভাবে সোয়াইপ করার চেষ্টা করুন। আপনি যদি তৃতীয় এলিমেন্টে সোয়াইপ করেন তবে আপনি আর সোয়াইপ করতে পারবেন না।

এরপর, loop অ্যাট্রিবিউট যোগ করুন । পৃষ্ঠাটি রিফ্রেশ করুন এবং অবিলম্বে বাম দিকে সোয়াইপ করার চেষ্টা করুন। ক্যারোজেলটি অবিরাম লুপ করে।

সবশেষে, আসুন এই ক্যারোজেলটি প্রতি ২ সেকেন্ডে অটোপ্লে করি। পৃষ্ঠায় autoplay অ্যাট্রিবিউট এবং ২০০০ মান সহ ডিলে অ্যাট্রিবিউট যোগ করুন : 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>

পৃষ্ঠাটি রিফ্রেশ করুন এবং এটিকে একবার ঘুরে দেখুন!

দ্রষ্টব্য : আপনি হয়তো লক্ষ্য করেছেন যে আমরা ক্যারোজেলে লেআউট টাইপ fixed-height ব্যবহার করছি। এটি carousel টাইপের জন্য প্রয়োজনীয়, যখন slides টাইপের জন্য responsive লেআউট টাইপ প্রয়োজন। ফিক্সড-হাইট এলিমেন্টগুলি তাদের জন্য উপলব্ধ জায়গা দখল করে কিন্তু উচ্চতা অপরিবর্তিত রাখে। উচ্চতা অ্যাট্রিবিউটটি অবশ্যই সংজ্ঞায়িত করতে হবে যখন প্রস্থ অ্যাট্রিবিউটটি উপস্থিত থাকা উচিত নয় অথবা fixed-height কাজ করার জন্য অটোতে সেট করা উচিত।

ছবির ক্যারোজেলগুলো দারুন, কিন্তু যদি আমরা চাই আমাদের ক্যারোজেলে আরও জটিল কন্টেন্ট আসুক? চলুন, একটি বিজ্ঞাপন, কিছু টেক্সট এবং একটি ছবি একসাথে রেখে সবকিছুকে একটু মিশ্রিত করার চেষ্টা করি। amp-ক্যারোজেল কি সত্যিই একসাথে এতগুলো মিশ্রণ পরিচালনা করতে পারে? আপনি নিশ্চিত।

প্রথমে আসুন পৃষ্ঠায় এই স্টাইলিংটি যুক্ত করি যাতে 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>

পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি এরকম কিছু দেখতে পাবেন:

ক্যারোজেল উপাদান সম্পর্কে আরও জানুন।

দ্রষ্টব্য : আমাদের আগের উদাহরণে আপনি হয়তো লক্ষ্য করেছেন যে amp-ad কম্পোনেন্টে placeholder অ্যাট্রিবিউট সহ একটি চাইল্ড ডিভ এলিমেন্ট অন্তর্ভুক্ত ছিল। যদি আপনার মনে থাকে আমরা কোডল্যাবে fallback সিস্টেমের সাথে amp-ad এর সাথে একই রকম পরিস্থিতির সম্মুখীন হয়েছিলাম। প্লেসহোল্ডার এবং ফলব্যাকের মধ্যে পার্থক্য কী? প্যারেন্ট এলিমেন্ট লোড না হলে, অর্থাৎ যদি কোনও বিজ্ঞাপন উপলব্ধ না থাকে, তাহলে Fallback এলিমেন্টগুলি উপস্থিত হয়। যেখানে লোড হওয়ার সময় প্যারেন্ট এলিমেন্টের জায়গায় placeholder এলিমেন্টগুলি উপস্থিত হয়। এক অর্থে, প্রতিটি অ্যাট্রিবিউট প্যারেন্ট এলিমেন্টের লোডিং প্রক্রিয়াকে বুকএন্ড করে।

গুরুত্বপূর্ণ : দুর্ভাগ্যবশত, amp-ad কম্পোনেন্টটি পর্দার আড়ালে একটি iframe ব্যবহার করে যা ক্যারোজেলের সোয়াইপিং অঙ্গভঙ্গিতে হস্তক্ষেপ করতে পারে। এটি একটি পরিচিত সমস্যা যা তদন্ত করা হচ্ছে।

৮. অ্যাম্প-অ্যানালিটিক্স সহ ট্র্যাক করুন

অ্যানালিটিক্স প্ল্যাটফর্মগুলি সাধারণত ইনলাইন জাভাস্ক্রিপ্ট স্নিপেট এবং ফাংশন কলের মাধ্যমে ওয়েবসাইটগুলিতে একীভূত করা হয় যা ইভেন্টগুলিকে ট্রিগার করে এবং অ্যানালিটিক্স সিস্টেমে ফেরত পাঠানো হয়। AMP বিভিন্ন অ্যানালিটিক্স অংশীদারদের জন্য এই প্রক্রিয়াটি প্রতিলিপি করার জন্য একটি নমনীয় JSON কনফিগারেশন সিনট্যাক্স প্রদান করে।

নিচে ঐতিহ্যবাহী জাভাস্ক্রিপ্ট চালিত গুগল অ্যানালিটিক্স ট্র্যাকিংয়ের একটি উদাহরণ দেওয়া হল, যা আমরা amp-analytic এর JSON ফর্ম্যাটে পুনর্লিখন করব। প্রথমত, ঐতিহ্যবাহী জাভাস্ক্রিপ্ট পদ্ধতি:

<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 ফর্ম্যাটে ট্রিগার কী-তে এমন কিছু কী থাকে যা আমরা যে সমস্ত ইভেন্ট ট্রিগার ট্র্যাক করব তার প্রতিনিধিত্ব করে, সেই ট্রিগারগুলির কীগুলি হল ইভেন্টের বর্ণনা, উদাহরণস্বরূপ উপরে "ডিফল্ট পৃষ্ঠা দর্শন"। শিরোনাম কী মানটি দেখা পৃষ্ঠার নামের সাথে সম্পর্কিত।

উপরের উদাহরণটি প্রসারিত করে আমরা আরেকটি ট্রিগার যোগ করতে পারি "#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" আইডি সহ একটি ট্যাগের জন্য অনুসন্ধান করতে পারি এবং ডিভাইসে এটি "ক্লিক" বা ট্যাপ করা হলে আমরা "examples" বিভাগ লেবেল সহ বিশ্লেষণ প্ল্যাটফর্মে একটি ইভেন্ট অ্যাকশন "clicked-header" পাঠাই।

যদি আপনার কাছে এমন একটি কাস্টম ট্র্যাকিং প্ল্যাটফর্ম থাকে যার সাথে আপনি একীভূত করতে চান, তাহলে আপনি এখনও amp-analytics ব্যবহার করতে পারেন এবং ট্র্যাকিং তথ্যের জন্য আপনার নিজস্ব ব্যক্তিগতকৃত URL এন্ডপয়েন্ট নির্ধারণ করতে পারেন। amp-analytics উপাদান সম্পর্কে আরও পড়ুন এখানে !

দ্রষ্টব্য : এই সমস্ত বিশ্লেষণ উদাহরণে "UA-YYYY-Y" আপনার নিজস্ব ওয়েবসাইটের Google Analytics ট্র্যাকিং কোড দিয়ে প্রতিস্থাপন করা উচিত।

দ্রষ্টব্য : যদি আপনি আরও সহজ ট্র্যাকিং সিস্টেমে আগ্রহী হন, তাহলে আপনি amp-pixel দেখে নিতে পারেন। যদি আপনার কেবল পৃষ্ঠার ভিউ ট্র্যাক করার প্রয়োজন হয়, তাহলে এটি amp-analytics এর তুলনায় হালকা সমাধান কারণ এটি শুধুমাত্র ঐতিহ্যবাহী পিক্সেল ট্র্যাকিংয়ের প্রয়োজনীয়তাগুলি সমাধান করার লক্ষ্য রাখে। এটি সম্পর্কে আরও পড়ুন এখানে !

গুরুত্বপূর্ণ : অ্যানালিটিক্স কম্পোনেন্টটি এখনও কাজ চলছে। অ্যাম্প-অ্যানালিটিক্স কম্পোনেন্টটি বিকশিত হওয়ার সাথে সাথে আরও অ্যানালিটিক্স প্ল্যাটফর্ম আসবে এবং আরও ধরণের ইভেন্ট ট্র্যাক করা হবে। সর্বশেষ তথ্যের জন্য রেফারেন্স ডকুমেন্টটি পড়ুন।

৯. আপনার সাইট নেভিগেট করা

মোবাইল ওয়েবসাইটের একটি সাধারণ প্রয়োজনীয়তা হল সাইট নেভিগেশন মেনু অন্তর্ভুক্ত করা। এই মেনুগুলি বিভিন্ন রূপ নিতে পারে। AMP ডকুমেন্টে নেভিগেশন কীভাবে উপস্থাপন করা যেতে পারে তার কয়েকটি উদাহরণ এখানে দেওয়া হল:

1. আপনার হোম পেজে ফিরে লিঙ্ক করুন - সবচেয়ে সহজ বিকল্প।
2. ক্যারোজেল কম্পোনেন্টের মাধ্যমে একটি উপ-শিরোনাম মেনু।

হোম পেজ লিঙ্ক

আপনার ব্যবহারকারীদের আপনার ওয়েবসাইটের নিয়মিত নেভিগেশন বিকল্পগুলি অ্যাক্সেস করার সবচেয়ে সহজ উপায় হল তাদের আপনার নিয়মিত ওয়েবসাইট ইন্টারফেসে ফিরিয়ে আনা!

<header> ট্যাগে এই HTML লিঙ্কটি যোগ করার চেষ্টা করুন:

<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 ডকুমেন্টের ভিতরে উপস্থাপন করা। আপনার পৃষ্ঠার একটি ছোট অংশে সীমাবদ্ধ রাখতে আমরা সাইটের হেডারের নীচে একটি স্ক্রোলযোগ্য মেনু উপস্থাপন করতে একটি ক্যারোজেল ব্যবহার করতে পারি।

যেহেতু আমাদের ক্যারোজেল কম্পোনেন্টের প্রয়োজন, তাই আপনার পেজের <head> ট্যাগে কম্পোনেন্টের জাভাস্ক্রিপ্ট যোগ করতে ভুলবেন না:

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

আপনার <header> ট্যাগের ঠিক নীচে এই HTML স্নিপেটটি যোগ করার চেষ্টা করুন:

...
</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;
}

এবার পৃষ্ঠাটি রিফ্রেশ করুন । আপনার নিবন্ধের শিরোনামের নিচে লিঙ্কগুলির একটি মেনু দেখতে পাবেন। এই মেনুটি অনুভূমিকভাবে স্ক্রোল করে অনেক নেভিগেশন লিঙ্ক সংরক্ষণ করা যেতে পারে।

এই সাব-মেনু নেভিগেশনটি আপনার পৃষ্ঠায় খুব বেশি জায়গা না নিয়ে প্রচুর লিঙ্ক সংরক্ষণ করার একটি দুর্দান্ত উপায়।

১০. ফন্ট যোগ করা

যেমনটি আগে আলোচনা করা হয়েছে, AMP ডকুমেন্টে কোনও বহিরাগত স্টাইলশিট অনুরোধ অনুমোদিত নয়। তবে, এই নিয়মের একটি ব্যতিক্রম আছে: ফন্ট।

ওয়েব ব্যবহারকারীদের জন্য নিবন্ধ পড়ার অভিজ্ঞতার ক্ষেত্রে ফন্ট একটি গুরুত্বপূর্ণ অংশ এবং যেহেতু ওয়েব ব্রাউজারগুলি বহিরাগত স্টাইলশিট অনুরোধের মাধ্যমে ফন্ট ফাইলগুলি নিয়ে আসে, তাই AMP-তে এই বর্জনটি প্রয়োজনীয়।

ডকুমেন্টে Raleway ফন্টের একটি রেফারেন্স যোগ করার চেষ্টা করা যাক:

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

এখন Raleway-এর রেফারেন্স অন্তর্ভুক্ত করার জন্য আপনার CSS আপডেট করুন:

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

আপনার পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনার পৃষ্ঠার নতুন চেহারাটি দেখুন। এছাড়াও যাচাইকারীর আউটপুটটি পরীক্ষা করুন এবং আপনি লক্ষ্য করবেন যে এই বহিরাগত অনুরোধ সম্পর্কে কোনও অভিযোগ নেই।

দ্রষ্টব্য : আপনার ডকুমেন্টে একটি ফন্ট অন্তর্ভুক্ত করার জন্য কোনও অতিরিক্ত উপাদানের প্রয়োজন হয় না। তা সত্ত্বেও, আসলে amp-font নামে একটি উপাদান রয়েছে। এটি আসলে ওয়েব ফন্ট লোড করার জন্য ব্যবহৃত হয় না, পরিবর্তে আপনি এটি ব্যবহার করে একটি ওয়েব ফন্ট সফলভাবে লোড হয়েছে কিনা তা সনাক্ত করতে এবং প্রয়োজনে যথাযথভাবে প্রতিক্রিয়া জানাতে পারেন।

এই বৈশিষ্ট্যটি ব্যবহার করে আপনি আপনার টেক্সট লুকাতে পারেন যতক্ষণ না আপনার ফন্ট সম্পূর্ণরূপে লোড হয়, যাতে ব্যবহারকারী টেক্সটটি তার অস্থায়ী ফন্ট থেকে তার আসল ফন্টে স্ন্যাপ করতে না পারে। যদি ফন্টটি ব্যর্থ হয় তবে আপনি কেবল অস্থায়ী ফন্টটি প্রকাশ করতে চাইতে পারেন। সর্বোপরি, সবচেয়ে খারাপ পরিস্থিতি হবে যদি ব্যবহারকারী কোনও টেক্সট পড়তে না পান! amp-font সম্পর্কে আরও পড়ুন এখানে ।

১১. অভিনন্দন!

আপনি অ্যাডভান্সড এএমপি কোড ল্যাব শেষ করেছেন এবং এএমপির অনেক মূল উপাদান সফলভাবে অন্বেষণ করেছেন!

আশা করি আপনার কাছে এটা স্পষ্ট হয়ে গেছে যে কিভাবে amp-ad এবং amp-analytics বিভিন্ন ধরণের বিজ্ঞাপন প্ল্যাটফর্ম এবং বিশ্লেষণ বিক্রেতাদের সমর্থন করার জন্য ব্যবহার করা যেতে পারে। উপলব্ধ AMP উপাদানগুলির সম্পূর্ণ তালিকাটি অবশ্যই অন্বেষণ করুন।

আপনার দক্ষতা আরও বৃদ্ধি করার জন্য নীচে কিছু অতিরিক্ত বিষয় এবং লিঙ্ক দেওয়া হল যা আপনি অন্বেষণ করতে চাইতে পারেন!

• AMP By Example - AMP উপাদান এবং উপাদান প্যাটার্নের উদাহরণের একটি বিস্তৃত ক্যাটালগ।
• ডাবল ক্লিক বিজ্ঞাপনের উদাহরণ - অ্যাম্প-বিজ্ঞাপনের উদাহরণের একটি বিস্তৃত ক্যাটালগ।
• পেজ ডিসকভারি সম্পর্কে সবকিছু
• অননুমোদিত HTML ট্যাগ
• সীমাবদ্ধ CSS নিয়ম এবং অ্যানিমেশন
• আইফ্রেম সম্পর্কে আরও তথ্য
• এএমপি সিডিএন
• উপলব্ধ AMP উপাদানগুলির তালিকা