كيفية تثبيت خريطة حرارية باستخدام Google Tag Manager (بدون تعديل الكود، خلال 5 دقائق)

الخلاصة السريعة

باستخدام GTM يمكنك تثبيت خريطة حرارية دون لمس كود موقعك على الإطلاق

خمس خطوات: إنشاء وسم Custom HTML → إرفاق مشغّل All Pages → النشر

النجاح يعني أن تتحرك الأرقام في لوحة تحكم HeatMapX — وليس مجرد "عدم ظهور أخطاء"

إذا كان موقعك يدير الوسوم بالفعل عبر Google Tag Manager (GTM)، فهذه هي أنظف طريقة لإضافة تتبّع الخريطة الحرارية: كل شيء يتم من داخل واجهة GTM، دون أي تعديل على الكود. يشرح هذا الدليل الخطوات واحدة تلو الأخرى.

قبل أن تبدأ: احصل على مفتاح موقعك

سجّل في HeatMapX (توجد خطة مجانية، دون الحاجة إلى بطاقة ائتمان)، سجّل موقعك، وستحصل على مفتاح موقع (site key).

بمجرد الحصول عليه، ستستخدم وسمًا بهذا الشكل — استبدل YOUR-SITE-KEY بمفتاحك الفعلي:

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

مهم: الصق الوسم بالكامل، وليس عنوان الرابط فقط. سمة data-site-key="..." هي التي تخبر HeatMapX بالموقع الذي تنتمي إليه البيانات — إذا حذفتها، أو لصقت عنوان src فقط، فلن يتم تتبّع أي شيء.

إعداد GTM (5 خطوات)

افتح لوحة تحكم GTM (tagmanager.google.com) واختر حاوية (مساحة عمل) موقعك
اذهب إلى "Tags" ← "New" في القائمة اليسرى، واختر "Custom HTML" كنوع الوسم
الصق الوسم بالكامل أعلاه في حقل HTML
في إعداد المشغّل (Trigger)، اختر "All Pages (Page View)"، وأعطِ الوسم اسمًا يسهل التعرف عليه (مثل HeatMapX)، ثم احفظ
اضغط على "Submit / Publish" في الأعلى على اليمين لنشر التغيير مباشرة

هذا كل شيء — أصبح التتبّع الآن يعمل على كل صفحة في موقعك.

تريد التحقق قبل النشر؟ (وضع المعاينة)

اضغط على "Preview" في GTM لاختبار الوسم في متصفحك الخاص قبل النشر. افتح موقعك من خلال شاشة المعاينة (Tag Assistant) — إذا ظهر وسم HeatMapX الخاص بك ضمن "Fired"، فهذا يعني أنه يعمل.

إذا لم يتم تفعيل الوسم — قائمة تحقق

هل ضغطت على Publish؟ الحفظ وحده لا ينشر التغييرات مباشرة. هذا هو السبب الأكثر شيوعًا
هل المشغّل مضبوط على All Pages؟ المشغّل المخصص لصفحة معينة يعني أن الصفحات الأخرى لن تُتتبّع
هل شريط موافقة ملفات تعريف الارتباط (consent mode) يحجب الوسم؟ مع بعض أدوات إدارة الموافقة، يتم تعليق وسوم Custom HTML حتى يوافق الزائر. تحقق من إعدادات الموافقة الخاصة بالوسم وكيفية تصنيف أداة CMP له
هل data-site-key صحيح؟ لصق مفتاح موقع آخر يرسل بياناتك إلى الموقع الخطأ

دع Claude Code يرشدك خلال العملية

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

I want to deploy the HeatMapX heatmap tracking tag via Google Tag Manager.
Walk me through the GTM interface one step at a time, waiting for my reply at each step.

The tag to use (Custom HTML, All Pages trigger):
<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

إذا كنت لا تستخدم GTM وتريد وضع الوسم مباشرة في كود موقعك، فإن هذه النسخة تتيح لـ Claude Code إجراء تعديلات الملفات نيابة عنك:

Install the HeatMapX heatmap tracking tag in this project.
Make sure the following tag is included right before </head> on every page, and tell me which files you changed.

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

تم تصميم HeatMapX بحيث يمكن أيضًا سحب بياناتك وتحليلها من Claude Code (تكامل CLI) — راجع صفحة "CLI & Skills" في لوحة تحكمك بعد إتمام الإعداد.

تحقق من أن الأمر يعمل: يجب أن تتحرك الأرقام

بعد التثبيت، تصفّح بضع صفحات من موقعك، ثم افتح لوحة تحكم HeatMapX الخاصة بك. إذا كان عدد "الجلسات اليوم" (Sessions today) لموقعك في ازدياد، فهذا يعني أن التتبّع يعمل.

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