كيفية إضافة زر اشتراك في الإشعارات الفورية إلى النوافذ المنبثقة

هل تبحث عن طريقة لإضافة زر اشتراك في الإشعارات الفورية إلى النوافذ المنبثقة الخاصة بك؟

تعد النوافذ المنبثقة طريقة رائعة لزيادة معدلات التحويل لديك وتنمية قائمة البريد الإلكتروني. ولكن هذا ليس كل ما يمكنك فعله بها. إذا استخدمت أداة إنشاء نوافذ منبثقة مناسبة، يمكنك تخصيص كل شيء يتعلق بنوافذك المنبثقة.

بشكل افتراضي، تأتي الإشعارات الفورية أيضًا مع نوافذ منبثقة. ولكن يمكنك الحصول على خيارات تخصيص أكثر بكثير باستخدام أداة إنشاء نوافذ منبثقة.

لذلك، سنستخدم أداة إنشاء نوافذ منبثقة لبناء النافذة المنبثقة وإضافة رابط اشتراك لجمع المشتركين في الإشعارات الفورية.

يمكنك بسهولة إضافة زر لجمع المشتركين في الإشعارات الفورية مباشرة من نوافذك المنبثقة. وهذا سهل للغاية. كل ما تحتاجه هو أداة إنشاء نوافذ منبثقة وبرنامج إشعارات فورية لإعداد نوافذ منبثقة مخصصة لجمع المشتركين في الإشعارات الفورية.

دعنا نتعمق.

كيفية إنشاء نافذة منبثقة لجمع المشتركين في الإشعارات الفورية

لنبدأ بإنشاء نافذة منبثقة. نوصي باستخدام OptinMonster لإنشاء جميع نوافذكم المنبثقة.

OptinMonster هي أداة التحويل رقم 1 في العالم وقد استخدمناها بأنفسنا. OptinMonster تجعل من السهل للغاية إنشاء نوافذ منبثقة قوية تحقق التحويل. ولن تحتاج أبدًا إلى استخدام أي ترميز على الإطلاق.

يحتوي OptinMonster على كل ما تحتاجه تقريبًا لبدء وتنمية وتوسيع نطاق عملية توليد العملاء المحتملين لديك.

إليك نظرة سريعة على ما يمكنك القيام به باستخدام مجموعة الأدوات:

• جمع المشتركين في الإشعارات الفورية باستخدام نافذة منبثقة
• حوّل الزوار لأول مرة إلى قراء منتظمين
• تقليل معدلات التخلي عن سلة التسوق و التخلي عن التصفح
• أنشئ عروضًا محدودة الوقت مع مؤقتات العد التنازلي الفعلية
• زيادة تنزيلات الكتب الإلكترونية و مبيعات المنتجات الرقمية
• أنشئ مسارًا للأحداث المباشرة
• حسن تفاعل الموقع باستخدام النوافذ المنبثقة ذات الطابع الترفيهي
• أعد توجيه حركة المرور الخاصة بك إلى الصفحات والمشاركات التي تجلب لك المال

نحن نستخدم OptinMonster كثيرًا وقد كتبنا حتى مراجعة كاملة لـ OptinMonster. يمكنك الاطلاع عليها، أو البدء في حملتك الآن. كل ما عليك فعله هو التسجيل في OptinMonster والمتابعة مع بقية هذا المقال.

الخطوة #1: إنشاء حملة نافذة منبثقة لجمع المشتركين

توجه إلى لوحة تحكم OptinMonster الخاصة بك واضغط على زر إنشاء:

حدد خيار القالب لبدء إنشاء خيار اشتراك باستخدام قالب مصمم مسبقًا:

لهذا البرنامج التعليمي، سنقوم بإنشاء نافذة منبثقة لعيد الجمعة السوداء. حدد نوع حملة النافذة المنبثقة وابحث عن قالب حملة

يمكنك اختيار أي قالب تريده، لكننا سنختار قالب حملة الجمعة السوداء لهذا البرنامج التعليمي.

بعد اختيار القالب الخاص بك، قم بتسمية حملتك. تذكر، اسم الحملة هذا خاص بك ومن المحتمل أن تنشئ مجموعة كبيرة من هذه النوافذ المنبثقة بخيارات استهداف مختلفة. لذا، قم بتسمية الحملة باسم ذي معنى وإلا ستنتهي بك الأمور في ارتباك شديد لاحقًا.

أيضًا، اعتمادًا على خطة الخاص بك، يمكنك أيضًا استخدام OptinMonster على مواقع متعددة. لذا، حدد الموقع الذي تريد عرض حملتك عليه أيضًا. اضغط على ابدأ البناء عند الانتهاء.

الخطوة #2: تعديل نافذتك المنبثقة لتخصيص الشكل والمظهر

مع OptinMonster، ستحصل على أداة إنشاء نوافذ منبثقة مرئية بالسحب والإفلات. بمجرد الانتهاء من تسمية حملتك، ستتمكن من تعديل أدق التفاصيل حول نافذتك المنبثقة.

الجزء الأكثر روعة هنا هو أنك تنقر ببساطة على أي نص تريد تعديله وتغييره في مكانه. لا حاجة لملء نموذج أو تعديل أي كود HTML في النافذة المنبثقة.

يمكنك تعديل كل ما تريده في النافذة المنبثقة الخاصة بك بما في ذلك الصور. عندما تكون راضيًا عن مظهر الاشتراك، يمكنك الانتقال إلى إعدادات أكثر تقدمًا.

طريقة إعداد هذا القالب المحدد هي أن هناك ثلاثة أجزاء للنافذة المنبثقة. لديك شاشة أولية نعم/لا حيث يختار الزوار قسيمة في الجمعة السوداء. هذا ما تراه في الصورة أعلاه. بشكل افتراضي، إنها قسيمة شحن مجاني. ولكن يمكنك إضافة أي عرض أو قسيمة تريدها.

عندما ينقر زوارك على زر نعم في النافذة المنبثقة، يتم إرسالهم إلى شاشة الاشتراك. هذا هو المكان الذي ستجمع فيه المشتركين. بشكل افتراضي، تجمع شاشة الاشتراك رسائل البريد الإلكتروني. سنستبدل ذلك بزر لجمع مشتركين الإشعارات الفورية.

أخيرًا، لديك شاشة نجاح تظهر عندما يشترك زوارك.

دعنا نفعل ذلك خطوة بخطوة.

الخطوة #3: إزالة اشتراك البريد الإلكتروني من النافذة المنبثقة

يمكنك تعديل أي وحدة في النافذة المنبثقة تريدها. انتقل إلى شاشة الاشتراك في الشريط السفلي:

هنا، يمكنك تمرير مؤشر الماوس فوق وحدة اشتراك البريد الإلكتروني والنقر ببساطة على زر الحذف لإزالتها:

الآن بعد أن اختفى اشتراك البريد الإلكتروني، سنضيف إليه زرًا لجمع مشتركين إشعارات الدفع.

الخطوة #4: إضافة زر "انقر للاشتراك" إلى النافذة المنبثقة الخاصة بك

أولاً، أضف كتلة HTML إلى النافذة المنبثقة الخاصة بك من الشريط الجانبي في OptinMonster.

هذا هو المكان الذي سنضيف فيه الرمز لجمع مشتركين إشعارات الدفع. أولاً، الصق الرمز التالي لإنشاء زر قابل للنقر:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

الصق الرمز حيث يُقال إنه يمكنك إضافة HTML. في هذه المرحلة، يجب أن ترى زرًا جديدًا في النافذة المنبثقة الخاصة بك:

بعد ذلك، قم بالتمرير لأسفل والصق CSS التالي في حاوية CSS:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

في هذه المرحلة، يجب أن ترى زرًا جميل المظهر في النافذة المنبثقة الخاصة بك:

الخطوة #5: الحصول على رمز الاشتراك من PushEngage

تساعدك إشعارات الدفع على زيادة حركة مرور موقعك الإلكتروني وتفاعلك تلقائيًا. إشعارات الدفع عبر الويب هي طريقة فعالة لإعادة المستخدمين الذين ربما تخلوا عن جلستهم أو غادروا الموقع. إنها تساعد في إعادة إشراك المستخدمين عن طريق إبلاغهم بالمحتوى الجديد أو العروض أو الأحداث.

تتضمن إشعارات الدفع أيضًا رسائل واضحة وقابلة للتنفيذ و أزرار دعوة لاتخاذ إجراء، مما يشجع المستخدمين على اتخاذ إجراءات محددة، مثل قراءة مقال أو إكمال عملية شراء أو المشاركة في حدث.

يمكنك تخصيص إشعارات الدفع بناءً على تفضيلات المستخدمين وسلوكهم واهتماماتهم، للتأكد من أن الرسائل ذات صلة وقيمة لكل مستخدم. يجب على المستخدمين الموافقة على تلقي إشعارات الدفع عبر الويب. هذا يضمن عدم اعتبار الرسائل بريدًا عشوائيًا وأنها تُرسل بإذن المستخدمين.

الجزء الأروع هو أنه يمكنك جمع مشتركين إشعارات الدفع من نافذة البريد الإلكتروني المنبثقة. لذا، فقط في حالة عدم رغبة زوار موقعك في تقديم معرف البريد الإلكتروني الخاص بهم، لا يزال بإمكانك جعلهم يشتركون باستخدام إشعارات الدفع عبر الويب.

نوصي باستخدام PushEngage لإرسال إشعارات الدفع عبر الويب.

إليك نظرة سريعة على ما تحصل عليه مع PushEngage:

• حملات آلية عالية التحويل
• خيارات استهداف متعددة و جدولة الحملات
• تتبع الأهداف وتحليلات متقدمة
• اختبار A/B ذكي
• مدير نجاح مخصص

يمكنك البدء مجانًا، ولكن إذا كنت جادًا بشأن تنمية عملك، فيجب عليك شراء خطة مدفوعة. أيضًا، قبل شراء أي خدمة إشعارات دفع، يجب عليك الاطلاع على هذا الدليل حول تكاليف إشعارات الدفع.

وإذا كنت تدير متجرًا عبر الإنترنت، فإن PushEngage يساعدك أيضًا على زيادة مبيعاتك من خلال مساعدتك في إنشاء إشعارات تجارة إلكترونية آلية.

سترى أن PushEngage هو الخيار الأفضل بلا منازع إذا كنت ترغب في زيادة حركة المرور والمشاركة والمبيعات لعملك. وإذا كانت ميزانيتك محدودة، يمكنك دائمًا أن تكون مبدعًا بعض الشيء مع إشعارات الدفع الخاصة بك.

توجه إلى الصفحة الرئيسية لـ PushEngage وانقر على زر البدء:

بعد ذلك، ستحتاج إلى تحديد الخطة المجانية لتجربة PushEngage أو اختيار خطة مدفوعة إذا كنت جادًا بشأن تنمية عملك. تأتي الخطط المدفوعة مع المزيد من خيارات الحملات والقدرة على بناء قوائم مشتركين أكبر.

في لوحة تحكم PushEngage الخاصة بك، انتقل إلى إعدادات الموقع » تفاصيل الموقع وانقر على زر انقر هنا لتعليمات الإعداد. ضمن أي موقع، ستحصل على كود التثبيت الخاص بك:

تحذير: تحتاج إلى نسخ الكود الذي تحصل عليه من لوحة التحكم الخاصة بك. الكود فريد لكل مستخدم PushEngage. لن تتمكن من نسخ الكود الموجود في الصورة وجمع المشتركين في إشعارات الدفع.

بمجرد حصولك على الرمز في لوحة تحكم PushEngage الخاصة بك، خذ النص البرمجي الثاني وأضف إليه بعض التعليمات البرمجية الإضافية. يجب أن يبدو الرمز النهائي الخاص بك شيئًا كهذا:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

الخطوة رقم 6: أضف رمز الاشتراك الخاص بك إلى كتلة HTML في النافذة المنبثقة الخاصة بك

أضف هذا الرمز إلى كتلة HTML في OptinMonster وانتهيت!

عندما تنتهي، فقط اضغط على زري حفظ و نشر.

الخطوة رقم 7: إضافة تتبع النقرات وإغلاق الحملة

آخر شيء نحتاج إلى القيام به هو إضافة رمز تتبع النقرات لاعتبار كل مشترك بمثابة تحويل في OptinMonster. أيضًا، عندما يشترك الزائر، سترغب إما في نقله إلى شاشة النجاح أو الخروج من الحملة.

داخل مقتطف Javascript، أضف الأسطر التالية من التعليمات البرمجية:

لتمكين تتبع التحويلات، أضف هذا الرمز:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

لنقل مشتركك إلى شاشة النجاح، أضف هذا الرمز:

om{{id}}.changeView('success'); // Show Success view on submission

لإغلاق الحملة عند الاشتراك، أضف هذا الرمز:

om{{id}}.startClose();// Close campaign on submission

يمكنك إضافة مقتطفات تعليمات برمجية متعددة أيضًا. نوصي بنقل المشتركين إلى شاشة النجاح وتتبع التحويل. لذا، فإن مقتطف التعليمات البرمجية النهائي الذي نوصي باستخدامه (بما في ذلك الزر وكل Javascript) هو:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

بدلاً من ذلك، يمكنك استخدام هذا الرمز لإغلاق الحملة مباشرة:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

فقط انسخ والصق الرمز في كتلة HMTL لنافذة OptinMonster المنبثقة.

ولأي من مقتطفات التعليمات البرمجية، تذكر إضافة CSS التالي في قسم CSS لكتلة HTML الخاصة بك:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

عندما تنتهي، انقر فوق حفظ. إذا قمت بفحص موقعك على الويب، فيجب أن ترى الآن النافذة المنبثقة تجمع مشتركين في البريد الإلكتروني ومشتركين في الإشعارات الفورية:

وبنفس الطريقة، أنت تجمع مشتركين فوريين من النافذة المنبثقة الخاصة بك. تأتي الإشعارات الفورية مع وحدات نوافذ منبثقة خاصة بها. لكن تخصيصها صعب بعض الشيء. لذا، يمكنك إنشاء نوافذ منبثقة جميلة باستخدام OptinMonster ثم استخدامها كنوافذ منبثقة للإشعارات الفورية الخاصة بك.

الخطوة رقم 8: نشر النافذة المنبثقة بنية الخروج في WordPress

عند إنشاء حملة جديدة، تكون متوقفة مؤقتًا بشكل افتراضي.

انتقل إلى علامة التبويب نشر من القائمة العلوية لرؤية خيارات النشر. ثم، قم بتعيين الحالة إلى نشر وحدد منصة موقع الويب:

إذا كنت تدير موقع WordPress، فإن إضافة OptinMonster تقوم بالباقي تلقائيًا. الأمر نفسه ينطبق على Shopify و BigCommerce. لأي موقع آخر، انقر فوق أي موقع والصق رمز التضمين في رأس موقع الويب الخاص بك:

وأنت انتهيت!

خطوة إضافية: تعطيل التثبيت السريع في PushEngage

التثبيت السريع هو طريقة لإضافة مشتركين في الإشعارات الفورية إلى موقع ويب بدون شهادة SSL. في الوقت الحاضر، تحتوي جميع المواقع تقريبًا على شهادة SSL، ولكن فقط في حال لم يكن لديك واحدة مثبتة، نوصي بشدة بتثبيت واحدة على الفور. تحقق من هذه المقالة حول كيفية تثبيت شهادة SSL في WordPress.

So, before you start collecting subscribers on your site, we recommend disabling Quick Install as well. Head over to the PushEngage dashboard and go to Design » Popup Modals. Then, disable Quick Install:

And now, you’re ready to promote your website and collect more subscribers for Black Friday!

What to do After You Start Collecting Push Subscribers

هذا كل شيء لهذا اليوم أيها الأصدقاء!

Let us know if this article helped. Creating popups on your site can help you convert your traffic into push subscribers and genuine business leads. And we highly recommend that you start creating exit intent popups right away.

And if you’re looking for an affordable way to grow your traffic, we recommend using push notifications. Push notifications can help you bring in more repeat traffic and site engagement. You can also create automated push notification campaigns that generate sales.

غير مقتنع؟ تحقق من هذه الموارد:

• 7 استراتيجيات ذكية لزيادة تفاعل العملاء
• هل إشعارات الدفع فعالة؟ 7 إحصائيات + 3 نصائح خبراء
• كيفية إعداد إشعارات الدفع للسلات المتروكة (دليل سهل)
• كيفية إضافة إضافة إشعارات الويب لـ WordPress إلى موقعك

We recommend using PushEngage to create your push notification campaigns. PushEngage is the #1 push notification software in the world. So, if you haven’t already, get started with PushEngage today!