أنشئ صفحة حملة بلا نموذج لزيارات الإعلانات تدفع إلى المكالمات وWhatsApp، مع وسم التحويلات

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth [اسم الخادم]، أنشئ صفحة حملة واحدة لزيارات إعلانات Google Ads وMeta، بالإضافة إلى صفحة خصوصية. لا يوجد نموذج؛ يتواصل الزوار معنا عبر الهاتف أو WhatsApp أو رابط حجز. التفاصيل: النشاط التجاري [اسم النشاط]، الخدمة [الخدمة]، المنطقة [الأحياء]، الهاتف [الهاتف]، WhatsApp [الرقم]، رابط الحجز [الرابط أو "لا يوجد"]، العنوان [العنوان]، ساعات العمل [ساعات العمل]، عناوين الإعلانات والعرض الرئيسي [العناوين والعرض]، حاوية Tag Manager [GTM-XXXXXXX]، حساب Google Ads [اسم الحساب]، حساب إعلانات Meta [اسم الحساب]. تطابق الرسالة: يكرر وسم h1 وعد عنوان الإعلان بالكلمات نفسها (الخدمة، المنطقة، العرض الرئيسي). لا تضع في الصفحة وعدًا غير موجود في الإعلان، ولا في الإعلان وعدًا غير موجود في الصفحة. إذا اختلف عنوانا Google وMeta، فاستخدم عنوان الإعلان الأكثر إنفاقًا، واقترح كيف يمكن مواءمة الإعلان الآخر مع الصفحة. في المجالات الصحية أو القانونية أو المالية، لا تعد بنتيجة مؤكدة ("مضمون"، "100%"). بنية الصفحة: يحتوي الشريط العلوي على اسم العلامة التجارية وزر اتصال فقط، بلا قائمة، حتى لا ينصرف الزوار عن الصفحة. القسم الرئيسي: h1، ووصف من جملة واحدة، وثلاثة أزرار (اتصل الآن، راسلنا على WhatsApp، اختر موعدًا)، وأربع نقاط طمأنة قصيرة تحتها، وصورة. ثم العملية في ثلاث خطوات، وما الذي يحدد السعر (الإجابة أولًا إذا كنت لا تنشر الأسعار)، والأسئلة الشائعة، ودعوة ختامية لاتخاذ إجراء، وتذييل يضم الاسم والعنوان والهاتف ورابط الخصوصية. على الجوال، ثبّت شريطًا من زرين (اتصال، WhatsApp) أسفل الشاشة، وأضف إلى الجسم حشوة سفلية بالارتفاع نفسه حتى لا يختفي شيء تحته ولا يتحرك شيء. يستخدم رابط WhatsApp الصيغة wa.me مع رسالة معبأة مسبقًا. حافظ على مظهر بسيط وموثوق: عائلة خطوط واحدة (مثل General Sans بوزنين)، ولون تمييز واحد، وزر WhatsApp أخضر داكن بتباين لا يقل عن 4.5:1 مع النص الأبيض. قواعد الحركة والقياس: 1. حركة خفيفة بلا مكتبات: لا تحمّل GSAP أو Lenis أو Swiper. انتقالات التمرير والضغط على الأزرار؛ وفي بطاقات الخطوات، ارتفاع صغير مرتبط بالتمرير يستخدم transform فقط، داخل `@supports (animation-timeline: view())` ولا يُطبَّق إلا على الزوار الذين لم يطلبوا تقليل الحركة. لا تستخدم opacity: في العرض التجريبي، فشلت البطاقات الباهتة أسفل الشاشة في اختبار التباين وأنزلت إمكانية الوصول إلى 96. لا شيء في الشاشة الأولى يبدأ برسوم متحركة للظهور. 2. حمّل طبقة القياس باسم `assets/tag.js` مع defer: أ. `window.dataLayer` والإعدادات الافتراضية لـ Consent Mode v2: ad_storage وad_user_data وad_personalization وanalytics_storage بقيمة "denied"، وwait_for_update بقيمة 500. ب. أعطِ كل رابط إجراء data-conv="phone" أو "whatsapp" أو "booking" وسمة data-conv-place باسم قسمه. يدفعها مستمع نقر واحد إلى dataLayer على شكل `{event: "phone_click" | "whatsapp_click" | "booking_click", conv_place, page_path}`. ج. لا تضع مقتطف GTM الكلاسيكي في `<head>`؛ بل أدرجه بعد حدث load باستخدام requestIdleCallback، حتى لا تؤخر الوسوم أول عرض للصفحة. د. أضف شريط موافقة صغيرًا ثابتًا: زرا الرفض والقبول بوزن متساوٍ، ويُخزَّن الاختيار في المتصفح ويُرسل كتحديث للموافقة. على الجوال يظهر فوق شريط الإجراءات وبمستوى منخفض بما يكفي حتى لا يغطي الزر الرئيسي في القسم الرئيسي. 3. Tag Manager: اعرض أولًا الحالة الحالية باستخدام list_gtm_containers وlist_gtm_triggers وgtm_workspace_status. اقترح ثلاثة مشغلات من نوع Custom Event باستخدام create_gtm_trigger (phone_click وwhatsapp_click وbooking_click). ابحث عن تحويل التواصل وقيمة send_to الخاصة به في Google Ads باستخدام list_conversion_actions وget_conversion_tags. حتى لا يُحتسب الشخص الذي يتصل ويراسل معًا مرتين، اقترح ربط الهاتف وWhatsApp بتحويل واحد باسم "نقرة تواصل" يُحتسب مرة واحدة؛ وإن لم يكن موجودًا، فاذكر ما كنت ستنشئه وانتظر موافقتي. اقترح وسم تحويل لـ Google Ads باستخدام create_gtm_tag (tag_type "sp"). بالنسبة إلى Meta، ابحث عن البكسل باستخدام list_meta_pixels؛ وإن لم يكن كود البكسل الأساسي في الحاوية، فاقترحه كوسم Custom HTML على جميع الصفحات، واقترح بشكل منفصل الوسوم التي ترسل `fbq('track','Contact')` عند النقرات و`fbq('track','Schedule')` عند الحجز. شغّل كل أداة أولًا بالقيمة confirm=false، واعرض قائمة التغييرات، وأنشئها بعد موافقتي. اعرض publish_gtm_container أولًا بالقيمة confirm=false، وانشر بعد موافقتي، وأشِر إلى النسخة التي يمكن استعادتها. 4. خطة الاختبار: اكتب خطوة بخطوة كيف يمكنني أن أرى في وضع المعاينة في GTM أي وسم يعمل عند كل زر من الأزرار الثلاثة، وأنه لا يُكتب أي ملف تعريف ارتباط إعلاني عند رفض الموافقة. 5. بعد إضافة GTM والوسوم، شغّل core_web_vitals مرة أخرى، لأن الوسوم قد تخفض الدرجة، واعرض الفرق في جدول. وحتى لا تحجب مانعات الإعلانات وسم Google، اعرض معاينة لمسار القياس من الطرف الأول باستخدام site_tag_gateway وأعدّه بعد موافقتي. الإعداد والمزالق المعروفة (كل واحدة منها خفضت درجة في قياسات العرض التجريبي، فلا تتجاوز أيًا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم، فأخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false واستدعه مع confirm=true بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الخطوط، والألوان، والشبكة، والعنصر المميز، ولغة الحركة، والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets واعرضه علي. 2. اجعل Tailwind مُجمَّعًا بدل تحميله من CDN. ثبّته باستخدام site_run_command مع background=true: `npm i -D tailwindcss@3`، ثم تابعه بـ site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML والقوالب وأي ملف JS يكتب أسماء الفئات. يحتوي `_src/tw.css` على السطر `@import "../assets/app.css";` وأسطر `@tailwind` الثلاثة؛ جمّعه في ملف واحد بالأمر `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. أزل سكربت cdn.tailwindcss.com وإعداد tailwind.config المضمّن من كل صفحة، واربط `/assets/site.css` فقط. أعد التجميع بعد كل تغيير في HTML. 3. استضف الخطوط بنفسك. اقرأ CSS لعائلات Fontshare التي اخترتها، ونزّل ملف woff2 لكل وزن إلى `assets/fonts/` باستخدام site_fetch، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`؛ فـ design-check يبحث هناك عن خط مخصص. تحقق من اسم font-family في CSS الذي نزّلته، لأن Fontshare قد تعيد عائلة مختلفة عندما لا يتوفر وزن ما. نفّذ preload لخط عنوان الشاشة الأولى وخط النص الأساسي في كل صفحة باستخدام `<link rel="preload" as="font" type="font/woff2" crossorigin>`؛ في العرض التجريبي أزال هذا اهتزاز التخطيط الناتج عن تبديل الخط (CLS من 0.024 إلى 0). معظم خطوط Fontshare لا تحتوي على رمز ₺، لذا اكتب "TL" في الأسعار. 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js أو site.config.js في الصفحات. اكتب ملف `chrome-stamp.mjs` صغيرًا يقرأ قائمة التنقل في site.config.js ويختم `_src/header.tpl` و`_src/footer.tpl` بين العلامتين `<!-- nav:start --><!-- nav:end -->` و`<!-- footer:start --><!-- footer:end -->` في كل صفحة، مع إضافة aria-current="page" إلى الرابط الحالي. لا تعطِ القوالب امتداد .html واستخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}`، وإلا فسيقرأها design-check وseo-check على أنها صفحات غير مكتملة. ابنِ قائمة الجوال بدون JS باستخدام `<details>`. أبقِ اسم النشاط والعنوان والهاتف في التذييل كنص عادي. 5. حوّل الصور أثناء تنزيلها باستخدام site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1200x"، وimage_format="webp"، وquality=65. أعطِ كل `<img>` السمات srcset وsizes وwidth وheight. الصورة الرئيسية في الشاشة الأولى تأخذ fetchpriority="high" ولا تكون lazy أبدًا؛ وباقي الصور تأخذ loading="lazy" decoding="async". إذا كانت الصورة الرئيسية تملأ شاشة الجوال، فقدّم اقتطاعًا أعرض وأصغر على الجوال باستخدام `<picture>` (في العرض التجريبي انخفض حجم صورة القسم الرئيسي على الجوال من 89 KB إلى 43 KB). 6. أنشئ أيقونة favicon بصيغة PNG بحجم 48 px من الشعار باستخدام site_fetch وأضف `<link rel="icon">` إلى كل صفحة. بدونها يسجل المتصفح خطأ 404 وتنخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة (ملفات البداية في الحزمة تستخدم أحرفًا صغيرة)، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم السمة style="" أبدًا، وأعطِ كل زر type="button". SEO وAEO وGEO: 1. استخدم عناوين URL للمجلدات مع شرطة مائلة في النهاية (/gizlilik/). املأ كتلة seo في site.config.js وشغّل `node seo-stamp.mjs`. اكتب مخطط schema الخاص بكل صفحة (في صفحة الحملة WebPage، وService مرتبط بـ #business بصفته provider مع areaServed، وFAQPage؛ وفي صفحة الخصوصية WebPage وBreadcrumbList. في site.config.js استخدم النوع الفرعي الأدق من LocalBusiness، مثل HousePainter أو Plumber أو Dentist. تشرح صفحة الخصوصية ملفات تعريف الارتباط ووسوم القياس وكيفية تغيير اختيار الموافقة) في كتل `<script type="application/ld+json">` منفصلة واربطها بالرسم البياني الأساسي عبر @id. لا تدفن BreadcrumbList داخل @graph؛ أعطه كتلته الخاصة، لأنها الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعدّ seo-check أي عنوان يتجاوز 65 خطأً)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد لكل صفحة. تحتاج كل صفحة إلى 150 كلمة على الأقل من المحتوى الرئيسي؛ وصفحتا التواصل والخصوصية تميلان إلى أن تكونا أقصر. 3. تجيب الفقرة الأولى في كل صفحة مباشرة عن سؤال الصفحة. اكتب قسم أسئلة شائعة خاصًا بالصفحة باستخدام `<details>` ووسمه بـ FAQPage. أظهر المؤسسة الناشرة وتاريخ "آخر تحديث" باستخدام `<time>`. 4. في robots.txt، اكتب قرارك مع سببه لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot وCCBot، وأشِر إلى خريطة الموقع. يحمل sitemap.xml تواريخ lastmod حقيقية. يضم llms.txt ملخصًا دقيقًا للموقع في جملتين وقائمة بالصفحات الرئيسية. 5. لا تخترع شيئًا: لا مراجعات ولا تقييمات ولا جوائز ولا أعداد عملاء ولا شهادات ولا ساعات عمل ولا إحداثيات ولا أسعار ما لم أزودك بها. اترك الحقول المجهولة خارج schema. بوابات التحقق (بالترتيب؛ لا تعتبر العمل منتهيًا حتى تنجح جميعها): 1. باستخدام site_run_command شغّل `node chrome-stamp.mjs` وبناء Tailwind و`node seo-stamp.mjs` و`node seo-check.mjs` (0 أخطاء، 0 تحذيرات) و`node design-check.mjs` (0 أخطاء؛ برّر أي تحذير متبقٍ) و`npx html-validate "**/*.html"` (0 أخطاء). 2. اعرض كل صفحة باستخدام site_preview مع view="mobile" وview="desktop". يلتقط site_preview الصفحة مع إيقاف الحركة (reduced-motion)، فإذا كان هناك محتوى مفقود في تلك الصورة، فهذا يعني أن حالة عدم الحركة معطلة. في لقطات الصفحة الكاملة قد تظهر الصور الكسولة في الأسفل فارغة؛ هذا ليس خطأً، لكن تحقق من مساراتها. 3. شغّل core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". النجاح: على الجوال Performance لا تقل عن 95، وAccessibility وBest Practices وSEO تساوي 100؛ وعلى سطح المكتب الأربعة جميعها لا تقل عن 95. في أي صفحة تفشل، استخدم resources=true للعثور على الملف الذي يعطلها، وأصلحه، ثم قِس مجددًا. بعد ذلك شغّل seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا تحتوي قائمة طلبات الشبكة على أي مضيف غير نطاقك الخاص. 4. لا تمرير أفقي عند العروض 360 و390 و768 و1440 px، وأهداف اللمس لا تقل عن 44 px، ولا أخطاء في وحدة التحكم. ولأن هذه صفحة هبوط إعلانية، قِسها أيضًا بدون الوسوم: درجات البوابات خاصة بالصفحة بدون وسوم، وتُقاس الصفحة مع الوسوم بشكل منفصل في الخطوة 5. بعد النشر: اعرض معاينة القاعدة `/assets/* Cache-Control: public, max-age=31536000, immutable` باستخدام site_headers وطبّقها بعد موافقتي؛ ومن ذلك الحين، غيّر أسماء ملفات CSS أو JS عندما تتغير (site-v2.css وهكذا). أرسل sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية باستخدام gsc_url_inspect. اختم بجدول درجات لكل صفحة (الصفحة، أربع درجات للجوال، أربع درجات لسطح المكتب، LCP، CLS)، ونتائج البوابات، وقائمة الإصلاحات التي طبقتها.