آموزش افزودن Push Notification به وردپرس با افزونه OneSignal

آموزش افزودن Push Notification به وردپرس با افزونه OneSignal

آیا تا به حال با Push Notification های استفاده شده در فیسبوک و دیگر سایت‌ها برخورد کرده‌اید؟ اخیرا یکی از کاربران ما پرسیده است که آیا می‌توان Push Notification ها را به وردپرس نیز افزود؟ قطعا که اینکار عملی است و ما در این مقاله به شما نشان خواهیم داد که چگونه Push Notification را به وردپرس‌تان اضافه کرده و از آن استفاده کنید.

چرا باید push notification را به وبسایت وردپرسی خود بیافزاییم؟

Push Notification های وب، پیغام های قابل کلیکی هستند که در قسمت بالایی دسکتاپ نمایش داده می‌شوند. آنها را حتی زمانی که مرورگر ما در حال اجرا نیست نیز، می‌توانیم ببینیم. همچنین، علاوه بر دسکتاپ‌ها، push notification ها را می‌توانیم در مرورگرهای موبایل نیز مشاهده کنیم.

افزودن push notification به وردپرس

وبسایت‌های محبوبی همچون فیسبوک، پینترست، لینکدین و بسیاری دیگر در حال استفاده از push notification هستند. اثربخشی آنها هم اکنون بسیار بالاتر از SMS و ایمیل مارکتینگ و شبکه‌های اجتماعی است. بر اساس یک نظرسنجی، احتمال باز کردن push notification ها در دستگاه‌های موبایل ۵۰٪ می‌باشد.

این به معنی مشارکت بیشتر در وبسایت وردپرسی‌تان است و نقش بسزایی در مجموع بازدیدها و بازگشت کاربران به وبسایت‌تان دارد.

خوب، تا اینجا که از مزیت‌های push notification گفتیم، بیایید تا ببینیم که web push notification را در وردپرس، چگونه باید راه اندازی کنیم.

راه اندازی Web Push Notification در وردپرس با استفاده از OneSignal

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

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

افزودن push notification

صفحه‌ی تنظیمات به دو تب Setup و configuration تقسیم بندی شده است. تب setup درواقع راهنمایی درباره راه‌اندازی افزونه OneSignal برای افزودن push notification در وردپرس است. ما تمامی این راهنمایی‌ها را به در همین مقاله به شما نشان خواهیم داد.

برای راه اندازی افزونه OneSignal، شما نیاز به API keys و application ID خواهید داشت تا در قسمت تنظیمات این افزونه، آنها را وارد کنید. خوب بیایید تا جزئی‌تر وارد مراحل راه‌اندازی شویم.

قدم اول: ساخت Google Keys

ابتدا به صفحه‌ی راه اندازی سرویس‌های گوگل بروید.

ساخت push notification

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

سپس، نام کشور و منطقه را انتخاب کنید و برروی دکمه‌ی Choose and configure services کلیک کنید.

با اینکار شما به صفحه جدیدی انتقال خواهید یافت که در آنجا از شما خواهند پرسید که می‌خواهید کدام سرویس گوگل را در اپلیکیشن خود استفاده نمایید. برروی گزینه‌ “Enable Google Cloud Messaging” کلیک کنید.

راه اندازی افزونه OneSignal

در نهایت شما صفحه زیر را که شامل Server API key و Sender ID هست را مشاهده خواهید کرد.

راه اندازی افزونه OneSignal

شما باید Sender ID را کپی کرده و در قسمت تنظیمات افزونه OneSignal در قسمت Google Project Number field قرار دهید.

همچنین Server API key را کپی کرده و در یک فایل نوشتاری در کامپیوتر خود ذخیره کنید. این API key را در ادامه آموزش نیاز خواهید داشت.

قدم دوم : راه اندازی push notification کروم و فایرفاکس

حال ما باید push notification را در کروم و فایرفاکس راه‌ اندازی کنیم. ابتدا به وبسایت OneSignal در این نشانی رفته و یک حساب کاربری رایگان در آن ایجاد کنید.

بعد از اینکه ثبت نام به پایان رسید، وارد حساب خود در این سایت شوید و برروی گزینه “Add a new app” کلیک کنید.

push notification

حال از شما خواسته خواهد شد تا نامی را برای اپلیکیشن خود انتخاب کنید. هر اسمی را که دوست دارید در این قسمت بنویسید و برروی دکمه‌ی “Create” کلیک کنید.

تنظیمات push notification

در صفحه‌ی بعدی از شما می‌خواهند تا پلتفرم مورد نظر را انتخاب کنید. در این قسمت برروی “Website Push” کلیک کرده و سپس برروی دکمه‌ی Next کلیک کنید.

افزودن push notification به وردپرس

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

پلاتفرم onesignal

برروی دکمه‌ی Next برای ادامه، کلیک کنید.

در قدم بعدی، از شما آدرس وبسایت وردپرسی‌تان به همراه Google Server API key و همچنین آدرس آیکونی که می‌خواهید در push notification ها نمایش داده شود را خواهند پرسید.

راه اندازی push notification

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

گوگل کروم به صورت پیشفرض، web push notification را برروی وبسایت‌هایی که از HTTPS استفاده نمی‌کنند، پشتیبانی نمی‌کند. اما OneSignal این مشکل را با subscribe کردن کاربران به یک ساب دامین برروی دامین خودشان که https می‌باشد، حل کرده است.

اگر برروی گزینه‌ی “My site is not fully HTTPS” کلیک کرده باشید با خطایی مشابه تصویر زیر مواجه خواهید شد. در اینجا باید یک ساب دامین برای اپلیکیشن خود انتخاب کرده و Google Project Number و یا Sender ID را که در قدم اول ساخته‌اید، در اینجا کپی کنید.

ایجاد push notification

برروی دکمه‌ی Save برای ادامه کار کلیک کنید. حال می‌توانید از این باکس خارج شوید. در هنگام خروج به پیغامی مبنی بر اینکه تنظیمات به پایان نرسیده است و بعدا قابل ادامه است، نشان داده خواهد شد. برروی گزینه Yes کلیک کرده و باکس را ببندید.

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

حالا باید OneSignal key را برای وبسایت خود دریافت کنید. در قسمت داشبورد برروی گزینه App Settings کلیک کنید.

تنظیمات push notification

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

ایجاد push notification

حالا می‌توانید OneSignal App ID و Rest API Key را در این صفحه مشاهده کنید.

افزودن push notification

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

قدم چهارم :  راه اندازی Web Push Notification برای Safari

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

دوباره وارد اکانت خود در وبسایت OneSignal شده و به صفحه‌ی App Settings بروید. وب پلتفرم ها را اسکرول کرده و به سافاری برسید و برروی دکمه‌ی Configure مقابل Apple Safari کلیک کنید.

کانفیگ مرورگر های Onesignal

حال یک باکس برای شما نشان داده خواهد شد که در آن نام و آدرس وبسایت شما در آن پرسیده می‌شود.

افزودن push notification به وردپرس

سپس تیک مربوط به گزینه‌ ” I’d like to upload my own notification icons” را بزنید.

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

افزودن push notification

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

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

افزودن push notification به وردپرس

این Web ID را کپی کرده و در تب تنظیمات افزونه‌ی OneSignal در وبسایت خود، قرار دهید.

قدم پنجم : تست کردن عملکرد Web Push Notification در وبسایت وردپرسی‌تان

حال افزونه‌ی OneSignal بصورت پیشفرض، یک آیکون سابسکریبشن را به وبسایت وردپرسی شما اضافه خواهد کرد. به صفحه‌ی اصلی وبسایت خود مراجعه کرده ( با یکی از مرورگرهای ذکر شده در بالا) و برروی دکمه‌ی Subscribe کلیک کنید.

افزودن push notification به وردپرس

بعد از کلیک برروی دکمه‌، پیغام پیشفرض “ُThank you for subscribing” را مشاهده خواهید کرد.

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

کانفیگ onesignal

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

افزودن push notification به وردپرس

نوبت به انتخاب target SDK می‌رسد. در این بخش گزینه‌ی WordPress را انتخاب و بررروی Next کلیک کنید.

افزودن push notification به وردپرس

حال که شما تنها یک مشترک دارید، قسمت Subscriber ID به صورت اتوماتیک تکمیل خواهد شد. برروی دکمه‌ی Next کلیک کرده تا به قسمت Test Settings برسید. در نهایت برروی  دکمه‌ی Send Test Notifications کلیک کنید.

افزودن push notification به وردپرس

در این لحظه OneSignal به شما یک web push notification ارسال خواهد کرد. ظاهر این نوتیفیکیشن بر اساس مرورگری که با آن subscribe کرده‌اید، متفاوت خواهد بود. زمانی که نوتیفیکشن را دیدید، برروی آن کلیک کنید.

افزودن push notification به وردپرس

اینکار شما را به صفحه‌ی تاییدیه انتقال خواهد داد و به شما نشان خواهد داد که OneSignal web push notification را برای وبسایت خود با موفقیت راه‌ اندازی کرده‌اید.

افزودن push notification به وردپرس

حال به قسمت تنظیمات در وبسایت OneSignal برگردید و برروی دکمه‌ی Check Notification Status کلیک کنید.

افزودن push notification

در این قسمت نیز یک پیغام مبنی بر موفقیت آمیز بودن تنظیمات web push notification، برروی وبسایت وردپرسی خود، خواهید دید.

نحوه ارسال Web Push Notification در وردپرس با استفاده از OneSignal

افزونه OneSignal ای که برروی وردپرس خود نصب کرده‌اید، هنگام انتشار هر پست جدید، بصورت اتوماتیک، یک web push notification را برای همه‌ی مشترکان ارسال خواهد کرد.

همچنین شما می‌توانید بصورت دستی اینکار را از داشبورد اپلیکیشن خود در وبسایت OneSignal انجام دهید. وارد حساب خود شده و برروی نام اپلیکیشن خود کلیک کنید.

در منوی سمت چپ، برروی دکمه‌ی New Message کلیک کنید.

ایجاد push notification

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

راه اندازی افزونه OneSignal

همچنین می‌توانید از گزینه‌های موجود در بخش Options، Segment و Schedule/Send برای شخصی‌سازی بیشتر web push notification خود استفاده کنید.

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

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

میلاد کاظمی

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

دیدگاهتان را بنویسید

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