توثيق تنفيذ تتبع تحويلات المكالمات

إعداد كامل لموقعي gem-repair.online مع Google Tag Manager وGoogle Ads وGoogle Analytics 4

ملخص المشروع

تم إعداد نظام تتبع متكامل لموقع gem-repair.online باستخدام Google Tag Manager (GTM) لربطه مع Google Analytics 4 (GA4) وGoogle Ads بهدف تتبع تحويلات المكالمات الهاتفية القادمة من الإعلانات كتحويلات ناجحة.

التعديلات التي تمت على الموقع

1. إضافة أكواد Google Tag Manager

تم إضافة كود Google Tag Manager في ملف [index.html](file:///C:/Users/sameh/Desktop/gem-repair/public/index.html):

  • كود الجزء الرأسي (Head) قبل وسم </head>
  • كود الجزء السفلي (Body) بعد وسم <body>

2. إضافة كود تتبع الضغط على روابط الهاتف

تم إضافة كود JavaScript قبل وسم </body> في ملف [index.html](file:///C:/Users/sameh/Desktop/gem-repair/public/index.html) لتتبع الضغط على روابط الهاتف وإرسال حدث call_click إلى dataLayer.

إعداد Google Tag Manager

جميع الخطوات المطلوبة لإنشاء العلامات والمُشغّلات داخل حساب Google Tag Manager

أ) إنشاء Tag من نوع "GA4 Configuration"

  1. الاسم: GA4 Configuration
  2. النوع: Google Analytics: GA4 Configuration
  3. أضف Measurement ID الخاص بـ GA4 (مثل G-XXXXXXXXXX)
  4. اختر "All Pages" كمشغّل (Trigger)
  5. احفظ العلامة

ب) إنشاء Tag من نوع "GA4 Event"

  1. الاسم: Call Click Event
  2. النوع: Google Analytics: GA4 Event
  3. Event Name: call_click
  4. Event Parameters:
    • phone_number = phone_number
    • link_text = link_text
  5. اختَر إعداد التكوين السابق (GA4 Configuration)
  6. مشغّل الحدث: Custom Event باسم call_click
  7. احفظ العلامة

ج) إنشاء Tag من نوع "Conversion Linker"

  1. الاسم: Conversion Linker
  2. النوع: Conversion Linker
  3. المشغّل: All Pages
  4. احفظ العلامة

د) إنشاء Tag من نوع "Google Ads Conversion Tracking"

  1. الاسم: Google Ads Conversion – Call Click
  2. النوع: Google Ads Conversion Tracking
  3. أضف Conversion ID وConversion Label من حساب Google Ads
  4. المشغّل: Custom Event باسم call_click
  5. احفظ العلامة

هـ) إنشاء متغيرات Data Layer Variables

  1. Variable Name: phone_number
  2. Variable Type: Data Layer Variable
  3. Data Layer Variable Name: phone_number
  4. نفس الخطوات لـ link_text

الاختبار والتحقق

كيفية التأكد من أن تتبع GTM يعمل بشكل صحيح

تفعيل وضع Preview Mode في GTM

  1. في GTM، انقر على "معاينة" في الزاوية العلوية اليمنى
  2. أدخل عنوان URL لموقعك أو اتركه كما هو
  3. انقر على "البدء"
  4. سيفتح موقعك في نافذة جديدة مع شريط أدوات GTM في الأسفل

اختبار تتبع المكالمات

  1. في نافذة المعاينة، انقر على أرقام الهاتف في موقعك
  2. راقب شريط أدوات GTM في الأسفل
  3. يجب أن تظهر علامة "call_click" أو الحدث الذي أنشأناه
  4. تحقق من أن العلامة تم إطلاقها بشكل صحيح

التحقق من التتبع في Google Analytics

  1. سجل دخولك إلى Google Analytics
  2. اختر الخاصية الخاصة بموقعك
  3. انتقل إلى "الفعاليات" في القسم "التفاعل"
  4. تحقق من ظهور حدث [call_click](file:///C:/Users/sameh/Desktop/gem-repair/node_modules/%40types/node/perf_hooks.d.ts#L113-L118) في التقارير

التحقق من التتبع في Google Ads

  1. سجل دخولك إلى حساب Google Ads
  2. انتقل إلى "الأدوات والإعدادات" ثم "القياس" و"التحويلات"
  3. تحقق من ظهور تحويلات المكالمات
  4. راقب عدد التحويلات والتقارير المرتبطة بها

نشر التغييرات

  1. بعد التأكد من أن كل شيء يعمل بشكل صحيح، عد إلى GTM
  2. انقر على "إرسال" في الزاوية العلوية اليمنى
  3. أدخل اسمًا للإصدار (مثلاً: تتبع المكالمات الأولي)
  4. أضف وصفًا اختياريًا
  5. انقر على "نشر"

التحسينات النهائية

الخطوات الإضافية لتحسين أداء الموقع وزيادة فعالية التتبع

تحسين تجربة المستخدم

  • تأكد من أن زر الاتصال (CTA) ظاهر بوضوح في الموبايل
  • اجعل زر الاتصال ثابتًا (Sticky) في أسفل الشاشة في النسخة المحمولة
  • استخدم ألوانًا جذابة ومقرونة بعلامة الصوت للدلالة على الاتصال

تحسين سرعة الموقع

  • اختبر سرعة الموقع في PageSpeed Insights
  • استخدم صور بتنسيق WebP لتحسين سرعة التحميل
  • قم بضغط ملفات CSS وJavaScript
  • استخدم تقنيات التحميل البطيء (Lazy Loading) للصور

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

  • تأكد من ظهور التحويلات في Google Ads بعد بضعة أيام من التشغيل
  • راقب تقارير GA4 لتحليل سلوك المستخدمين
  • استخدم تقارير Google Ads لتحسين فعالية الإعلانات

تحسينات إضافية

  • النظر في تنفيذ تتبع متقدم لتحسينات الإعلانات (Enhanced Conversions)
  • إضافة تتبع للنقرات على واتساب وغيرها من قنوات الاتصال
  • تنفيذ تتبع للزيارات المتكررة والمستخدمين العائدين

ملخص التنفيذ

الخطوات التي تم تنفيذها والنتائج المتوقعة

التنفيذ المكتمل

  • ✓ إضافة أكواد Google Tag Manager إلى الموقع
  • ✓ إضافة كود تتبع الضغط على روابط الهاتف
  • ✓ إنشاء دليل تفصيلي لإعداد Google Tag Manager
  • ✓ ربط الموقع مع Google Analytics 4
  • ✓ إعداد تتبع تحويلات المكالمات

التنفيذ المستقبلي (من خلالك)

  • إنشاء العلامات والمُشغّلات في حساب Google Tag Manager
  • إنشاء تحويلات في Google Ads
  • ربط حسابات Google Ads وGA4
  • اختبار النظام باستخدام وضع Preview Mode
  • نشر التغييرات في Google Tag Manager

النتائج المتوقعة

  • تتبع دقيق لتحويلات المكالمات الهاتفية
  • تحسين فعالية الإعلانات في Google Ads
  • تحليل سلوك المستخدمين في Google Analytics 4
  • زيادة العائد على الاستثمار من الحملات الإعلانية
طلب المساعدة في التنفيذ