كيفية برمجة نافذة منبثقة إعلانية لمرة واحدة باستخدام HTML وCSS وJavaScript"

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

كيفية برمجة نافذة منبثقة إعلانية لمرة واحدة باستخدام HTML وCSS وJavaScript

كيف تعمل النافذة المنبثقة لمرة واحدة؟

يعتمد عمل هذه النافذة على تخزين الجلسة (Session Storage)، حيث يتم التحقق من وجود عنصر تخزين خاص يُسمى "adClosed" في JavaScript. عند زيارة المستخدم لموقعك لأول مرة، يتم عرض النافذة الإعلانية، وإذا قام المستخدم بإغلاقها، يتم تسجيل ذلك في التخزين المحلي للجلسة، مما يمنع ظهورها مجددًا خلال نفس الجلسة.

إذا أغلق المستخدم المتصفح وأعاد فتحه أو مسح ملفات تعريف الارتباط، ستظهر النافذة مرة أخرى وكأنها تظهر للمرة الأولى.

شرح الكود البرمجي للنافذة المنبثقة

1. HTML: إنشاء هيكل النافذة

<div id="adPopup" class="popup">
    <div class="popup-content">
        <span class="close-btn" onclick="closeAd()">×</span>
        <p>إعلان مميز لك! لا تفوّت هذه الفرصة.</p>
    </div>
</div>

هذا الكود يُنشئ نافذة منبثقة تحتوي على إعلان وزر إغلاق.

2. CSS: تصميم النافذة المنبثقة

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
}

.popup-content {
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}

هذا التنسيق يجعل النافذة تظهر في منتصف الصفحة بتصميم بسيط وأنيق.

3. JavaScript: تشغيل النافذة وإدارتها

window.onload = function() {
    if (!sessionStorage.getItem("adClosed")) {
        document.getElementById("adPopup").style.display = "block";
        setTimeout(closeAd, 10000);
    }
};

function closeAd() {
    document.getElementById("adPopup").style.display = "none";
    sessionStorage.setItem("adClosed", "true");
}

هذا السكربت يقوم بالتالي:

• عند تحميل الصفحة، يتحقق من وجود adClosed في sessionStorage.
• إذا لم يكن موجودًا، يتم عرض النافذة تلقائيًا.
• بعد 10 ثوانٍ، تُغلق النافذة تلقائيًا.
• إذا قام المستخدم بإغلاقها يدويًا، يتم حفظ هذا الإجراء في sessionStorage، مما يمنع ظهورها مرة أخرى في نفس الجلسة.

كيف تزيد من تكلفة النقرة (CPC) للإعلانات؟

تحسين CPC أمر ضروري لزيادة أرباحك من الإعلانات، وهنا بعض الطرق لتحقيق ذلك:

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

إضافة سكربت الإعلان القسري لمرة واحدة على بلوجر

لإضافة هذه النافذة المنبثقة في موقعك على Blogger، قم باتباع الخطوات التالية:

1. الدخول إلى لوحة تحكم بلوجر عبر Blogger.com.
2. الانتقال إلى قسم "المظهر" (Themes).
3. فتح "تحرير HTML".
4. البحث عن العلامة </body>.
5. لصق كود النافذة المنبثقة قبل هذه العلامة مباشرة.
6. حفظ التعديلات.

لماذا تعتبر هذه الطريقة فعالة؟

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

الأسئلة الشائعة:

1. لماذا يتم استخدام Session Storage بدلاً من Cookies؟

يتم استخدام Session Storage لأنه يخزن البيانات فقط خلال جلسة المتصفح الحالية، مما يعني أن النافذة ستظهر مجددًا فقط عند إغلاق المتصفح وإعادة فتحه، بينما تحتاج ملفات Cookies إلى الحذف يدويًا أو بعد انتهاء مدة صلاحيتها.

2. كيف يمكنني تغيير مدة ظهور النافذة قبل أن تُغلق تلقائيًا؟

يمكنك تعديل السطر التالي في JavaScript:

setTimeout(closeAd, 10000);

حيث يمثل 10000 مدة التأخير بالمللي ثانية (10 ثوانٍ). يمكنك تغييرها إلى 5000 لجعلها 5 ثوانٍ، أو أي قيمة أخرى تناسبك.

3. هل يمكنني جعل النافذة تظهر مرة أخرى بعد فترة معينة بدلاً من جلسة واحدة فقط؟

نعم، يمكنك استخدام localStorage بدلاً من sessionStorage، وإضافة شرط زمني بحيث تعود النافذة للظهور بعد 24 ساعة مثلاً.

4. هل تؤثر هذه النافذة المنبثقة على سرعة الموقع أو تجربة المستخدم؟

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

5. كيف يمكنني تطبيق هذه النافذة على منصة ووردبريس بدلًا من بلوجر؟

يمكنك إدراج الكود داخل ملف header.php أو استخدام إضافة Code Snippets لوضع الكود في قسم JavaScript المخصص، بحيث يتم تحميله في جميع الصفحات بنفس الطريقة.

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

انتهى المقال الى هنا! كيفية برمجة نافذة منبثقة إعلانية لمرة واحدة باستخدام HTML وCSS وJavaScript", اذا اعجبك مقال وأستفدت منه لاتنسى مشاركته مع الاصدقاء والعائلة. نحن نسعى دائما لتقديم الافضل.