في الأسبوع الماضي ، أضاف فريق Adobe Dynamic Tag Management من جميع النجوم بعض الميزات الجديدة الجذابة إلى قواعد أحداث DTM. هناك نوعان جديدان من الأحداث للقواعد المستندة إلى الأحداث التي يمكنك استخدامها.

1. مخصص
2. PushState أو التجزئة

اقرأ الأقسام أدناه للحصول على مزيد من المعلومات حول كل نوع حدث.

القاعدة القائمة على الحدث: مخصص

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

عند إنشاء قاعدة مستندة إلى حدث ، يمكنك إعدادها لأحداث افتراضية معينة. يحتوي كل متصفح (حتى Internet Explorer) على أحداث افتراضية يمكن تشغيلها لإجراءات معينة. بعض الأشياء السهلة هي:

• نقرات الماوس
• تجاوز الماوس (تحوم فوق شيء ما على الصفحة)
• تركيز حقل النموذج (ينتقل المؤشر داخل حقل النموذج)
• تمويه حقل النموذج (يترك المؤشر حقل نموذج)
• يقدم النموذج
• إلخ.

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

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

إذا كنت معتادًا على قواعد الاتصال المباشر لـ DTM ، فقد تسأل نفسك "لماذا لا تستخدم قاعدة الاتصال المباشر فقط؟" سؤال صحيح. تكمن المشكلة في أن قواعد الاستدعاء المباشر تبني اعتمادًا على DTM. إذا كنت مطورًا وطلب مني أحدهم وضع مجموعة من التعليمات البرمجية التي تشير إلى _satellite.track في الكود الخاص بي ، فسأشكك في ذلك وعلى الأرجح سأقول لا! بدلاً من ذلك ، يمكنك استخدام حدث ليس له تبعيات.

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

• الحدث - قم بتشغيل أن شيئًا ما حدث دون إرسال أي بيانات إضافية حول الحدث
• CustomEvent - أضف بعض البيانات إلى الحدث

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

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

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

بعد ذلك ، سأقوم بتكوين قاعدة للاستماع في DTM:

1. إضافة قاعدة جديدة تستند إلى الحدث
2. أعطه إسما
3. حدد نوع الحدث "مخصص" وأدخل اسم الحدث الذي عرّفناه على أنه "addToCart"
   
4. حدد العلامة أو العنصر الذي سيشهد هذا الحدث. باستخدام محددات CSS ، سيكون هذا "#minicart"
   
5. تكوين القاعدة. هذا هو المكان الذي يبرد فيه. يمكنك استخدام "التفاصيل" التي تم توفيرها في الحدث ويمكنك حتى استخدامها ككائن. شكرا ADOBE! أنا هنا أرسل حدث Google Analytics بالبيانات التي أريدها. يمكنك الرجوع إلى البيانات باستخدام٪ event.detail٪ ، أو إذا كان لديك كائن يمكنك الرجوع إليه كـ٪ event.detail. <الاسم>>٪. انظر المثال أدناه.
   
   ربما لن أرسل حدثًا كهذا أبدًا ، لكنك تحصل على جوهر كيفية استخدامه. وإذا كنت بحاجة إلى استخدامه في كود مخصص ، دعنا نقول لأداة Adobe Analytics ، يمكنك الرجوع إليه كـ _satellite.getVar (“٪ event.detail.product_id٪”). صلصة رائعة!!!

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

PushState أو التجزئة

PushState

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

عند إعداد القاعدة ، ستختار بالطبع نوع الحدث الجديد.

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

التجزئة

بفضل Twitter ، نعلم جميعًا ما هي علامة التجزئة (علامات التجزئة) ، لذلك يجب أن تشير التجزئة إلى تغيير في التجزئة! الشيء الرائع في التجزئة هو أنه يمكنك تغييره كما تريد ولا يتسبب في تحميل الصفحة. يمكن استخدام التجزئة لأغراض عديدة ، لذلك لن نتطرق إلى الأسباب التي تجعل شخصًا ما يمتلك هذا. قبل ظهور pushState ، لم يكن من غير المألوف تحديث التجزئة بمحتوى جديد لـ AJAXy أو مواقع الصفحة الواحدة.

لتكوين قاعدة جديدة ، حدد نفس نوع الحدث مثل pushState. الاختلاف الوحيد هو أنه يمكنك الآن النظر إلى التجزئة على أنها معاييرك. على سبيل المثال:

خاتمة

يعد Adobe DTM أفضل نظام لإدارة العلامات ، وهو محظوظ لعملاء Adobe ، فهو مجاني! استخدم هذه النصائح المفيدة لمساعدتك على الاستفادة من قوتها وإمكانياتها ، وراجعها كثيرًا لمزيد من المعلومات! إذا كنت تبحث عن مساعدة في تحليلات موقع الويب الخاص بك ، فاتصل بنا وسنرسل لك اقتراحًا مجانيًا حول كيف يمكننا مساعدتك!