إنشاء إشعار ملفات تعريف الارتباط (Cookie Consent) متعدد اللغات يدعم RTL

المقدمة:

أصبحت في هذه الأيام ملفات تعريف الارتباط (الكوكيز) عنصرًا أساسيًا في المواقع الإلكترونية لتحسين تجربة المستخدمين وجمع البيانات المهمة. وفقًا للعديد من القوانين العالمية مثل GDPR وCCPA، يُطلب من المواقع الإلكترونية إعلام الزوار باستخدام ملفات تعريف الارتباط والحصول على موافقتهم الصريحة. 

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

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

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

و لمزيد من المعلومات حول ملفات تعريف الارتباط، يمكنك قراءة هذا الدليل الشامل من Mozilla.

أهمية إشعار ملفات تعريف الارتباط:

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

لحسن الحظ يمكنك الاطلاع على تفاصيل أكثر عن إشعارات الكوكيز في موقع Cookiebot.

خطوات إنشاء إشعار ملفات تعريف الارتباط:

1. تحضير HTML وCSS: إنشاء شريط إشعار يظهر في أسفل الصفحة ويحتوي على رسالة قصيرة مع زر للموافقة على ملفات تعريف الارتباط وزر لقراءة المزيد حول سياسة الخصوصية.
2. إنشاء JavaScript لإدارة ملفات تعريف الارتباط: استخدام JavaScript لإدارة وظائف إشعار ملفات تعريف الارتباط، مثل عرض الإشعار عند زيارة المستخدم للموقع لأول مرة. لمزيد من المعلومات حول كيفية إدارة ملفات تعريف الارتباط عبر JavaScript، يمكنك زيارة دليل W3Schools حول JavaScript وملفات تعريف الارتباط.
3. دعم اللغات متعددة والـ RTL: التأكد من أن شريط الإشعار يتكيف مع اللغة المناسبة للزائر ويدعم الاتجاه من اليمين إلى اليسار للغات مثل العربية.

الكود سكريبت كامل بدون اخطاء

JavaScript:

(function(window) { var cookieManager = { getCookie: function(name) { var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); return match ? match[2] : null; }, setCookie: function(name, value, days) { var expires = ''; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + '; path=/'; }, deleteCookie: function(name) { document.cookie = name + '=; Max-Age=-99999999; path=/'; }, showCookieConsent: function() { if (!this.getCookie('cookieConsent')) { var consentBanner = document.createElement('div'); consentBanner.innerHTML = ` <div style="background: rgb(0, 0, 0); bottom: 0px; color: white; direction: rtl; left: 0px; padding: 10px; position: fixed; right: 0px; text-align: center;"> <span>يستخدم هذا الموقع ملفات تعريف الارتباط لضمان حصولك على أفضل تجربة على موقعنا.</span> <button id="acceptCookies" style="margin-right: 10px; padding: 5px 10px;">حسناً!</button> <button id="readMore" style="margin-right: 10px; padding: 5px 10px;">اقرأ المزيد</button> </div>`; document.body.appendChild(consentBanner); document.getElementById('acceptCookies').onclick = () => { this.setCookie('cookieConsent', 'true', 365); consentBanner.remove(); }; document.getElementById('readMore').onclick = () => { window.location.href = 'https://freeworkingpro.blogspot.com/p/privacy-policy.html?m=1'; // رابط سياسة الخصوصية }; } } }; // Show cookie consent banner on page load window.onload = function() { cookieManager.showCookieConsent(); }; })(window);

شرح الكود:

• وظيفة getCookie: تبحث عن ملف تعريف الارتباط المحدد وتعيد قيمته إذا كان موجودًا.
• وظيفة setCookie: تقوم بإنشاء ملف تعريف ارتباط جديد وتحديد مدته (بالأيام).
• وظيفة deleteCookie: تقوم بحذف ملف تعريف الارتباط المحدد.
• وظيفة showCookieConsent: تعرض شريط إشعار ملفات تعريف الارتباط إذا لم يكن المستخدم قد وافق عليه مسبقًا.

التخصيص:

• يمكنك تعديل النصوص حسب رغبتك أو اللغة التي تود استخدامها.
• يمكنك تعديل رابط سياسة الخصوصية ليشير إلى صفحة سياسة الخصوصية الخاصة بك.
• دعم RTL مدمج في الكود باستخدام الخاصية direction: rtl.

كيفية استخدام السكريبت في مدونة بلوجر أو موقع ويب:

1. انتقل إلى لوحة التحكم في مدونة بلوجر الخاصة بك.
2. اختر "التخطيط" من القائمة الجانبية.
3. اضغط على "إضافة أداة" في المكان الذي ترغب في إضافة السكريبت فيه (عادةً في أسفل الصفحة أو في قسم HTML).
4. اختر "HTML/JavaScript" من الخيارات.
5. في خانة العنوان، يمكنك كتابة "إشعار ملفات تعريف الارتباط".
6. في خانة المحتوى، قم بلصق الشيفرة الخاصة بالسكريبت أعلاه (تأكد من تضمين الشيفرة بأكملها).
7. اضغط على "حفظ".
8. انتقل إلى "المظهر" ثم "تعديل HTML" لتعديل الأكواد مباشرة إذا كنت بحاجة إلى إدخال السكريبت في مكان آخر.
9. ابحث عن علامة </body> وأضف السكريبت قبل هذه العلامة.
10. احفظ التغييرات.

خاتمة:

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

روابط مفيدة:

• GDPR - حماية البيانات العامة
• CCPA - قانون حماية الخصوصية للمستهلكين في كاليفورنيا
• Cookiebot - إشعارات ملفات تعريف الارتباط
• Mozilla - ملفات تعريف الارتباط في الويب