كيف تُجهّز بانر HTML5 للـ ad server

قد يبدو البانر مثاليًا على شاشتك ومع ذلك يرفضه ad server. وغالبًا ما يكون السبب واحدًا: تفصيل تقني لم يراجعه أحد. يستعرض هذا الدليل، بالترتيب، ما يُستحسن التحقق منه قبل رفع بانر HTML5.

قبل البدء

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

الحزمة: ملف .zip يحتوي على index.html في الجذر

يُسلَّم البانر كملف .zip. داخله يجب أن يكون index.html في الجذر (وليس داخل مجلد)، وأن تكون الموارد، مثل الصور والخطوط، بجانبه أو في مجلدات فرعية. خطأ شائع جدًا هو ضغط المجلد كاملًا بدلًا من محتواه: يفتح الـ ad server ملف .zip، ولا يجد index.html في الجذر، فيرفضه.

إذا كان لديك عدة مقاسات أو لغات، فكل تركيبة قطعة مستقلة لها ملف .zip خاص بها. يحزمها BannerMotion بهذا الشكل افتراضيًا («Un .zip por pieza») ويمكنه أيضًا جمع اللغات في مجلدات («Un .zip por tamaño»).

المقاس المُعلَن

يعلن البانر مقاسه بوسم meta داخل <head>. تقرؤه المنصة لتعرف كيف تعرضه، ولتتحقق من أنه يطابق المساحة التي اشتريتها.

<meta name="ad.size" content="width=300,height=250">

يجب أن يتطابق المقاس المُعلَن مع حاوية البانر ومع المساحة المشتراة بالبكسل. بانر 300×250 داخل مساحة 300×600 خطأ في الإنتاج، وليس خطأ في المنصة.

clickTag: رابط الوجهة

لا يُكتب رابط الوجهة ثابتًا داخل البانر. يقرأ البانر متغيرًا اسمه clickTag تحدده المنصة، ويستخدمه عند النقر. بهذا يستطيع الـ ad server أن يحسب كل نقرة قبل أن يحوّل المستخدم إلى صفحتك.

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

ثلاث تفاصيل تُغفل عادةً: المتغير يُكتب تمامًا clickTag (الأحرف الكبيرة والصغيرة مهمة)؛ والعنوان الذي تتركه في الملف تجريبي، لأن كثيرًا من المنصات تستبدله عند عرض الإعلان؛ ويجب أن يحتوي البانر على إجراء نقر واحد فقط يغطي القطعة كلها. بعض المنصات تستخدم مكتبتها الخاصة أو اسمًا مختلفًا، فراجع دليلها.

الحد الأقصى لوزن ملف .zip

لكل منصة حد أقصى لملف .zip. قِس دائمًا ملف .zip النهائي، وليس المجلد غير المضغوط، واترك هامشًا: من الأسهل تقليص الوزن قبل الرفع من تصحيح رفض. وبعض المنصات تفرّق أيضًا بين التحميل الأولي والتحميل الكامل (ويُسمّى polite load).

يقيس BannerMotion وزن كل قطعة عند التصدير ويقارنه بحد قابل للضبط؛ هذا الحد لا يحل محل الحد الفعلي لمنصتك. والبانرات لا تتضمن مكتبات طرف ثالث، وهذا يساعد على إبقاء الوزن منخفضًا. [PLACEHOLDER: الوزن المعتاد لقطعة مُقاسة، عند توفر قياس قابل للنشر.]

ما يزيد الوزن، من الأكبر إلى الأصغر: الفيديوهات، والصور (خصوصًا بدقة مضاعفة لشاشات retina)، والخطوط ذات الأنماط الكثيرة، والمكتبات. لخفضه: استخدم النص والأشكال المتجهة (SVG) بدل الصور متى أمكن، واجمع الأيقونات الصغيرة في sprite واحد، واضغط الصور، وحمّل أوزان الخط التي تستخدمها فقط.

بلا موارد خارجية

كل ما يحتاجه البانر يجب أن يكون داخل ملف .zip: الصور والخطوط والمكتبات. كثير من المنصات تحجب أو تعاقب الملفات التي تُطلب من خادم آخر (خط من CDN، أو مكتبة مستضافة خارجيًا)، لأنها لا تستطيع ضمان توفرها أو أمانها. في BannerMotion الحزمة مكتفية بذاتها: لا ترسل أي طلبات إلى نطاقات أخرى.

الحركة والمدة والتكرار

غالبًا ما تحدّد المنصات مدة الحركة وعدد مرات تكرارها (وعادةً نحو 30 ثانية كحد أقصى وعدد محدود من الدورات). والقيمة الدقيقة تختلف من منصة لأخرى. يبدأ مُصدِّر BannerMotion من حد أقصى قدره 30 ثانية في إعداده العام.

ممارستان جيدتان لا تعتمدان على أحد: أن تكون الرسالة والزر مكتملين في الإطار الأخير (لأن هذا الإطار يبقى على الشاشة)، وأن تستخدم الحركات منحنيات easing سلسة على عدد قليل من keyframes مختارة بعناية، بدلًا من حركات كثيرة متوترة.

صورة الاحتياط

بعض المنصات تطلب صورة احتياط (JPG أو PNG أو GIF) بالمقاس نفسه، تُعرض إذا لم ينفّذ المتصفح HTML5. والمعتاد استخدام الإطار الأخير من الحركة. أكّد ما إذا كانت منصتك تطلبها، وهل تُدرج داخل الحزمة أم تُرفع منفصلة، وبأي وزن أقصى. في BannerMotion تظهر صورة الاحتياط الثابتة بعبارة «قريبًا» في شاشة التصدير.

اختبر قبل الرفع

فك ضغط ملف .zip في مجلد جديد وافتح index.html في المتصفح. تحقّق من أن الحركة تُعرض كاملة، وأن النص لا ينقطع، وأن النقر يفتح العنوان المتوقع، وأنه لا تظهر أي أخطاء في وحدة التحكم (console) بالمتصفح. كرّر ذلك على أصغر مقاس وأكبر مقاس في الحملة.

البانر الذي لا يمكن اختباره ليس منتهيًا.

قائمة المراجعة

• ملف .zip يحتوي على index.html في الجذر.
• وسم ad.size يطابق مقاس البانر والمساحة المشتراة.
• النقر يستخدم clickTag وهناك إجراء نقر واحد فقط.
• ملف .zip وزنه أقل من حد المنصة (يُنبّهك BannerMotion بالحد الذي تضبطه).
• لا توجد موارد خارجية: لا يُطلب شيء من نطاق آخر.
• المدة والتكرار ضمن ما تسمح به المنصة.
• الإطار الأخير يحتوي على الرسالة الكاملة والزر.
• تم الاختبار في المتصفح، على أصغر مقاس وأكبره.

عند الرفع: ما هو trafficking

رفع البانر وإسناده إلى حملته وتواريخه ومساحاته هو عمل trafficking. وعندما تصل الحزمة مُعدّة جيدًا، تختصر هذه الخطوة إلى الرفع، والاختبار في معاينة المنصة، ثم الإسناد. وبعد النشر، تأكّد في تقارير الـ ad server أن النقرات تُحسب.

يصدّر BannerMotion كل قطعة بالمقاس المُعلَن وclickTag مدرج والوزن المُتحقَّق منه، ويُنبّه إذا كان شيء ناقصًا. الإرسال المباشر إلى ad servers ضمن خطة المنتج؛ في الوقت الحالي تنزّل الحزمة وترفعها يدويًا.