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

Katie Hempenius

Barry Pollard

تاريخ النشر: 29 يوليو 2021

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

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

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

في هذه المقالة، سنناقش أساليب تحسين العلامات وأنظمة إدارة العلامات لتعزيز الأداء ومقاييس Core Web Vitals. على الرغم من أنّ هذا المستند يشير إلى Google Tag Manager، فإنّ العديد من الأفكار التي تمت مناقشتها تنطبق على أدوات إدارة العلامات الأخرى.

التأثير في Core Web Vitals

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

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

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

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

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

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

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

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

لا يجب تحميل جميع النصوص البرمجية باستخدام Tag Manager

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

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

ملاحظة: يتم عادةً تحميل الموارد المطلوبة باستخدام Tag Manager في وقت لاحق مقارنةً بالموارد المطلوبة مباشرةً. إذا كان نظام إدارة العلامات يُستخدم بشكل أساسي لعرض موارد غير أساسية، يمكن الاستفادة من هذا التأخير من خلال توفير آلية لتأخير الطلبات غير الأساسية.

يُرجى توخّي الحذر عند استخدام علامات HTML المخصّصة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تُعدّ وحدات البكسل نوع العلامات الأكثر أداءً وأمانًا لأنّه لا يتم تنفيذ أي رمز JavaScript بعد تفعيلها. تتميّز وحدات البكسل بحجم موارد صغير جدًا (أقل من 1 كيلوبايت) ولا تتسبّب في حدوث تغييرات في التصميم.

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

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

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

ملاحظة: تظل واجهتا برمجة التطبيقات sendBeacon() وfetch() keepalive تعملان عندما يكون المتصفّح يلغي تحميل الصفحة. على سبيل المثال، يمكن استخدام كلتا واجهتَي برمجة التطبيقات لتتبُّع النقرات على الروابط الخارجية. في المقابل، من المرجّح أن تفشل أساليب مثل وحدات البكسل وXMLHttpRequest في هذه الحالات.

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

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 هي علامة تسمح باستخدام واجهة برمجة التطبيقات Fetch لإجراء طلبات غير محظورة، مثل إعداد تقارير الأحداث والإحصاءات. ويتم استخدامها من خلال تضمين 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().

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

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

ننصحك بتصنيف العلامات مع مالك في Tag Manager. من السهل نسيان مالك العلامة، ما يؤدي إلى الخوف من إزالتها في حال تعطُّل شيء ما.

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

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

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

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

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

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

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

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

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

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

لتنشيط المشغّل، عليك إرسال الحدث المقابل إلى طبقة البيانات.

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

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

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

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

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

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

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

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

المتغيّرات

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

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

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

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

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

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

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

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

// 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 Tag Manager بدون طبقة البيانات، ننصح بشدة باستخدامها. تدمج طبقة البيانات البيانات التي يمكن الوصول إليها من خلال النصوص البرمجية التابعة لجهات خارجية في مكان واحد، ما يوفّر رؤية أفضل لاستخدامها. من بين أمور أخرى، يمكن أن يساعد ذلك في تقليل عمليات حساب المتغيّرات الزائدة وتنفيذ النصوص البرمجية.

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

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

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

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

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

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

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

استخدام القوائم المسموح بها والمحظورة

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

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

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

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

ننصحك باستخدام ميزة "وضع علامات التتبُّع من جانب الخادم"

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

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

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

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

الحاويات

تسمح أنظمة Tag Manager عادةً باستخدام نُسخ متعددة، يُشار إليها غالبًا باسم الحاويات، ضمن إعداداتها. يمكن التحكم في حاويات متعددة ضمن حساب واحد في أداة "إدارة العلامات".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تسمية نُسخ الحاوية

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

سير عمل العلامات

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

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

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

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

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

وضع المعاينة

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

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

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

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

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

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

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

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

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

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

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

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

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

عند تدقيق العلامات، تذكَّر تنظيف المشغّلات والمتغيّرات. ويمكن أن تكون أيضًا سببًا في حدوث مشاكل في الأداء.

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