⛏️ 👏🏼 💍 دليل علامات HTML المخصص لبرنامج إدارة العلامات من Google بواسطة Simo Ahava 💇🏼 🏓 🌻

في نهاية شهر يناير ، نشر Simo Ahava في مدونته مراجعة حول إمكانية استخدام علامات HTML المخصصة في إدارة العلامات من Google. توفر علامات HTML المخصصة فرصة كبيرة لتغيير المحتوى على الموقع ، ولكن يجب أن تكون حذرًا للغاية - حيث إن ميزات العلامات ومعالجتها تنطوي على مخاطر كبيرة. لقد ترجم محلل MediaGuru Timur Ledenyov هذه المراجعة المفيدة لك.

لبعض الوقت (منذ نهاية 2012) ، كان أحد أهم خيارات GTM هو علامة HTML المخصصة. تسمح هذه الأداة السحرية لـ GTM بإضافة عنصر HTML إلى صفحة موقع الويب. منذ عام 2012 ، تطور برنامج إدارة العلامات من Google من بيئة معزولة مع قوالب علامات مخصصة إلى حل غير محدود لإدارة المحتوى من جانب العميل.

في المقالة ، سننظر في مبادئ علامة HTML المخصصة وإمكانيات تطبيقها.

تعبئة علامات HTML المخصصة

كما يوحي الاسم ، تسمح لك علامة HTML المخصصة بوضع عناصر HTML على صفحة الموقع. لنقم بإنشائه:

<script>
  console.log('Hello!');
</script>

<div>
  <span>Hello!</span>
</div>

تضيف هذه العلامة ثلاثة عناصر إلى الصفحة:

<script>، التي يتم تجميعها وتنفيذها في JavaScript ؛
منع div.
<span>متضمن في <div>

عندما تنشر حاوية وتلقي نظرة على المصدر المصغر لحاوية JavaScript ، فإنها تبدو كما يلي: تبدو

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

إن علامتي EnableIframeMode و enableEditJsMacroBehavior هي الميزات القديمة التي لم تعد مرئية في واجهة المستخدم. يمكنك جعلها مرئية في واجهة علامة HTML المخصصة إذا كنت تعرف كيف. لكنها لن تؤثر على أي شيء.

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

حقنة

عندما يتم تنشيط علامة HTML المخصصة في برنامج إدارة العلامات من Google ، تبدأ الآلية التالية:

يتم إنشاء دمية <div>، باستخدام السمة .innerHTML ، يتم إضافة سلسلة مشفرة تمثل علامة HTML المخصصة الخاصة بك.
هذا يجبر المتصفح على التعامل مع السلسلة المشفرة على أنها HTML ، بحيث يتم تحويل العلامات المضافة إلى HTML المخصص إلى عناصر HTML.
تتم إزالة هذه العناصر واحدًا تلو الآخر ، <div>ثم تبدأ في الحقن.
ثم يتم إضافة كل عنصر كعنصر تابع للوثيقة.

هناك بعض الفروق الدقيقة في هذه العملية:

كيف يتفاعل برنامج إدارة العلامات من Google مع onHtmlSuccess و onHtmlFailure في قائمة الانتظار
كيف <script>يتم مسح العناصر من جميع سمات المستخدم قبل الحقن.

ماذا تعني؟ تتم إضافة كل ما تدخله في علامة HTML المخصصة إلى نهاية النص ، مهما كان وقت الحقن. عادة ما تعني تذييل الصفحة ، ولكن هذا ليس ضروريًا ، نظرًا لتخطيطات الصفحة الحديثة.

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

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

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

أعترف أن هذا التنازل عن المقال لا يخلو من السخرية.

نصوص برمجية مخصصة لـ HTML

لماذا تستخدم هذه العلامات وتطبق حل إدارة العلامات لإدخال عنصر؟ سؤال ممتاز لا أجد له إجابة سريعة ونهائية.

يمكنني القول أن عددًا كبيرًا من HTML المخصص في الحاوية يمكنه التحدث عن أحد المواقف التالية:

أنت تواجه حالة معقدة للغاية حيث لا تناسب علامات GTM القياسية أو القوالب المخصصة.
أنت مستخدم جديد لـ GTM (أو JavaScript) ولا تدرك أنه يمكن استبدال أي من علامات HTML المخصصة الخاصة بك بعلامات قياسية أو قوالب مخصصة.
, -, .
, - .
, Google Tag Manager, .

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

دعنا نلقي نظرة على بعض السيناريوهات التي ربما تريد فيها تجربة علامات HTML المخصصة.

إضافة عنصر إلى مكان معين على الصفحة

من عيوب علامة HTML المخصصة أنها تقوم بتضمين العنصر في النهاية <body>. لماذا؟ إذا كان العنصر مكونًا مرئيًا (على سبيل المثال ، يجب عرضه على الشاشة) ، فمن المرجح أن النهاية <body>ليست هي المكان الذي ترغب في رؤيته. للتغلب على هذا ، تحتاج إلى استخدام JavaScript وأساليب معالجة DOM الخاصة به.

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

على سبيل المثال، أريد أن أضيف عنوان فرعي صغير للصفحة لجعلها تبدو مثل هذا:

الآن، إذا قمت بإنشاء HTML مخصص على النحو التالي: <h3> It's really cool - I promise!</h3>، يتم إضافة عنصر إلى نهاية <body>وسوف لا تبدو جيدة جدا.

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

<script>
  (function() {
    //    <h3> 
    var h3 = document.createElement('h3');
    
    //  
    h3.innerText = "It's really cool - I promise!";
    
    //     <h1>
    var title = document.querySelector('h1');
    
    //      <h1>
    if (title) {
      title.parentElement.insertBefore(h3, title.nextSibling);
    }
  })();
</script>

النتيجة النهائية التي تراها في لقطة الشاشة أعلاه.

هذه مفارقة دقيقة - أنت تستخدم HTML المخصص لإنشاء عنصر ( <script>) سينشئ عنصرًا آخر ( <h3>). نعم ، سيكون أمراً رائعاً إذا كان بإمكانك التعريف في HTML المخصص حيث يوجد العنصر. في الواقع ، سيكون الأمر أكثر برودة إذا كان هناك قالب مخصص يسمح لك بإنشاء عنصر مع القدرة على تحديد موقع للعنصر. وبالتالي ، لا تحتاج إلى إدخال النص في نهاية الكود على الإطلاق! لكننا كنا مشتتين.

وضع النص في `<head>`أعلى مستوى ممكن

ويرجع ذلك جزئيًا إلى السيناريو السابق ، ولكنه يستحق اهتمامًا خاصًا اعتمادًا على عدد المرات التي يظهر فيها هذا الموقف. في بعض الأحيان يتم سؤالك: "ضع النص كما هو أعلاه <head>."

لذلك تحتاج إلى تشغيل البرنامج النصي على الصفحة في أقرب وقت ممكن. وكلما زاد العنصر <head>، زادت سرعة معالجته كجزء من الصفحة المعروضة.

ولكن يتم فقدان هذه الميزة عند استخدام برنامج إدارة العلامات من Google. عادة ، عندما يتم تحميل مكتبة GTM ، تكون المعالجة <head>قد انتهت بالفعل ، ويتم عرض المتصفح بقوة وقدرة <body>. وبسبب هذا ، فإن محاولة إضافة برنامج نصي إلى <head>أعلى مستوى ممكن لا معنى له وفي الواقع يضر بالنتيجة النهائية فقط.

لماذا ا؟ عندما قمت بإنشاء HTML مخصص ، فإنه يشكل عنصرًا ويدرجه فيه<head>. أولاً ، يحتاج المتصفح إلى إضافة HTML مخصص (نتيجة الأداء) ، ثم إنشاء عنصر جديد (نتيجة أداء أخرى) وأخيرًا إضافة عنصر جديد إلى <head>(نتيجة الأداء).

بدلاً من ذلك ، تحتاج إلى إضافة <script>HTML مباشرة إلى Custom. باستخدام هذه الطريقة ، ستتم إضافتها إلى النهاية <body>، وسينفذها المتصفح في أسرع وقت ممكن.

تنزيل كود JavaScript لجهة خارجية

لنكمل التجربة من السيناريو السابق. لنفترض أن لديك مطورًا تابعًا لجهة خارجية ترغب في تحميل رمز JavaScript الخاص به على الموقع. وأدركت أنك تحتاج فقط إلى إضافة عنصر <script>إلى الصفحة باستخدام HTML المخصص.

في هذه الحالة ، لا تحتاج إلى استخدام HTML مخصص على الإطلاق.

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

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

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

تغيير ux

أحد الأشياء التي تريد القيام بها باستخدام Custom HTML هو تعديل تجربة المستخدم (UX). للقيام بذلك ، يمكنك استخدام شيء مثل لافتة ملف تعريف الارتباط ، من الممكن تغيير الأنماط على الصفحة أو إضافتها <iframe>، والتي تقوم بتحميل بعض القطعة المناسبة لموقع التجارة الإلكترونية الخاص بك.

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

(, Brave) / GTM. ( , ).
/ , . , HTML . Google Tag Manager , , , . querySelector() , – - .
يضاف إلى كل ذلك الأسباب المتعلقة بالأداء التي ذكرتها أعلاه. ستؤدي إضافة كل عنصر ديناميكي بترتيب متزايد إلى تدهور أداء الصفحة ، مما سيؤدي إلى أشياء مزعجة: ستبدأ العناصر المخصصة في الظهور وتختفي ؛ سوف تتدهور جودة البيانات (عندما يكون لدى iframe ، الذي تقوم بتغييره ديناميكيًا ، وقت قبل إجراء التغييرات) حتى التأخير وتجميد الصفحة ، خاصة في مواقع الصفحة الواحدة.

لذلك ، يرجى عدم التفكير في استخدام برنامج إدارة العلامات من Google كنظام لإدارة المحتوى.

الموجودات

كانت هذه نظرة عامة موجزة على ميزات علامات HTML المخصصة.

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

ومع ذلك ، هناك تطبيقات مخصصة لـ HTML اليوم. قد يكون إنشاء مستمع للنقر باستخدام علامة HTML المخصصة (document.addEventListener ()) أكثر فائدة من تشغيل نوع من التعليمات البرمجية المخصصة باستخدام مشغلات GTM.

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

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

ومع ذلك ، آمل أن تحل النماذج المخصصة ذات يوم محل علامات HTML المخصصة.

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

إذا كنت لا تعرف ما يفعله الرمز ، فراجع مطور الويب المألوف.

دليل علامات HTML المخصص لبرنامج إدارة العلامات من Google بواسطة Simo Ahava