الانتقال إلى المحتوى الرئيسي
أصحاب المواقع والأدوات

أي موقع أو تطبيق ويب

زر الإبلاغ الذي يخبرك بتعطل موقعك قبل أن يستسلم العملاء

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

ما يوفّره

تقليل وقت الاكتشاف من ساعات إلى دقائق

معاينة المسودة
الموضوعتم الإبلاغ عن مشكلة في الموقع: [الصفحة]

تخيل أداة SaaS صغيرة في ظهيرة يوم الثلاثاء. يتم إطلاق تحديث، وهناك قيمة تكوين خاطئة، ويبدأ نموذج التسجيل في إظهار خطأ للجميع. لا شيء يتعطل بصوت عالٍ. الخادم يعمل، والصفحة الرئيسية تُحمل، ولوحة التحكم تبدو جيدة للفريق لأنهم مسجلون الدخول بالفعل. لمدة ثلاث ساعات، يواجه كل زائر جديد نموذجًا معطلًا، ويهز كتفيه، ثم يغادر. يكتشف المالك ذلك في المساء — من تغريدة واحدة مزعجة. هذه هي الطريقة الصامتة التي تخسر بها المواقع الإلكترونية الأموال. ليس انقطاعًا دراماتيكيًا، بل عطل صغير لا يراه سوى الزوار، والزوار بالكاد يخبرونك. يفترضون أن شخصًا ما يعرف بالفعل. يفترضون أن المشكلة في اتصالهم الخاص. في الغالب، هم فقط يواصلون طريقهم. ## المشكلة: أنت آخر من يعلم عندما يتعطل شيء ما في موقع يعمل، فإن أول من يلاحظ هم الأقل قدرة على إصلاحه: زوارك. بينهم وبين مطوريك جدار من الاحتكاك. للإبلاغ عن خطأ، يتعين على الزائر عادةً العثور على صفحة الاتصال الخاصة بك، ومعرفة أي بريد إلكتروني يجب استخدامه، ووصف مشكلة تقنية بكلماته الخاصة، وتذكر الصفحة التي كان عليها. لا أحد تقريبًا يفعل كل ذلك لشركة لا يعمل بها. لذلك لا يصل التقرير أبدًا. قد تكتشف أنظمة المراقبة لديك انقطاعًا كاملاً في الخادم، ولكنها نادرًا ما تكتشف زرًا معطلاً، أو نموذجًا يفشل فقط في Safari، أو عملية دفع تظهر خطأ فقط عند تطبيق قسيمة، أو صورة تعطي خطأ 404 في صفحة منتج واحدة. هذه الإخفاقات 'الجزئية' شائعة، وهي غير مرئية من الداخل، وهي بالضبط ما يكلفك التسجيلات والمبيعات. الفجوة ليست تقنية. إنها بشرية. يجب أن تجعل الإبلاغ عن مشكلة أمرًا في غاية السهولة بحيث يفعله حقًا شخص غريب منزعج قليلًا. ## الحل: زر 'الإبلاغ عن مشكلة' معبأ مسبقًا أضف زر **الإبلاغ عن مشكلة** صغيراً ومرئياً دائماً إلى موقعك — في التذييل، في زاوية، وخاصة في شاشات الخطأ والحالات الفارغة. بدلاً من الإشارة إلى نموذج اتصال، فهو رابط `mailto:` يفتح تطبيق البريد الإلكتروني الخاص بالزائر مع رسالة مكتوبة مسبقًا له. ينقر الزائر مرة واحدة. يفتح تطبيق البريد الإلكتروني الخاص به مع فريق التطوير في حقل 'إلى'، وموضوع واضح، ونموذج رسالة قصير. يكتبون سطرًا واحدًا حول ما حدث من خطأ ويضغطون على إرسال. هذا هو التفاعل بأكمله — لا توجد نماذج، ولا تسجيلات دخول، ولا حساب. إليك الرابط الموجود خلف الزر: ```html <a href="mailto:[email protected]?subject=Site%20problem%20reported&body=What%20I%20was%20doing%3A%0AWhat%20went%20wrong%3A%0A%0APage%3A%0ABrowser%3A"> الإبلاغ عن مشكلة </a> ``` يقوم المولد الموجود في هذا الموقع ببناء هذا الرابط وتشفيره لك، حتى لا تؤدي مسافة شاردة أو قوس إلى كسره أبدًا. ## ماذا يجب أن يحتوي التقرير القيمة تكمن في محتوى الرسالة المعبأ مسبقًا. رابط 'راسلنا' الفارغ يجلب لك 'إنه لا يعمل'. أما التقرير المعبأ مسبقًا فيجلب لك شيئًا يمكنك التصرف بناءً عليه. اطلب الأشياء الثلاثة التي يسألها المطور دائمًا: - **ما كان يفعله الزائر** — الإجراء الذي فشل. - **ما حدث من خطأ** — نص الخطأ أو ما توقعوا رؤيته. - **السياق** — عنوان URL للصفحة، ومن الناحية المثالية المتصفح والوقت. إذا كان الزر موجودًا داخل تطبيقك الخاص، يمكنك ملء السياق تلقائيًا. يمكن لبرنامج نصي صغير إدراج عنوان URL الحالي، وسلسلة المتصفح، وطابع زمني مباشرة في الرسالة قبل فتح البريد الإلكتروني، حتى يكتب الزائر جملة واحدة فقط: ```html <a id="report" href="#">الإبلاغ عن مشكلة</a> <script> const a = document.getElementById('report'); const body = 'What I was doing:\nWhat went wrong:\n\n' + 'Page: ' + location.href + '\n' + 'Browser: ' + navigator.userAgent; a.href = 'mailto:[email protected]' + '?subject=' + encodeURIComponent('Site problem: ' + document.title) + '&body=' + encodeURIComponent(body); </script> ``` الآن يصل كل تقرير موسومًا بالصفحة والبيئة الدقيقة. يمكن لمطورك غالبًا إعادة إنتاج الخطأ قبل الرد. ## الإعداد في خمس دقائق 1. اختر العنوان الذي يجب أن يتلقى التقارير. يعمل صندوق بريد مشترك أو اسم مستعار مثل `dev-team@` بشكل جيد، حتى يتمكن الفريق بأكمله من رؤيته. 2. قم ببناء الرابط في المولد: حدد المستلم، وموضوعًا واضحًا مثل 'Site problem reported'، ورسالة قصيرة مع المطالبات الثلاث المذكورة أعلاه. 3. انسخ مقتطف HTML والصقه في التذييل وصفحة الخطأ الخاصة بك. 4. إذا كان موجودًا داخل تطبيق، فأضف البرنامج النصي الصغير ليتم ملء عنوان URL والمتصفح تلقائيًا. 5. أرسل لنفسك تقرير اختبار للتأكد من فتح المسودة بشكل صحيح. بدون خلفية (backend)، بدون خدمة نماذج من جهة خارجية، بدون فاتورة جديدة. الرابط `mailto:` هو جزء من HTML، لذا فهو يعمل على موقع ثابت، أو صفحة هبوط، أو مقال في مكتب المساعدة، أو تطبيق ويب كامل. ## ما الذي يوفره لك التوفير يكمن في **وقت الاكتشاف**. افترض أن موقعك يحصل على 1,000 زيارة يوميًا ويتعطل نموذج بصمت في الساعة 2 ظهرًا. بدون مسار للإبلاغ، قد تعرف ذلك في الليل — بعد ست ساعات وفقدان بضع مئات من التسجيلات. مع زر إبلاغ بنقرة واحدة، ينبه أول زائر مرتبك فريقك في غضون دقائق. تخسر عددًا قليلًا من التسجيلات بدلاً من تسجيلات فترة ما بعد الظهيرة بالكامل. هناك توفير في الدعم أيضًا. تكلف رسائل البريد الإلكتروني الغامضة مثل 'موقعكم معطل' موظف الدعم عدة دقائق لكل منها لمجرد معرفة الصفحة والمتصفح. يجيب التقرير المعبأ مسبقًا على هذه الأسئلة مقدمًا، لذلك ينخفض وقت الفرز من دقائق إلى ثوانٍ. ولأن الإبلاغ سهل، يفعله المزيد من الناس — مما يحول المشكلة الصامتة إلى إشارة ثابتة وصادقة حول ما يتعطل بالفعل في الواقع. كما أنه يحمي الثقة. الزائر الذي يمكنه الإبلاغ عن خلل بنقرة واحدة يشعر بأن صوته مسموع، حتى عندما يكون هناك شيء معطل. أما الزائر الذي يواجه نموذجًا معطلاً ولا يجد طريقة لإخبارك، فإنه يغادر ببساطة ويتذكر موقعك على أنه الموقع الذي لم يعمل. ## اجعله أفضل - ضع الزر في صفحات **404 وصفحات الخطأ**، حيث يكون الإحباط في أعلى مستوياته ويكون التقرير أكثر قيمة. - استخدم **وسمًا في الموضوع** مثل `Site problem:` حتى تقوم قاعدة بسيطة في صندوق الوارد بتوجيه كل تقرير إلى القناة الصحيحة. - حافظ على العنوان **مخفيًا** (obfuscated) في الصفحات العامة حتى لا تجمعه روبوتات البريد العشوائي — يكفي برنامج نصي صغير يقوم بتجميع الرابط عند النقر. - اربطه بملاحظة حالة مرئية ('هل تواجه مشكلة؟ أخبرنا') لكي يعرف الناس أن الزر موجود من أجلهم. ## النقاط الرئيسية - يرى زوارك العطل أولاً، لكنهم بالكاد يبلغون عنه — الاحتكاك مرتفع للغاية. - يزيل زر 'الإبلاغ عن مشكلة' المعبأ مسبقًا برابط `mailto:` ذلك الاحتكاك: نقرة واحدة، جملة واحدة، تم الإرسال. - قم بملء عنوان URL للصفحة والمتصفح تلقائيًا بحيث يمكن إعادة إنتاج كل تقرير. - لا يحتاج إلى خلفية (backend) ولا ميزانية، ويقلل وقت الاكتشاف من ساعات إلى دقائق. قم ببناء زر الإبلاغ الخاص بك في [المولد](/#generator)، أو انسخ الإعداد أدناه للبدء.

تخيل أداة SaaS صغيرة في ظهيرة يوم الثلاثاء. يتم إطلاق تحديث، وهناك قيمة تكوين خاطئة، ويبدأ نموذج التسجيل في إظهار خطأ للجميع. لا شيء يتعطل بصوت عالٍ. الخادم يعمل، والصفحة الرئيسية تُحمل، ولوحة التحكم تبدو جيدة للفريق لأنهم مسجلون الدخول بالفعل. لمدة ثلاث ساعات، يواجه كل زائر جديد نموذجًا معطلًا، ويهز كتفيه، ثم يغادر. يكتشف المالك ذلك في المساء — من تغريدة واحدة مزعجة.

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

المشكلة: أنت آخر من يعلم

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

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

الفجوة ليست تقنية. إنها بشرية. يجب أن تجعل الإبلاغ عن مشكلة أمرًا في غاية السهولة بحيث يفعله حقًا شخص غريب منزعج قليلًا.

الحل: زر 'الإبلاغ عن مشكلة' معبأ مسبقًا

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

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

إليك الرابط الموجود خلف الزر:

<a href="mailto:[email protected]?subject=Site%20problem%20reported&body=What%20I%20was%20doing%3A%0AWhat%20went%20wrong%3A%0A%0APage%3A%0ABrowser%3A">
  الإبلاغ عن مشكلة
</a>

يقوم المولد الموجود في هذا الموقع ببناء هذا الرابط وتشفيره لك، حتى لا تؤدي مسافة شاردة أو قوس إلى كسره أبدًا.

ماذا يجب أن يحتوي التقرير

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

  • ما كان يفعله الزائر — الإجراء الذي فشل.
  • ما حدث من خطأ — نص الخطأ أو ما توقعوا رؤيته.
  • السياق — عنوان URL للصفحة، ومن الناحية المثالية المتصفح والوقت.

إذا كان الزر موجودًا داخل تطبيقك الخاص، يمكنك ملء السياق تلقائيًا. يمكن لبرنامج نصي صغير إدراج عنوان URL الحالي، وسلسلة المتصفح، وطابع زمني مباشرة في الرسالة قبل فتح البريد الإلكتروني، حتى يكتب الزائر جملة واحدة فقط:

<a id="report" href="#">الإبلاغ عن مشكلة</a>
<script>
  const a = document.getElementById('report');
  const body =
    'What I was doing:\nWhat went wrong:\n\n' +
    'Page: ' + location.href + '\n' +
    'Browser: ' + navigator.userAgent;
  a.href = 'mailto:[email protected]'
    + '?subject=' + encodeURIComponent('Site problem: ' + document.title)
    + '&body=' + encodeURIComponent(body);
</script>

الآن يصل كل تقرير موسومًا بالصفحة والبيئة الدقيقة. يمكن لمطورك غالبًا إعادة إنتاج الخطأ قبل الرد.

الإعداد في خمس دقائق

  1. اختر العنوان الذي يجب أن يتلقى التقارير. يعمل صندوق بريد مشترك أو اسم مستعار مثل dev-team@ بشكل جيد، حتى يتمكن الفريق بأكمله من رؤيته.
  2. قم ببناء الرابط في المولد: حدد المستلم، وموضوعًا واضحًا مثل 'Site problem reported'، ورسالة قصيرة مع المطالبات الثلاث المذكورة أعلاه.
  3. انسخ مقتطف HTML والصقه في التذييل وصفحة الخطأ الخاصة بك.
  4. إذا كان موجودًا داخل تطبيق، فأضف البرنامج النصي الصغير ليتم ملء عنوان URL والمتصفح تلقائيًا.
  5. أرسل لنفسك تقرير اختبار للتأكد من فتح المسودة بشكل صحيح.

بدون خلفية (backend)، بدون خدمة نماذج من جهة خارجية، بدون فاتورة جديدة. الرابط mailto: هو جزء من HTML، لذا فهو يعمل على موقع ثابت، أو صفحة هبوط، أو مقال في مكتب المساعدة، أو تطبيق ويب كامل.

ما الذي يوفره لك

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

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

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

اجعله أفضل

  • ضع الزر في صفحات 404 وصفحات الخطأ، حيث يكون الإحباط في أعلى مستوياته ويكون التقرير أكثر قيمة.
  • استخدم وسمًا في الموضوع مثل Site problem: حتى تقوم قاعدة بسيطة في صندوق الوارد بتوجيه كل تقرير إلى القناة الصحيحة.
  • حافظ على العنوان مخفيًا (obfuscated) في الصفحات العامة حتى لا تجمعه روبوتات البريد العشوائي — يكفي برنامج نصي صغير يقوم بتجميع الرابط عند النقر.
  • اربطه بملاحظة حالة مرئية ('هل تواجه مشكلة؟ أخبرنا') لكي يعرف الناس أن الزر موجود من أجلهم.

النقاط الرئيسية

  • يرى زوارك العطل أولاً، لكنهم بالكاد يبلغون عنه — الاحتكاك مرتفع للغاية.
  • يزيل زر 'الإبلاغ عن مشكلة' المعبأ مسبقًا برابط mailto: ذلك الاحتكاك: نقرة واحدة، جملة واحدة، تم الإرسال.
  • قم بملء عنوان URL للصفحة والمتصفح تلقائيًا بحيث يمكن إعادة إنتاج كل تقرير.
  • لا يحتاج إلى خلفية (backend) ولا ميزانية، ويقلل وقت الاكتشاف من ساعات إلى دقائق.

قم ببناء زر الإبلاغ الخاص بك في المولد، أو انسخ الإعداد أدناه للبدء.