عنصر عجلة الحظ

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

آلية العمل

عجلة الحظ واحدة من العناصر المبنية على خدعة CSS نفسها :checked القائمة على مربع اختيار وتسمية، التي تستخدمها القائمة القابلة للطي. فمربع اختيار مخفي مقترن بعنصر <label> يعمل هدفًا للنقر، وتبدّل قاعدة CSS مرتبطة بـ :checked ما هو ظاهر، دون أي JavaScript. وحيثما يُحترم CSS الحركي، يؤدي النقر على رسم العجلة (🎡) إلى تحديد المربع المخفي، ما يشغّل حركة تدوير مدتها 0.9 ثانية (دوران @keyframes حتى 720 درجة) ويكشف في الوقت نفسه لوحة الجائزة: رابطًا بنمط زر يشير إلى رابط الجائزة الذي ضبطته، مسبوقًا بـ «🎉» للحظة الكشف.

وتحت تلك الطبقة الحركية، يعرض HTML المُرسَل دائمًا أيضًا عنصر تحكّم ثانيًا: رابطًا عاديًا بنمط زر بالتسمية والوجهة نفسيهما. وعلى عكس أزرار الاختيار البديلة في الاستطلاع أو التقييم، لا يُخفى هذا الزر عبر CSS خلف المستوى الحركي — فهو ظاهر دائمًا. فتطبيق البريد الذي يحترم :checked يعرض العجلة وهذا الزر معًا؛ أما Outlook وأي تطبيق بريد آخر لا يستطيع احترام القاعدة فيعرض الزر وحده. ولا يضطر المستلمون أبدًا إلى «تدوير» أي شيء للوصول إلى الجائزة — فالنقر على أيٍّ منهما يعمل.

لا توجد أي عشوائية في هذا العنصر. فكل مستلم يدوّر العجلة — أو كل مستلم في تطبيق بريد يعرض زر البديل العادي — يصل إلى الرابط المضبوط نفسه تمامًا. و«الفوز» مضمون بحكم التصميم: العجلة أداة عرض لمكافأة واحدة قرّرت مسبقًا أن يحصل عليها الجميع، لا آلية لاختيار الجوائز. وإذا أردت أن يرى مستلمون مختلفون عروضًا مختلفة، فذلك يتطلب بناء نسخ منفصلة من الرسالة لشرائح جمهور منفصلة (أو استخدام وسوم الدمج في رابط الجائزة نفسه)، وليس ميزة في العنصر.

لا ترسل عجلة الحظ أي شيء إلى MailInApp عند النقر عليها — لا يُسجَّل صوت ولا إرسال ولا حدث كشف في أي مكان. وهذا يعني أنها لا تظهر أبدًا في لوحة الردود، ولا في تصدير CSV، ولا في الخريطة الحرارية للنقرات (التي لا تتتبّع إلا روابط button/image/social/element العامة العادية، وزر عجلة الحظ غير موصول بتلك الآلية). وإذا احتجت إلى معرفة عدد من تفاعلوا فعلًا مع العجلة، فضع رابط الجائزة على صفحة هبوط تتحكم فيها وقِس ذلك هناك. أو استخدم بدلًا من ذلك الخريطة الحرارية للنقرات على عنصر button إن لم تكن بحاجة إلى حركة العجلة.

الحقول القابلة للضبط:

• العنوان — العنوان الرئيسي فوق العجلة، مع لونه وحجم خطه الخاصين.
• تسمية الزر — النص على زر البديل الظاهر دائمًا وعلى زر الجائزة المكشوف كليهما (الافتراضي «جرّب حظك»).
• رابط الجائزة — الوجهة التي يشير إليها الزر/الكشف. إذا تُرك فارغًا، يرجع HTML المُرسَل إلى رابط العرض المباشر المستضاف الخاص بالعنصر بدلًا من رابط معطّل؛ أما العرض المباشر نفسه فلا يعرض زرًّا أصلًا إلا حين يُضبط هذا الحقل (إذ ليست له وجهة بديلة خاصة به يرجع إليها).
• لون الخلفية، والحشو، والحد، واستدارة الزوايا للبطاقة.
• لون نص الزر ولون خلفية الزر — قيمتاهما الافتراضيتان هما رمزا السمة $accent و$brand للمشروع على التوالي، فيطابق الزر علامتك التجارية من البداية.

رسم العجلة نفسه (الدائرة ذات التدرّج المخروطي ورمز 🎡 التعبيري) غير قابل للضبط — فالقابل للضبط هو النصوص المحيطة والرابط وتنسيق البطاقة فقط.

أمثلة

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

كيف يبدو البديل الثابت

<div id="em-spin-1" style="margin:12px 0;text-align:center;background-color:transparent">
  <p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
    Spin to win!
  </p>
  <a href="https://acme.example.com/spin-reward"
     style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
            color:#ffffff;border-radius:6px;text-decoration:none;
            font-size:14px;font-weight:600">
    Try your luck
  </a>
  <!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
       CSS-hidden everywhere else once this fallback link is visible -->
</div>

الزر الحاضر دائمًا رابط <a href> عادي يقود مباشرة إلى رابط الجائزة المضبوط (أو رابط العرض المباشر إن لم يُضبط أي رابط) — دون خطوة تأكيد /act، إذ لا يُسجَّل أي شيء.

انظر أيضًا

• نظرة عامة على مرجع العناصر
• بطاقة الكشط
• كيف تعمل البدائل
• التفاعلات والتحليلات