أفضل الممارسات المتعلّقة بالعلامات ومدراء العلامات

تحسين العلامات وأدوات إدارة العلامات في "مؤشرات أداء الويب الأساسية"

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

يتفاوت تأثير أداء العلامات ومديري العلامات بصورة كبيرة من موقع إلى آخر. يمكن مقارنة أدوات إدارة العلامات بمغلف: على سبيل المثال، يوفر مدير العلامات وعاء سفينة، ولكن يعود إليك تحديد ما تملأه به وكيفية استخدامه.

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

التأثير في "مؤشرات أداء الويب الأساسية"

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

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

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

مهلة الاستجابة لأوّل إدخال (FID) عرضة للمنافسة على وحدة المعالجة المركزية (CPU) على سلسلة التعليمات الرئيسية. ويمكن أن يؤثر ذلك أيضًا في مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) الأحدث، وقد لاحظنا ارتباطًا بين حجم أدوات إدارة العلامات وانخفاض نتائج مقياس INP.

أنواع العلامات

يختلف تأثير العلامات في الأداء حسب نوع العلامة. بشكل عام، علامات الصور ("وحدات البكسل") هي الأكثر أداءً، تليها النماذج المخصّصة، وأخيرًا علامات HTML المخصّصة. تختلف علامات البائعين بناءً على الوظائف التي تسمح بها.

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

عند التفكير في العلامات، ضع في اعتبارك المقياس: قد يكون تأثير أداء أي علامة فردية ضئيلاً، ولكنّه يمكن أن يصبح كبيرًا عند استخدام عشرات أو مئات العلامات في الصفحة نفسها.

يجب عدم تحميل بعض النصوص البرمجية باستخدام أداة "إدارة العلامات من Google".

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

استخدام علامات HTML المخصّصة بحذر

تتوفّر علامات HTML المخصّصة منذ عدة سنوات وهي تُستخدَم بكثرة في معظم المواقع الإلكترونية. تتيح لك علامات HTML المخصّصة إدخال الرمز الخاص بك مع بعض القيود، فعلى الرغم من الاسم، فإنّ الاستخدام الأساسي لهذه العلامة هو إضافة عناصر <script> مخصّصة إلى الصفحة.

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

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

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

تجربة استخدام النماذج المخصصة

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

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

إدخال النصوص البرمجية بشكل صحيح

إنّ استخدام أداة "إدارة العلامات" لإدخال نص برمجي هو من حالات الاستخدام الشائعة جدًا. والطريقة المُقترَحة لإجراء ذلك هي استخدام نموذج مخصّص وواجهة برمجة التطبيقات injectScript.

للحصول على معلومات عن استخدام واجهة برمجة التطبيقات injectScript لتحويل علامة HTML مخصّصة حالية، يُرجى الاطّلاع على المقالة تحويل علامة حالية.

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

• يجب تحميل المكتبات والنصوص البرمجية الكبيرة التابعة لجهات خارجية من خلال علامة نص برمجي تنزِّل ملفًا خارجيًا (على سبيل المثال، <script src="external-scripts.js">)، بدلاً من نسخ محتوى النص البرمجي مباشرةً إلى العلامة. على الرغم من أنّ الاستخدام المستمر للعلامة <script> يؤدي إلى استبعاد رحلة ذهاب وعودة منفصلة لتنزيل محتوى النص البرمجي، تزيد هذه الممارسة من حجم الحاوية وتمنع تخزين النص البرمجي في ذاكرة التخزين المؤقت بشكل منفصل من خلال المتصفّح.
• ينصح العديد من المورّدين بوضع علامة <script> في أعلى <head>. ومع ذلك، بالنسبة إلى النصوص البرمجية التي يتم تحميلها من خلال "إدارة العلامات"، عادةً ما يكون هذا الاقتراح غير ضروري: في معظم الحالات، يكون المتصفّح قد انتهى من قبل من تحليل <head> بحلول الوقت الذي يتم فيه تنفيذ "إدارة العلامات".

استخدام وحدات البكسل

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

يُرجى التواصل مع مقدّم الخدمة التابع لجهة خارجية للحصول على مزيد من المعلومات حول دعمه لوحدات البكسل. بالإضافة إلى ذلك، يمكنك محاولة فحص الرمز الخاص بعلامة <noscript>. إذا كان المورّد يتيح استخدام وحدات البكسل، سيتم تضمينها غالبًا في علامة <noscript>.

بدائل وحدات البكسل

انتشرت وحدات البكسل إلى حد كبير لأنّها كانت في وقت ما إحدى الطرق الأقل تكلفة والأكثر موثوقية لإجراء طلب HTTP في الحالات التي لا تكون فيها استجابة الخادم ذات صلة ( على سبيل المثال، عند إرسال البيانات إلى مقدّمي التحليلات). تم تصميم واجهات برمجة التطبيقات navigator.sendBeacon() وfetch() keepalive لتلبية حالة الاستخدام نفسها، لكنها أكثر موثوقية من وحدات البكسل.

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

sendBeacon()

تم تصميم واجهة برمجة التطبيقات navigator.sendBeacon() لإرسال كميات صغيرة من البيانات إلى خوادم الويب في الحالات التي لا تكون فيها استجابة الخادم مهمة.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() لديه واجهة برمجة تطبيقات محدودة: يتيح فقط تقديم طلبات POST ولا يتيح إعداد عناوين مخصّصة. وهو متوافق مع كل المتصفحات الحديثة.

fetch() keepalive

keepalive عبارة عن علامة تتيح استخدام واجهة برمجة التطبيقات الجلب لإرسال طلبات لا تؤدي إلى الحظر، مثل إعداد تقارير الأحداث والإحصاءات. ويتم استخدامه من خلال تضمين keepalive: true في المعلَمات التي تم تمريرها إلى fetch().

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

إذا بدا أنّ كل من fetch() keepalive وsendBeacon() متشابهتان جدًا، فهذا بسببهما. في الواقع، تم إنشاء sendBeacon() في متصفّحات Chromium الآن على fetch() keepalive.

عند الاختيار بين fetch() keepalive وsendBeacon()، من المهم مراعاة الميزات والدعم الذي تحتاج إليه من المتصفّح. تتميز واجهة برمجة التطبيقات fetch() بمرونة أكبر بكثير من استخدامها، إلا أنّ keepalive يوفر دعمًا أقل للمتصفّح مقارنةً بـ sendBeacon().

الحصول على توضيح

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

وننصحك أيضًا بتصنيف العلامات التي يملكها مالك في "إدارة العلامات". من السهل جدًا نسيان من يمتلك علامة والخوف من إزالتها في حالة الضرورة!

أسباب طلب المساعدة

على مستوى عالٍ، يتألّف تحسين أدوات تشغيل العلامات بشكل عام من التأكّد من عدم تشغيل العلامات أكثر من اللازم واختيار عامل تشغيل يوازن بين احتياجات النشاط التجاري وتكاليف الأداء.

المشغلات نفسها هي رمز JavaScript يعمل على زيادة حجم إدارة العلامات وتكلفة التنفيذ. في حين أن معظم المشغلات صغيرة، فإن التأثير التراكمي يمكن أن يزيد. على سبيل المثال، قد يؤدي وجود العديد من أحداث النقر أو مشغلات الموقّت إلى زيادة عبء العمل في إدارة العلامات بشكلٍ كبير.

اختيار حدث عامل تشغيل مناسب

لا يكون تأثير العلامة في الأداء ثابتًا، فبشكل عام، كلما تم تنشيط العلامة في وقت مبكر، زاد تأثيرها في الأداء. عادةً ما يتم تقييد الموارد أثناء التحميل الأولي للصفحة، وبالتالي يؤدي تحميل أو تنفيذ مورد معين (أو علامة) إلى إزالة الموارد من أي عنصر آخر.

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

يمكن تشغيل العلامات في مشاهدات الصفحة على الويب (عادةً Page load أو في DOM Ready أو Window Loaded) أو استنادًا إلى حدث مخصّص. لتجنُّب التأثير في تحميل الصفحة، ننصحك بتنشيط العلامات غير الأساسية بعد Window Loaded.

استخدام أحداث مخصّصة

تسمح لك الأحداث المخصّصة بتنشيط عوامل التشغيل استجابةً لأحداث الصفحة التي لا تغطيها العوامل المشغِّلة المضمّنة في أداة "إدارة العلامات من Google". على سبيل المثال، تستخدم العديد من العلامات العوامل المُشغِّلة لمشاهدة الصفحة، ومع ذلك، قد تكون الفترة الزمنية بين DOM Ready و Window Loaded طويلة على العديد من الصفحات، ما قد يصعّب عملية الضبط عند تنشيط إحدى العلامات. توفر الأحداث المخصصة حلاً لهذه المشكلة.

لاستخدام أحداث مخصّصة، عليك أولاً إنشاء عامل تشغيل حدث مخصّص وتعديل علاماتك لاستخدام هذا المشغِّل.

ولتنشيط العامل المشغِّل، ادفع الحدث المقابل إلى طبقة البيانات.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

استخدام شروط عامل تشغيل معيّنة

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

يمكن أيضًا دمج المتغيّرات المضمَّنة في شروط عامل التفعيل للحدّ من تنشيط العلامات.

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

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

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

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

المتغيرات

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

كما هي الحال مع عوامل التشغيل، تؤدي المتغيّرات إلى إضافة رمز JavaScript إلى "إدارة العلامات"، ما يؤدي إلى حدوث مشاكل في الأداء. يمكن أن تكون المتغيرات أنواعًا مضمّنة بسيطة نسبيًا، يمكنها، على سبيل المثال، قراءة أجزاء من عنوان URL أو ملفات تعريف الارتباط أو طبقة البيانات أو نموذج العناصر في المستند (DOM). أو يمكن أن تكون رموز JavaScript مخصّصة غير محدودة في الأساس.

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

إدارة العلامات

سيؤدي استخدام العلامات بكفاءة إلى تقليل مخاطر حدوث مشاكل في الأداء.

استخدام طبقة البيانات

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

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

مع أنّه يمكن استخدام أداة "إدارة العلامات من Google" بدون طبقة البيانات، فإنّنا ننصح بشدة باستخدامها. توفِّر طبقة البيانات طريقة لدمج البيانات التي يتم الوصول إليها عن طريق النصوص البرمجية التابعة لجهات خارجية في مكان واحد، ما يوفّر مستوى رؤية أفضل حول استخدامها. من بين أمور أخرى، يمكن أن يساعد ذلك في تقليل العمليات الحسابية للمتغيرات المتكررة وتنفيذ النص البرمجي. يتحكّم استخدام طبقة بيانات أيضًا في البيانات التي تصل إليها العلامات، بدلاً من منح إذن الوصول الكامل إلى متغيّر JavaScript أو نموذج العناصر في المستند (DOM).

إزالة العلامات المكرّرة وغير المستخدَمة

يمكن أن تحدث علامات مكرّرة عند تضمين علامة في ترميز HTML لصفحة ما بالإضافة إلى إدخال العلامات من خلال أداة إدارة العلامات.

يجب إيقاف العلامات غير المستخدَمة مؤقتًا أو إزالتها بدلاً من حظرها من خلال استخدام استثناء عامل التفعيل. ويؤدي إيقاف علامة مؤقتًا أو إزالتها إلى إزالة الرمز من الحاوية، على عكس الحظر.

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

استخدام قائمتَي السماح والرفض

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

يتم ضبط قائمتَي السماح والرفض من خلال طبقة البيانات.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

على سبيل المثال، يمكن عدم السماح بأي علامات HTML مخصَّصة أو متغيرات JavaScript أو الوصول المباشر إلى DOM. وهذا يعني أنه لا يمكن استخدام سوى وحدات البكسل والعلامات المحددة مسبقًا، مع بيانات من طبقة البيانات. وعلى الرغم من أنّ هذا الإجراء مقيِّد بالتأكيد، إلا أنّه قد يؤدي إلى تنفيذ إدارة العلامات من حيث الأداء والأمان.

تجربة استخدام وضع العلامات من جهة الخادم

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

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

تجدر الإشارة إلى أنّ وضع العلامات من جهة الخادم لا يعمل إلّا مع بعض العلامات، ويختلف توافق العلامات حسب المورّد.

لمزيد من المعلومات، راجِع مقدمة عن وضع العلامات من جهة الخادم.

الحاويات

يسمح مديرو العلامات عادةً بمثيلات أو "حاويات" متعددة ضمن إعدادها. ويسمح هذا الإجراء بالتحكّم في حاويات متعدّدة ضمن حساب مدير العلامات الواحد.

استخدِم حاوية واحدة فقط لكل صفحة.

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

ومن النادر أن يتم استخدام حاويات متعددة بشكل فعّال. ومع ذلك، يمكن أن تكون هناك حالات يمكن أن ينجح فيها ذلك - إذا تم التحكم فيه بشكل جيد - بما في ذلك:

• استخدام حاوية "التحميل المبكر" الأخف، وحاوية "التحميل لاحقًا" الأثقل، بدلاً من حاوية كبيرة واحدة.
• التمتع بحاوية محظورة يستخدمها عدد أقل من المستخدمين التقنيين، وحاوية أقل حظرًا ولكنها خاضعة لرقابة أكبر، وذلك للعلامات التي لا يمكن استخدامها في الحاوية المحظورة.

إذا كان يجب استخدام حاويات متعددة في كل صفحة، اتّبِع إرشادات "إدارة العلامات من Google" لإعداد حاويات متعددة.

استخدِم حاويات منفصلة إذا لزم الأمر.

إذا كنت تستخدم أداة "إدارة العلامات" لمواقع متعددة (مثل تطبيق ويب وتطبيق متوافق مع الأجهزة الجوّالة)، قد يكون عدد الحاويات التي تستخدمها مفيدًا أو يضر بإنتاجية سير العمل. ويمكن أن يؤثر ذلك أيضًا في الأداء.

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

عادةً ما تؤدي محاولة إعادة استخدام حاوية واحدة على نطاق واسع جدًا إلى زيادة تعقيد الحاوية وحجمها من خلال فرض استخدام منطق معقد لإدارة العلامات والعوامل المشغِّلة.

مراقبة حجم الحاوية

يتم تحديد حجم الحاوية عن طريق العلامات والعوامل المشغلة والمتغيرات فيها. وعلى الرغم من أنّ الحاوية الصغيرة قد تظل تؤثر سلبًا في أداء الصفحة، فإنّ الحاوية الكبيرة ستحدث فيها بالتأكيد.

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

الحدّ الأقصى لحجم الحاوية في "إدارة العلامات من Google" هو 200 كيلوبايت، وسيتم تحذيرك بشأن حجم الحاوية الذي يبدأ من 140 كيلوبايت. ومع ذلك، يجب أن تهدف معظم المواقع الإلكترونية إلى إبقاء حاوياتها أصغر بكثير من ذلك. بالنسبة إلى المنظور، يبلغ متوسط حجم حاوية الموقع الإلكتروني حوالي 50 كيلوبايت.

لتحديد حجم الحاوية، انظر إلى حجم الاستجابة التي يعرضها https://www.googletagmanager.com/gtag/js?id=YOUR_ID. ويحتوي هذا الرد على مكتبة "إدارة العلامات من Google" بالإضافة إلى محتوى الحاوية. يبلغ حجم مكتبة "إدارة العلامات من Google" في حد ذاتها 33 كيلوبايت تقريبًا.

تسمية إصدارات الحاوية

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

مهام وضع العلامات

من المهم إدارة التغييرات في العلامات لضمان عدم تأثيرها سلبًا في أداء الصفحة.

اختبار العلامات قبل النشر

يمكن أن يساعد اختبار العلامات قبل النشر في رصد المشاكل (الأداء وغيرها) قبل شحنها.

أمور يجب مراعاتها عند اختبار علامة تشمل ما يلي:

• هل العلامة تعمل بشكل صحيح؟
• هل تتسبب العلامة في أي متغيّرات في التصميم؟
• هل تُحمِّل العلامة أي موارد؟ ما حجم هذه الموارد؟
• هل تؤدي العلامة إلى تشغيل نص برمجي طويل الأمد؟

وضع المعاينة

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

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

الاختبار المستقل

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

مراقبة أداء العلامة

يمكن استخدام واجهة برمجة تطبيقات المراقبة في أداة "إدارة العلامات من Google" لجمع معلومات عن وقت تنفيذ علامة معينة. سيتم إبلاغ هذه المعلومات إلى نقطة نهاية عند اختيارك.

ولمزيد من المعلومات، اطّلِع على المقالة كيفية إنشاء أداة مراقبة في أداة "إدارة العلامات من Google".

طلب الموافقة على تغييرات الحاويات

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

تدقيق استخدام العلامات بشكل دوري

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

إنّ تصنيف كل علامة بحيث يكون المالك واضحًا يتيح بسهولة تحديد هوية المستجيب لتلك العلامة ويمكنه تحديد ما إذا كانت لا تزال مطلوبة.

عند تدقيق العلامات، لا تنس تنظيف المشغلات والمتغيرات أيضًا. ويمكن أن تكون بسهولة هي سبب مشاكل الأداء أيضًا.

لمزيد من المعلومات، راجع إبقاء النصوص البرمجية التابعة لجهات خارجية تحت التحكم.