قبل الدخول في كيفية إضافة أكواد إلى منصتك إليك دليل التعامل مع الأكواد المخصصة

1- إزالة حدث DOMContentLoaded

إذا كنت تستخدم عادةً حدث DOMContentLoaded، يجب عليك التوقف عن استخدامه الآن. يتم تنفيذ الكود في useEffect في React، والتي تُشغَّل بعد تحميل الصفحة الأولي. لذا، لم يعد هناك حاجة للاعتماد على DOMContentLoaded.

2- تنفيذ الكود في كل عرض للصفحة

إذا كنت ترغب في إضافة وتشغيل الكود في كل عرض للصفحة، يمكنك الاستفادة من الهيكل التالي:

window.APP_EVENTS.PAGE_VIEW.push((url) => {
    // أدخل الشفرة الخاصة بك هنا
});

ويُمكن أن يكون url هو رابط الصفحة إذا كنت بحاجة لتنفيذ الكود فقط في صفحة محددة.

3- التعامل مع أكواد HTML المخصصة التي تحتوي على وسوم Script

عند إضافة كود HTML مخصص يحتوي على وسوم script، يجب مراعاة المشاكل المحتملة عندما يترك المستخدم الصفحة ويعود إليها. لتجنب مشكلات Uncaught SyntaxError بسبب إعادة تعريف المتغيرات، يُفضل تضمين الكود ضمن Immediately Invoked Function Expression (IIFE) كما هو موضح أدناه:

(function(){
    // قم بتعريف المتغيرات هنا
    // أدخل الشفرة الخاصة بك هنا
})();

هذه الطريقة تضمن تعريف المتغيرات بشكل صحيح، مما يمنع مشاكل إعادة التعريف عند إعادة تنفيذ الكود.


تحتاج في بعض الأحيان إلى إضافة أكواد برمجية مخصّصة داخل منصتك لأغراض مختلفة، كربط أدوات التتبع والقياس (مثل ميتا بكسل أو إحصاءات Google) أو تتبع الأحداث والإجراءات المختلفة التي تتم على منصتك. في العادة، تحتاج إلى خبرة برمجية لإضافة تلك الأكواد وتحدث أخطاء كبيرة في بعض الأحيان.


لذلك تتيح لك ميزة «الأكواد المخصّصة» تسهيل إدارة الأكواد البرمجية وإضافتها والتعديل عليها وحذفها دون الحاجة للتعديل على الكود المصدري للموقع.

كيفية الوصول إلى تبويب «الأكواد المخصّصة»

الذهاب إلى القائمة الجانبية في لوحة التحكّم
انتقل إلى «الإعدادات»
اختر «إعدادات المنصة»
انتقل إلى تبويب «الأكواد المخصّصة»

تظهر بعد ذلك صفحة تستعرض كل الأقسام البرمجية المُتاح لك إضافة أكواد مخصّصة داخلها كما هو موضّح في الصورة أدناه

كيفية إضافة كود مخصّص إلى المنصة؟

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

الذهاب إلى تبويب «أكواد مخصصة»، اختر المكان الذي تريد إضافة الكود البرمجي فيه، مثل "كود مخصص قبل نهاية وسم <head/>"، كما هو موضّح في الصورة التالية



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



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


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

💡 ملحوظة: هذه الأكواد يتم تفعيلها بعد الحفظ وبالتالي إذا حدث خطأ غير متوقع في منصتك بعد تفعيل أحد الأكواد المخصصة فقم بإلغاء أو حذف هذا الكود فقط.

تحديث في: 11/01/2024