AMP ওয়েব পুশ

AMP হল একটি ওপেন-সোর্স গুগল ফ্রেমওয়ার্ক যা ব্যবহারকারী-প্রথম ওয়েব পেজ তৈরির জন্য ব্যবহৃত হয়, যা প্রায় সঙ্গে সঙ্গে লোড হয়।

আপনার AMP ওয়েব পেজগুলিতে AMP ওয়েব পুশ কম্পোনেন্ট সংহত করে, আপনি আপনার গ্রাহকদের কাছে পৌঁছাতে পারবেন যখন তারা তাদের মোবাইল ব্রাউজারে ওয়েব সার্ফিং করছেন।

আপনার ওয়েবসাইটে AMP সংহত করুন

আপনার ওয়েবসাইটের রুট ডিরেক্টরিতে নিম্নলিখিত ফাইলগুলি যোগ করুন:

permission-dialog.html ফাইলে দুটি কাস্টমাইজযোগ্য ব্লক রয়েছে:

<div class="subscribe" permission="default">
    <p class="message">
    {Subscribe to push notifications}
    </p>
</div>

<div class="blocked" permission="denied">
    <p class="message">
    {Unblock push notifications in your browser settings}
    </p>
</div>

যেখানে:

{Subscribe to push notifications} — একটি CTA বার্তা যা ব্যবহারকারীদের পুশ নোটিফিকেশনের অনুমতি দিতে বলে;
{Unblock push notifications in your browser settings} — একটি CTA বার্তা যা ব্যবহারকারীদের তাদের ব্রাউজার সেটিংসে পুশ নোটিফিকেশন আনব্লক করতে অনুরোধ করে (যদি পুশ নোটিফিকেশন ব্যবহারকারী দ্বারা স্পষ্টভাবে ব্লক করা থাকে)।

পারমিশন ডায়ালগের চেহারা কাস্টমাইজ করতে, <head> ট্যাগে নিম্নলিখিত কোডটি যোগ করুন:

 <style amp-custom>
    .subscribe {
        /* your css here */
    }

    .blocked {
        /* your css here */
    }
</style>

AMP ওয়েব পুশ সংহত করুন

AMP পেজগুলিতে ওয়েব পুশ নোটিফিকেশন প্রয়োগ করতে, প্রতিটি AMP পেজে amp-web-push কম্পোনেন্ট যোগ করুন।

এটি করার জন্য, এই দুটি ধাপ অনুসরণ করুন:

১. <head> ট্যাগে নিম্নলিখিত স্ক্রিপ্টটি যোগ করুন:

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

২. <body> ট্যাগে নিম্নলিখিত কোডটি যোগ করুন:

<body>
    <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://{domain}/helper-iframe.html"
                 permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
    ></amp-web-push>
    ...
    <!-- Start Subscribe to notifications button -->
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
        {Text on Subscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End the Subscribe to notifications button -->
    <!-- Start Unsubscribe from notifications button -->
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
        {Text on Unsubscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End Unsubscribe from notifications button -->
    <!-- Start Fallback if a user blocks notifications -->
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
    <div class="fallback">
            {Fallback if a user blocks notifications}
        </div>
    </amp-web-push-widget>
    <!-- End Fallback if a user blocks notifications -->
...
</body>

যেখানে:

{domain} — আপনার ওয়েবসাইটের URL,
{applicationCode} — আপনার Pushwoosh অ্যাপ কোড,
{senderId} — আপনার Firebase কনসোল থেকে Sender ID,
{applicationServerKey} — আপনার Firebase কনসোল থেকে Server Key,
{Text on Subscribe button} — পুশ নোটিফিকেশন সক্রিয় করার জন্য একটি বাটনের উপর টেক্সট,
{Text on Unsubscribe button} — পুশ নোটিফিকেশন নিষ্ক্রিয় করার জন্য একটি বাটনের উপর টেক্সট,
{Fallback if a user blocks notifications} — একটি ফলব্যাক ব্লক যা ব্যবহারকারী পুশ নোটিফিকেশন ব্লক করলে প্রদর্শিত হয়।

বাটনগুলির স্টাইল কাস্টমাইজ করতে, <head> ট্যাগে নিম্নলিখিত কোডটি যোগ করুন:

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* your css here */
    }
    amp-web-push-widget button.unsubscribe {
        /* your css here */
    }
    amp-web-push-widget .fallback {
        /* your css here */
    }
</style>

আপনি সবকিছু ঠিকঠাক করেছেন কিনা তা পরীক্ষা করতে, অনুগ্রহ করে https://search.google.com/test/amp ব্যবহার করুন।