كيفية تثبيت خريطة حرارية على متجر Shopify الخاص بك (بدون تطبيق، بسطر واحد من الكود)
- how-to
- shopify
- ecommerce
- heatmap
- installation
ملخص المقال
- إضافة خريطة حرارية إلى Shopify تتطلب فقط لصق سطر واحد من الكود في
theme.liquid— بدون الحاجة لتثبيت تطبيق- قم دائمًا بنسخ القالب الخاص بك احتياطيًا قبل التعديل. التغييرات تصبح سارية المفعول بمجرد الحفظ — على عكس STUDIO، لا توجد خطوة منفصلة لإعادة النشر
- صفحات الدفع لا تُشغّل كود القالب، لذا لا يتم تتبعها. النجاح يعني زيادة العدّاد فعليًا في لوحة تحكم HeatMapX — وليس مجرد "عدم وجود أخطاء"
هل تتساءل عما إذا كان بإمكانك إضافة خريطة حرارية إلى متجر Shopify الخاص بك بدون تثبيت تطبيق؟ يمكنك ذلك. يتيح لك Shopify لصق سطر واحد من كود الوسم مباشرة داخل القالب الخاص بك، دون الحاجة لأي تطبيق. يشرح هذا الدليل خطوة النسخ الاحتياطي التي يجب عليك دائمًا القيام بها أولاً، وكيفية إضافة الوسم، وكيفية التأكد من أنه يعمل، وبعض الأمور التي يجب الانتباه إليها.
الخطوة 1: احصل على مفتاح موقعك
أولاً، سجّل في HeatMapX (تتوفر خطة مجانية)، وسجّل متجرك، واحصل على مفتاح الموقع الخاص بك. لا حاجة لبطاقة ائتمان.
بمجرد حصولك على مفتاح موقعك، استخدم الوسم أدناه، مع استبدال YOUR_SITE_KEY بالمفتاح الفعلي الذي حصلت عليه.
<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>
الخطوات: إضافة الوسم إلى theme.liquid
1. (مطلوب) انسخ قالبك احتياطيًا
قبل تعديل الكود مباشرة، قم دائمًا بنسخ قالبك الحالي أولاً. في لوحة تحكم Shopify، انتقل إلى Online Store → Themes، ابحث عن القالب المنشور لديك، انقر على قائمة "…" (الإجراءات)، واختر Duplicate. هذا يمنحك نسخة آمنة يمكنك العودة إليها إذا حدث خطأ ما. تخطي هذه الخطوة يعني أنه لن يكون لديك طريقة للتراجع عن تعديل خاطئ.
2. افتح محرر الكود
- في لوحة تحكم Shopify، انتقل إلى Online Store → Themes
- على القالب المنشور لديك، انقر على قائمة "…" (الإجراءات) واختر Edit code
- سيفتح مستعرض ملفات القالب الخاص بك على اليسار
3. أضف الوسم داخل layout/theme.liquid
- في قائمة الملفات، افتح مجلد "Layout" وانقر على
theme.liquid - ابحث في الملف عن
</head>والصق الوسم أعلاه مباشرة قبله - احفظ الملف
4. الحفظ هو كل ما تحتاجه — لا حاجة لإعادة النشر
في Shopify، تعديل كود القالب يصبح ساري المفعول بمجرد حفظه. على عكس STUDIO، لا توجد خطوة منفصلة لـ "النشر" أو "إعادة النشر". بمجرد الحفظ، يكون متجرك المباشر قد حمّل الوسم بالفعل.
كيفية التأكد من أنه يعمل فعليًا
بمجرد إضافة الوسم، تصفّح بعض الصفحات في متجرك. لكن إليك الجزء المهم.
تحميل الصفحة بدون أخطاء ليس نفس الشيء كون التتبع يعمل فعليًا. حتى لو لم تُظهر وحدة تحكم المتصفح لديك أي خطأ، فإن مفتاح موقع مكتوب بشكل خاطئ أو وسم ملصق في المكان الخاطئ قد يعني أن البيانات لا تصل أبدًا إلى HeatMapX.
الطريقة الوحيدة الموثوقة للتحقق هي فتح لوحة تحكم HeatMapX، وإيجاد موقعك في قائمة المواقع، والتأكد من أن العدّاد الخاص به قد ارتفع فعليًا. بعد زيارة بعض الصفحات — صفحات المنتجات، صفحات المجموعات، وما إلى ذلك — إذا ارتفع العدّاد، فإن التثبيت يعمل.
أمور يجب الانتباه إليها
صفحات الدفع لا يتم تتبعها
الوسم الذي أضفته إلى theme.liquid يعمل على واجهة متجرك — الصفحة الرئيسية، صفحات المنتجات، صفحات المجموعات، وعربة التسوق — لكنه لا يعمل على صفحات الدفع (صفحات الدفع تحت /checkouts/). صفحة الدفع مستضافة مباشرة من قبل Shopify، بشكل منفصل عن قالبك، وكود القالب من theme.liquid لا يتم تحميله هناك أبدًا. إذا لاحظت عدم وجود بيانات لصفحات الدفع في لوحة التحكم الخاصة بك، فهذا سلوك متوقع، وليس خطأً.
تبديل القوالب يعني إعادة إضافة الوسم
الوسم موجود فقط في ملف theme.liquid الخاص بالقالب الذي عدّلته. إذا قمت لاحقًا بالتبديل إلى قالب مختلف (نشر قالب جديد)، فإن ملف theme.liquid الخاص به لن ينقل الوسم تلقائيًا. كلما قمت بتبديل القوالب، كرر نفس الخطوات لإضافة الوسم إلى القالب الجديد.
الأسئلة الشائعة
س. هل سيؤدي هذا إلى إبطاء متجري؟ ج. يتم تحميل الوسم بشكل غير متزامن (async) وهو خفيف الوزن، لذا فإن تأثيره على سرعة تحميل الصفحة ضئيل جدًا.
س. أضفت الوسم، لكن العدّاد في لوحة التحكم لا يرتفع ج. السبب الأكثر شيوعًا هو عدم تطابق مفتاح الموقع — لصق مفتاح من موقع مختلف، أو حرف تم فقده أثناء النسخ. تحقق أيضًا من أن الصفحات التي تختبرها هي صفحات واجهة المتجر (الرئيسية، المنتج، المجموعة) وليست صفحات الدفع، حيث أن صفحة الدفع لا يتم تتبعها أبدًا.
في الختام
إضافة خريطة حرارية إلى Shopify تتلخص في لصق سطر واحد من الكود في theme.liquid — بدون الحاجة لأي تطبيق. HeatMapX مجاني للبدء، فجرّبه وشاهد كيف يتفاعل المتسوقون فعليًا مع متجرك.