يشرح هذا الدليل كيفية استخدام مدير العلامات من Google (GTM) لتتبع نقرات أزرار محددة على موقع Discourse الخاص بك، مثل “التسجيل” (Sign Up) أو “تسجيل الدخول” (Log In) أو “الرد” (Reply).
مستوى المستخدم المطلوب: مسؤول لديه إمكانية الوصول إلى مدير العلامات من Google
تتبع نقرات الأزرار باستخدام مدير العلامات من Google
يوفر تتبع كيفية تفاعل المستخدمين مع أزرار معينة بيانات قيمة لفهم سلوك المستخدم ومسارات التحويل. في حين أن Discourse يتتبع العديد من الأحداث تلقائيًا، قد ترغب في مراقبة عناصر واجهة مستخدم محددة مثل زر “التسجيل” (Sign Up). يعد استخدام وضع المعاينة (Preview mode) في مدير العلامات من Google (GTM) الطريقة الأكثر فعالية لتحديد العناصر الصحيحة وإعداد مشغلات (Triggers) دقيقة.
ملخص
لتتبع زر معين، يجب عليك أولاً تحديد كيف “يرى” GTM هذا الزر عند النقر عليه. تتضمن العملية تمكين متغيرات النقر، وإنشاء مشغل تصحيح أخطاء عام، واستخدام Tag Assistant لتحديد الخصائص الفريدة للعنصر، ثم إنشاء علامة محددة لهذا الزر.
تمكين متغيرات النقر
قبل أن تتمكن من تتبع النقرات، يجب عليك التأكد من أن GTM يلتقط البيانات اللازمة من المتصفح.
- انتقل إلى Variables (المتغيرات) في مساحة عمل GTM الخاصة بك.
- حدد Configure (تكوين).
- ضمن قسم Clicks (النقرات)، حدد جميع المربعات المتاحة:
Click Element(عنصر النقر)،Click Classes(فئات النقر)،Click ID(معرّف النقر)،Click Target(هدف النقر)،Click URL(رابط النقر)، وClick Text(نص النقر).
إنشاء مشغل نقر عام
أنت بحاجة إلى مشغل “شامل” لرؤية كل حدث نقر في وحدة تحكم التصحيح أثناء الاختبار.
- انتقل إلى Triggers (المشغلات) وحدد New (جديد).
- انقر على Trigger Configuration (تكوين المشغل) واختر Click - All Elements (النقر - جميع العناصر).
- حدد All Clicks (جميع النقرات).
- قم بتسمية المشغل “All Clicks - Debug” (جميع النقرات - تصحيح الأخطاء) و Save (حفظ).
استخدام إضافة Tag Assistant
تساعدك إضافة Tag Assistant Companion في تتبع العنصر الذي يستقبله GTM بالضبط عندما تتفاعل مع موقعك.
- قم بتثبيت الإضافة في متصفحك.
- في مساحة عمل GTM الخاصة بك، حدد Preview (معاينة) في الزاوية العلوية اليمنى.
- أدخل عنوان URL لموقعك (
discourse.example.com) وانقر على Connect (اتصال).
تحديد عناصر الأزرار المحددة
بمجرد فتح نافذة المعاينة، يمكنك العثور على المعرفات الفريدة للزر المستهدف.
- انقر على الزر الذي تريد تتبعه (على سبيل المثال، زر Sign Up) على موقعك.
- قم بالتبديل مرة أخرى إلى علامة التبويب Tag Assistant.
- حدد أحدث حدث Click (نقر) في جزء الملخص الأيسر.
- حدد علامة التبويب Data Layer (طبقة البيانات) للاطلاع على خصائص العنصر الذي تم النقر عليه.
لاستهداف زر Sign Up تحديدًا، يمكنك استخدام فئته الفريدة: sign-up-button.
عند إنشاء المشغل الدائم الخاص بك، استخدم CSS Selector لضمان أنه يلتقط النقرات حتى إذا نقر المستخدم على النص الموجود داخل الزر. لزر Sign Up، استخدم:
button.sign-up-button, button.sign-up-button *
يضمن الرمز * (حرف البدل) في نهاية المحدد أن المشغل سيتم تشغيله حتى إذا نقر المستخدم على عنصر النص الموجود داخل الزر.
أفضل الممارسات
- استخدم أسماء وصفية: قم بتسمية المشغلات والعلامات الخاصة بك بوضوح، مثل “GA4 - Event - Sign Up Button Click”.
- الاختبار دون الكشف عن الهوية: عند اختبار النقرات على أزرار مثل “Sign Up”، غالبًا ما يكون من الأفضل استخدام نافذة تصفح متخفية (incognito) أو تسجيل الخروج من موقع Discourse الخاص بك لضمان ظهور الزر.
- التحقق قبل النشر: تحقق دائمًا من جزء Summary (الملخص) في Tag Assistant لتأكيد أن علامتك المحددة يتم تشغيلها فقط عند النقر على الزر المقصود.