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

Katie Hempenius

Barry Pollard

تاريخ النشر: 29 تموز (يوليو) 2021

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

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

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

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

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

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

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

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

اختيار نوع العلامة المناسب

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

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

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

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

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

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

توخي الحذر بشأن علامات HTML المخصّصة

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

يمكن استخدام علامات HTML المخصّصة بعدة طرق مختلفة، ويختلف تأثيرها على الأداء اختلافًا كبيرًا. عند قياس أداء موقعك الإلكتروني، يُرجى العِلم أنّه تُنسب معظم الأدوات تأثير أداء علامة HTML مخصّصة إلى أداة إدارة العلامات التي أدخلتها، وليس إلى العلامة نفسها.

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

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

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

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

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

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

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

للحصول على معلومات عن استخدام injectScript API لتحويل علامة HTML مخصّصة حالية، اطّلِع على تحويل علامة حالية.

إذا كان عليك استخدام علامة HTML مخصَّصة، تذكَّر ما يلي:

• يجب تحميل المكتبات والنصوص البرمجية الكبيرة التابعة لجهات خارجية مع علامة نص برمجي (مثل <script src="external-scripts.js">) تنزِّل ملفًا خارجيًا، بدلاً من نسخ محتوى النص البرمجي ولصقه مباشرةً في العلامة. على الرغم من أنّ عدم استخدام علامة <script> يؤدي إلى إيقاف عملية تحميل منفصلة لمحتوى النص البرمجي، فإنّ هذه الممارسة تزيد من حجم الحاوية وتمنع المتصفّح من تخزين النص البرمجي في ذاكرة التخزين المؤقت بشكل منفصل.
• ينصح العديد من المورّدين بوضع علامة <script> في أعلى <head>. ومع ذلك، غالبًا ما يكون هذا الإجراء غير ضروري بالنسبة إلى النصوص البرمجية التي يتم تحميلها باستخدام أداة "إدارة العلامات من Google". في معظم الحالات، ينتهي المتصفّح من تحليل <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 API 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() يبدوان متشابهَين جدًا، فذلك لأنّهما متشابهَين. في الواقع، في متصفّحات Chromium، تمّ الآن إنشاء sendBeacon() استنادًا إلى fetch() keepalive.

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

فهم وظيفة العلامات

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

ننصحك بتصنيف العلامات باستخدام مالك في أداة "إدارة العلامات من Google". من السهل أن تنسى صاحب علامة معيّنة، ما قد يؤدي إلى الخوف من إزالتها في حال حدوث مشكلة.

العوامل التي تؤدي إلى الظهور

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

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

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

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

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

يمكن تشغيل العلامات عند مشاهدات الصفحة على الويب (عادةً 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);

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

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

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

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

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

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

المتغيّرات

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

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

يجب الحدّ من استخدام المتغيّرات إلى أدنى حدّ، لأنّ أداة "إدارة العلامات من Google" تقيّمها باستمرار. أزِل المتغيّرات القديمة التي لم تعُد مستخدَمة لتقليل حجم النص البرمجي لإدارة العلامات ووقت المعالجة الذي يستخدمه.

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

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

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

طبقة البيانات هي صفيف JavaScript من الكائنات التي تحتوي على معلومات عن الصفحة. تحتوي هذه العناصر على جميع المعلومات التي تريد تمريرها إلى "إدارة العلامات من Google".

يمكن أيضًا استخدام طبقة البيانات لتشغيل العلامات.

// 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.

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

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

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

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

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

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

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

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

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

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

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

ننصحك باستخدام وضع العلامات من جهة الخادم.

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على مقدّمة عن وضع العلامات من جهة الخادم .

الحاويات

تسمح أدوات إدارة العلامات عادةً بمثيلات متعددة، غالبًا ما يُشار إليها باسم الحاويات، ضمن عملية الإعداد. يمكن التحكّم في حاويات متعددة ضمن حساب واحد على أداة "إدارة العلامات من Google".

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

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

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

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

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

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

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

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

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

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

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

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

تفرض أداة "إدارة العلامات من Google" حدودًا قصوى لحجم الحاوية، وهي 300 كيلوبايت، وتُرسل تحذيرًا بشأن حجم الحاوية عند بلوغ ‎70% من الحد الأقصى المسموح به للحجم.

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

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

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

عمليات وضع العلامات

من المهم إدارة التغييرات التي يتم إجراؤها على العلامات كي لا يكون لها تأثير سلبي على أداء الصفحة.

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

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

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

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

وضع المعاينة

يتيح لك وضع المعاينة testing tag changes on your actual site without having to deploy them to the public first. يتضمّن وضع "المعاينة" وحدة تحكّم لتصحيح الأخطاء تقدّم معلومات عن العلامات.

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

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

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

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

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

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

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

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

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

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

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

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

عند تدقيق العلامات، تذكَّر تنظيف المشغِّلات والمتغيّرات. وقد تؤدي هذه العوامل في كثير من الأحيان إلى حدوث مشاكل في الأداء أيضًا.

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