تخطَّ إلى المحتوى

دمج حزمة JavaScript SDK (العميل)

تهدف حزمة JS SDK إلى أعلى أداء مع صفر تبعيات. منصتنا تحل احتياجات إدارة ملفات تعريف الارتباط وتتيح لك الحصول على موافقات ملزمة قانونياً بسهولة.

البدء السريع

ابدأ بعلامة سكريبت واحدة. تصميم اللافتة، فئات ملفات تعريف الارتباط، النصوص والامتثال الإقليمي (GDPR، CCPA…) — كلها تُدار من لوحة تحكم HashEntry:

<head>
  <script
    src="https://tool.hashentry.com/cmp.js"
    data-site="مفتاح_API_الخاص_بك"
    async
  ></script>
</head>

هذا كل شيء. يقوم SDK بجلب التكوين المرتبط بمفتاح API الخاص بك من الخادم؛ تصميم اللافتة والألوان واللغة والفئات وإعدادات السلوك تُدار جميعها من لوحة التحكم.

حظر سكريبتات الطرف الثالث

ضع علامة على السكريبتات التي لا يجب تشغيلها قبل الموافقة بـ type="text/plain":

<script type="text/plain" data-cookie-category="analytics">
  // Google Analytics — لا يعمل حتى تتم الموافقة على "analytics"
</script>

<script type="text/plain" data-cookie-category="marketing"
        data-src="https://connect.facebook.net/en_US/fbevents.js">
</script>

إعادة فتح التفضيلات

الأيقونة الافتراضية: تظهر أيقونة دائمة «تفضيلات ملفات تعريف الارتباط» على الشاشة.
زر مخصص: أخفِ الأيقونة واستدعِ CMP.show() من رابط التذييل الخاص بك.

سمات `data-*` المدعومة

السمة	مطلوب	الافتراضي	الوصف
`data-site`	✅	—	مفتاح API للموقع
`data-mode`	❌	`local-fallback`	الوضع: `remote`، `local`، `local-fallback`
`data-language`	❌	`auto`	لغة اللافتة (`auto` = اكتشاف المتصفح)
`data-region`	❌	`auto`	تجاوز المنطقة
`data-config`	❌	—	تكوين JSON مضمن (الوضع المحلي)
`data-debug`	❌	`false`	وضع المطور
`data-headless`	❌	`false`	وضع بدون واجهة

واجهة JavaScript API ‏(`window.CMP`)

CMP.ready(() => { console.log('تم تحميل HashEntry CMP.'); });

CMP.show();
CMP.hide();
CMP.accept();
CMP.reject();

const consent = CMP.getConsent();
CMP.hasConsent('analytics');

CMP.setMetadata({ order_id: 'ORD-54321' });

CMP.on('consent:given', (data) => { console.log("الموافقة:", data.categories); });

قائمة الانتظار Pre-init

<script>
window.__CMP_QUEUE = window.__CMP_QUEUE || [];
window.__CMP_QUEUE.push(['setMetadata', { order_id: 'ORD-12345' }]);
window.__CMP_QUEUE.push(['setRegion', 'AE']);
</script>

متقدم: أوضاع التشغيل

الوضع	السلوك	`data-site`	الخادم
`remote`	التكوين يُجلب من الخادم	مطلوب	مطلوب
`local`	كل التكوين يُقدم من الصفحة	اختياري	لا يوجد
`local-fallback` (افتراضي)	يحاول الخادم، يعود للمحلي عند الفشل	اختياري	مفضل

الوضع المحلي

التشغيل بالكامل بدون خادم. مثالي لـبيئات الاختبار والسيناريوهات بدون اتصال.

<head>
  <script type="application/json" id="cmp-config">
  {
    "banner_config": {
      "layout": "bottom_bar",
      "region_detection": "timezone",
      "theme": {
        "primary_color": "#2563EB",
        "font_family": "system",
        "theme_mode": "auto",
        "widget_icon": "cookie",
        "widget_position": "bottom_left"
      },
      "content": {
        "title": "تفضيلات ملفات تعريف الارتباط",
        "description": "يستخدم هذا الموقع ملفات تعريف الارتباط لتحسين تجربتك.",
        "accept_button_text": "قبول الكل",
        "reject_button_text": "رفض الكل",
        "settings_button_text": "إدارة التفضيلات",
        "save_selected_text": "قبول المحدد",
        "close_text": "إغلاق",
        "widget_label": "ملفات تعريف الارتباط"
      },
      "categories": [
        {
          "key": "necessary",
          "label": "ضرورية",
          "description": "مطلوبة لعمل الموقع الأساسي.",
          "required": true
        },
        {
          "key": "analytics",
          "label": "تحليلات",
          "description": "إحصائيات الزوار.",
          "required": false
        },
        {
          "key": "marketing",
          "label": "تسويق",
          "description": "إعلانات مخصصة.",
          "required": false
        }
      ],
      "mobile_layout": "bottom_bar",
      "behavior": {
        "show_reject_button": true,
        "show_settings_button": true,
        "show_widget": true,
        "show_powered_by": true,
        "block_page_scroll": false,
        "modal_layout": "sidebar_right",
        "cookie_display_mode": "vendor",
        "banner_animation": "slide_fade",
        "modal_tabs": true,
        "record_informational_consent": false
      }
    }
  }
  </script>
  <script src="https://tool.hashentry.com/cmp.js" data-mode="local" data-language="ar" async></script>
</head>

متقدم: اكتشاف المنطقة (`region_detection`)

الطريقة	كيف تعمل	طلب شبكة
`timezone`	تقدير البلد من المنطقة الزمنية للمتصفح (120+ تطابق)	لا
`freegeoip`	خدمة مجانية IP→بلد (مهلة 3 ثوانٍ، احتياطي timezone)	نعم

Playground