نمایش دادن notification روی دسکتاپ کاربر در وردپرس

563 بازدید
شنبه ۶ شهریور ۱۳۹۵

نمایش دادن notification روی دسکتاپ

حتما تا به حال notification هایی که از طرف سایت های بزرگی مثل فیسبوک و لینکداین در دسکتاپ شما ظاهر میشوند را دیده اید. شاید این سوال برایتان پیش آمده باشد که چطور این notification یا اطلاعیه ها را میتوانید از طرف سایت وردپرسی تان برای کاربران خود نمایش دهید. این اعلان ها هر وقت که شما بخواهید حتی در زمانی که مرورگر کاربر باز نیست، میتواند روی دسکتاپ به نمایش در بیاید. پس یکی از روش های بسیار خوب مارکتینگ و بازاریابی به شمار می رود. در این مطلب از وب تستر میخواهیم نحوه نمایش دادن notification روی دسکتاپ کاربر را به شما آموزش بدهیم. با ما همراه باشید.

چرا باید notification سایت خود را روی دسکتاپ کاربر نشان دهیم؟

notification های وب، پیام های قابل کلیکی هستند که در بالای دسکتاپ کاربر ظاهر می شوند. این پیام ها حتی در زمانی که مرورگر باز نباشند هم ایجاد میشوند.

آموزش ایجاد web push notification

این پیغام ها که در انگلیسی به آن Web push notification گفته می شود، در مرورگر های موبایل هم میتوانند باز شوند.

سایت های معروف مثل فیسبوک، توییتر، لینکداین و … از این Web push notification ها استفاده میکنند. به نظر میرسد بازاریابی با این اعلانیه ها از اس ام اس و ایمیل پربازده تر باشد. بر اساس یکی از تحقیقات، ۵۰ درصد از کاربران موبایل، این اطلاعیه ها را باز می کنند.

این به این معنی است که بازدید سایت شما با شتاب بیشتری افزایش می یابد.

پس از اینکه از مزایای این قابلیت آگاه شدیم، بیایید ببینیم چطور میتوانیم یک اطلاعیه از طرف سایتمان را در دسکتاپ کاربر نمایش دهیم.

فعال کردن Web push notification در وردپرس با OneSignal

OneSignal سرویس رایگانی است که اجازه ایجاد notification در هر سایت یا اپ موبایلی را به شما می دهد.

در اولین قدم افزونه OneSignal را نصب و فعال کنید. برای اطلاعات بیشتر، راهنمای کامل نصب و فعالسازی افزونه های وردپرس را ببینید.

پس از فعال کردن افزونه، یک بخش جدید تحت عنوان OneSignal Push به منوی پیشخوان شما اضافه می شود. روی آن کلیک کنید تا وارد صفحه تنظیماتش شوید.

نمایش دادن notification روی دسکتاپ

صفحه تنظیمات به دو تب Setup و Configuration تقسیم شده است. تب Setup شامل یک راهنما برای راه اندازی notification های شما است. ما در این آموزش همه چیزهایی که گفته شده را آموزش میدهیم.

برای فعال کردن OneSignal باید API key و application ID های مختلفی را دریافت کرده و در صفحه تنظیمات افزونه وارد کنید.

بیایید ببینیم نحوه نمایش دادن notification روی دسکتاپ از طریق وردپرس به چه صورتی قابل انجام است.

قدم اول: ساختن Google Key

در ابتدا باید به سایت Google Services Wizard بروید. توجه داشته باشید که این سایت در حال حاضر برای ایرانی ها تحریم است و باید از روش های دور زدن آی پی که حتما همه تان میدانید! استفاده کنید.

ساختن Google Key

در قسمت App name یک نام برای اپ یا سرویس خود ایجاد کنید. همچنین در قسمت Android package name هم نامی انتخاب کنید. OneSignal از نامی که در قسمت Android package name وارد میکنید استفاده نمی کند. اما به هر حال این فیلد یک فیلد ضروری است.

از قسمت Your country/region باید کشور خود را انتخاب کنید. در نهایت روی دکمه ‘Choose and configure services’ کلیک کنید.

وارد صفحه ای میشوید که از شما میخواهد سرویس های گوگلی که نیاز دارید در پروژه تان استفاده کنید را انتخاب کنید. باید روی دکمه ‘Enable Google Cloud Messaging’ کلیک کنید.

نمایش دادن notification روی دسکتاپ کاربر

اکنون server API key و Sender ID خود را میبینید.

نمایش notification روی دسکتاپ کاربر در وردپرس

این دو عبارت را در جایی ذخیره کنید چون بعدا به آن ها نیاز داریم.

قدم دوم: تنظیم Notification های گوگل کروم و فایرفاکس

حالا notification ها را در کروم و فایرفاکس تنظیم میکنیم. در ابتدا باید به سایت OneSignal بروید و اکانت خود را به صورت رایگان ایجاد کنید.

پس از اینکه عضو شدید، باید وارد پنل خود شوید و روی دکمه ‘Add a new app’ کلیک کنید.

نشان دادن notification روی دسکتاپ کاربر در وردپرس

پس از اینکه روی این دکمه کلیک کردید، یک کادر پاپ آپ برای شما باز می شود که باید یک نام دلخواه برای App خود وارد کنید. هر نامی میخواهید وارد کنید. سپس روی دکمه Create کلیک کنید.

ایجاد اعلان در دسکتاپ کاربر در وردپرس

در صفحه بعد روی دکمه Website Push کلیک کنید.

آموزش افزونه OneSignal

در مرحله بعد باید پلتفرم مرورگر را انتخاب کنید. در یک باکس گوگل کروم و فایرفاکس را میبینید و در باکسی دیگر، سافاری را. باید روی باکس Google Chrome and Mozilla Firefox کلیک کنید. نحوه انجام تنظیمات برای سافاری را بعدا در همین مطلب توضیح میدهیم.

نشان دادن اطلاعیه در دسکتاپ کاربر از طرف سایت

سپس روی دکمه Next کلیک کنید.

در گام بعدی باید آدرس سایت وردپرسی خود، Google Server API key و URL عکس آیکون پیشفرض خود برای notification را وارد کنید.

نشان دادن notification روی دسکتاپ کاربر

اگر سایت شما از SSL/HTTPS پشتیبانی نمیکند باید تیک گزینه My site is not fully HTTPS را بزنید.

گوگل کروم از سیستم web push notification برای سایت هایی که https نیستند پشتیبانی نمیکند. اما OneSignal با روشی این مشکل را برطرف کرده است.

در صورتی که تیگ گزینه My site is not fully HTTPS را بزنید، تنظیمات HTTP fallback برای شما باز می شود. در اینجا از قسمت Choose Subdomain باید یک سابدامین برای خود انتخاب کنید. فرقی نمیکند چه بنویسید. بهتر است نام سایت خودتان را بنویسید.

سپس در قسمت Google Project Number باید Sender ID که در قدم اول دریافت کرده بودید را بنویسید. اگر یادتان باشد در قدم اول دو عبارت دریافت کرده بودید که گفتیم آنها را در جایی ذخیره کنید تا بعدا استفاده کنیم. یکی از آن دو عبارت Sender ID بود.

نشان دادن اطلاعیه روی دسکتاپ کاربر در وردپرس

حال روی دکمه Save کلیک کنید. سپس کادر را با کلیک کردن روی علامت ضربدر ببندید. در کادری که برایتان باز شد روی دکمه Yes کلیک کنید تا بسته شود.

قدم سوم: دریافت OneSignal Key

اکنون باید OneSignal Key را برای سایت خود دریافت کنید. از dashboard اپ خود روی App Settings کلیک کنید.

تنظیمات اپ در OneSignal

وارد صفحه تنظیمات اپ میشوید. در این صفحه روی تب Keys & IDs کلیک کنید.

نشان دادن notification روی دسکتاپ کاربر در وردپرس

حال OneSignal App ID و Rest API Key خود را میبینید.

OneSignal

این دو عبارت را باید در تب Configuration از صفحه تنظیمات افزونه OneSignal در سایت خود وارد کنید. در همان ابتدای صفحه تنظیمات افزونه دو فیلد با نام های App ID و Rest API Key قرار گرفته که باید پر شوند. به علاوه حواستان باشد که در فیلد OneSignal Subdomain هم باید سابدامینی که در قدم دوم ایجاد کرده بودید را وارد کنید.

قدم چهارم: فعال کردن نوتیفیکیشن برای سافاری

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

وارد اکانت OneSignal خود شده و روی دکمه App Settings کلیک کنید. در صفحه App Settings به پایین اسکرول کنید تا به بخش web platforms برسید. سپس روی دکمه Configure موجود در کنار گزینه Apple Safari کلیک کنید.

نشان دادن اطلاعیه در دسکتاپ کاربر در سافاری

کادری برای شما باز میشود که باید نام سایت و آدرس سایت خود را در آن وارد کنید.

نشان دادن notification روی دسکتاپ کاربر در وردپرس

حالا باید تیک کنار گزینه I’d like to upload my own notification icons را بزنید.

کادری برای شما باز میشود که در آن باید آیکون اعلانیه خود را در سایز های مختلف آپلود کنید. این آیکون هنگامی که notification روی دسکتاپ ظاهر میشود، به نمایش در می آید. از فتوشاپ یا هر نرم افزار ویرایش تصویر دیگری میتوانید استفاده کنید تا آیکون را به سایز مورد نظر در آورید. سپس روی دکمه Choose File کلیک کنید تا آن را آپلود کنید.

نمایش notification روی دسکتاپ

روی دکمه Save کلیک کنید. سپس کادر را ببندید.

صفحه App Settings را رفرش کنید و دوباره به پایین اسکرول کنید تا به بخش Web Platforms برسید. حالا Web ID خود را در زیر Apple Safari میبینید.

Web ID

حالا این Web ID را کپی کنید و در صفحه تنظیمات افزونه OneSignal در تب Configuration وارد فیلد Safari Web ID بکنید.

تمام شد! حالا Web Push notification شما فعال شده است.

قدم پنجم: تست کردن Web Push Notification در سایت وردپرسی شما

به صورت پیشفرض OneSignal یک دکمه اشتراک به سایت شما اضافه می کند. سایت خود را با یکی از مرورگر های پشتیبانی شده (کروم، فایرفاکس، سافاری) باز کنید و روی دکمه subscribe کلیک کنید.

فعال کردن سیستم نمایش اطلاعیه در دسکتاپ کاربر از طرف وردپرس

پیغام ‘thank you for subscribing’ برای شما نمایش داده می شود.

حالا وارد اکانت OneSignal خود شوید و روی نام اپ خودتان کلیک کنید. سپس روی گزینه App Settings کلیک کنید. به پایین اسکرول کنید تا به بخش web platforms برسید. سپس روی دکمه Configure موجود در جلوی گزینه Google Chrome and Firefox کلیک کنید.

نشان دادن اطلاعیه روی دسکتاپ کاربر

بخش تنظیمات پلتفرم خود که قبلا کامل کرده بودید را میبینید. روی دکمه Save کلیک کنید. سپس روی دکمه Continue کلیک کنید.

OneSignal

در مرحله بعد روی دکمه Wordoress کلیک کنید.

testing web push

روی دکمه Next کلیک کنید تا وارد گام Test Settings شوید.

روی دکمه Send Test Notification کلیک کنید.

فرستادن notification به دسکتاپ کاربر از طرف وردپرس

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

فرستادن اطلاعیه به کاربران در وردرپرس

این کار شما را به صفحه ای هدایت میکند که پیغام موفقیت آمیز بودن نصب Web Push Notification را در آن می بینید.

آزمایش کردن web push notification

نحوه نمایش دادن notification روی دسکتاپ کاربران وردپرس با OneSignal

این افزونه به صورت خودکار، پس از هر مطلبی که منتشر میکنید، یک اطلاعیه یا notification به همه کاربرانی که مشترک شده اند ارسال می کند.

شما همچنین میتوانید یک اطلاعیه را به صورت دستی و دلخواه برای کاربرانتان بفرستید. وارد اکانت OneSignal خود شوید و روی نام اپ خود کلیک کنید. از منوی سمت چپ روی دکمه New Message کلیک کنید.

ارسال notification در وردپرس به کاربران

پنجره ای برای شما باز می شود که باید عنوان و متن اعلانیه خود را وارد کنید.

نشان دادن نوتیفیکیشن به کاربران در دسکتاپ

همچنین میتوانید روی گزینه های Options, Segment, Schedule/Send Later کلیک کنید تا شخصی سازی بیشتری انجام دهید. مثلا یک لینک برای نوتیفیکیشن خود ایجاد کنید تا آن را زمانبندی کنید و … .

امیدواریم که از آموزش نمایش دادن notification روی دسکتاپ لذت برده باشید.

تبلیغات

نویسنده (مدیر سایت)

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

9 دیدگاه برای “نمایش دادن notification روی دسکتاپ کاربر در وردپرس”

  1. رضا جی کی گفت:

    خیلی مفید و جامع بود
    ممنون

  2. masoud گفت:

    سلام
    ببخشید سایت Google Services Wizard من با دور زدن هم امتحان کردم ولی باز نمیشه صفحه ۴۰۳ میزنه . با vps هم زدم اونجا هم ۴۰۳ میزنه.
    میشه راهنمایی کنید؟؟؟
    اگر شما دسترسی دارید آیا امکانش هست شما API Key برای ما درست کنید ؟؟

    1. جواد نبوی گفت:

      سلام عزیز
      متاسفانه ما هم در حال حاضر دسترسی به این سایت نداریم.
      نمیدونم مشکل از کجاست اما در حال حاضر حتی با ویپی N هم نتونستیم باز کنیم.
      به نظرم چند روز صبر کنید شاید مشکل برطرف بشه

  3. ashkan گفت:

    سلام و درود و خسته نباشید.
    ممنونم از مطلب بسیار ارزشمندتون
    متاسفانه در تنظیمات قسمت EDIT APP DEMO MY WEBSITE هستش که شما بهش اشاره ای نکردید
    اولا بعد از وارد کردن ساب دامین برخلاف تصویری که شما گذاشتید بخشی برای وارد کردن Sender ID وجود نداره و بعدش مستقیم میره به SAVE و سپس نصب SDK که این نصب SDK تبدیل به مشکل شده و اصلا مشخصی نیستش به چه نحو باید عمل بشه ممنون میشم دوباره بررسی بفرمائید.

    1. جواد نبوی گفت:

      سلام عزیز
      خواهش می کنم
      اون قسمتی که فرمودید در تنظیمات هست رو نیازی نداریم.
      ولی در مورد وارد کردن Sender ID شما باید این عبارت رو در فیلد Google Project Number وارد کنید. اگر این فیلد وجود ندارد، احتمالا به دلیل تغییرات در خود سایت onesignal هست و زمانی که ما این مطلب را نوشتیم نحوه کار به این صورت بود. نیازی هم به انجام تنظیمات sdk نیست.
      با آرزوی موفقیت برای شما

  4. سارا مرادی گفت:

    سلام و ممنون از آموزش خوبتون من همه تنظیمات رو انجام دادم مرحله به مرحله و الحمداله موفقیت آمیز بود چطور میتونم پیغام پاپ اپ دعوت نامه رو شخصی سایزی کنم برخی سایت ها مثل مارکت وردپرس یا جومینا پیغام اون بالا رو شخصی سازی میکنند اما مال من یه پیغام به صورت انگلیسی میاد؟
    لطفا راهنمایی ام کنید
    با آرزوی بهترین ها

    1. جواد نبوی گفت:

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

  5. میلاد گفت:

    سلام چطوری افزونه رو فارسیش کنم؟

    1. جواد نبوی گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *