AMP

AMP لمواصفات الإعلانات

Important: this documentation is not applicable to your currently selected format websites!

إذا كنت ترغب في اقتراح إجراء تغييرات على المقياس، فيرجى التعليق على اعتزام التنفيذ.

إن إعلانات AMPHTML عبارة عن آلية لعرض الإعلانات بسرعة وآداء عالٍ في صفحات AMP. ولضمان إمكانية عرض مستندات إعلان AMPHTML ("تصميمات AMP") على نحو سريع وسلسل في المتصفح ولا تعيق تجربة المستخدم، يجب على تصميمات AMP الاستجابة لمجموعة من قواعد التحقق من الصحة. وعلى نحو مماثل لروح قواعد تنسيق AMP، تحتوي إعلانات AMPHTML على صلاحية وصول لمجموعة محدودة من العلامات والإمكانات والملحقات المسموح بها.

قواعد التنسيق لإعلان AMPHTML

مل لم يحدد خلاف ذلك أدناه، يجب على التصميم الاستجابة لكل القواعد المنصوص عليها في قواعد تنسيق AMP، ومضمنة هنا كمرجع، على سبيل المثال إعلان AMPHTML Boilerplate الخروج عن القوالب القياسية لـ AMP.

بالإضافة إلى ذلك، يجب على التصميمات الاستجابة للقواعد التالية:

القاعدة السبب
يجب استخدام نوع <html ⚡4ads> أو <html amp4ads> السماح لمسؤلي التحقق من الصحة بتحديد مستند تصميم الإعلان إما كمستند AMP عام أو مستند مخصص لـ AMPHTML مقيد وكذا إرساله على نحو مناسب.
يجب تضمين <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> كنص برمجي لوقت التشغيل بدلًا عن https://cdn.ampproject.org/v0.js. السماح بسلوكيات وقت تشغيل مخصصة لإعلانات AMPHTML التي يتم عرضها في iframe مشتركة الأصل.
يجب تضمين العلامة <link rel="canonical">. لا تحتوب تصميمات الإعلانات على "إصدار نموذجي بغير AMP" ولن يتم فهرستها بشكل مستقل في البحث، لذا فإن الإحالة الذاتية لن تكون مجدية.
يمكن تضمين علامات تعريف اختيارية في رأس HTML كمعرِّفات، وذلك بتنسيق <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">. ويجب أن تكون علامات التعريف تلك موضوعة قبل النص البرمجي amp4ads-v0.js. إذ إن قيمة vendor وid عبارة عن سلاسل تحتوي على [0-9a-zA-Z_-] فقط. وقيمة type is إما creative-id أو impression-id. يمكن استخدام هذه المعرَِفات المخصصة لتحديد الانطباع أو الإبداع. ويمكن أن تكون مفيدة في إعداد التقارير وتصحيح الأخطاء.على سبيل المثال:
<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">
قد يستهدف تتبع إمكانية المعاينة لـ <amp-analytics> محدد كامل الإعلانات فقط، وذلك عبر "visibilitySpec": { "selector": "amp-ad" } على النحو المحدد في المشكلة#4018 وPR #4368. على وجه الخصوص، لا يجوز له استهداف أي محددات للعناصر داخل تصميم الإعلان. في بعض الحالات، قد تختار إعلانات AMPHTML عرض تصميم إعلاني باستخدام iframe. وفي تلك الحالات، يمكن لتحليلات الصفحة المضيفة أن تستهدف فقط iframe بأكمله على أي حال، ولن تتمكن من الوصول إلى أي محددات دقيقة . على سبيل المثال:
<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

يرسل هذا التكوين طلبًا إلى عنوان URL https://example.com/nestedAmpAnalytics عندما يكون 50٪ من الإعلان المرفق مرئيًا بشكل مستمر على الشاشة لمدة ثانية واحدة.

النص النموذجي

تتطلب تصميمات إعلانات AMPHTML خط نمط نموذجيًا مختلفًا وأبسط كثيرًا مما تتطلبه مستندات AMP العامة:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

السبب: يخفي نمط amp-boilerplate المحتوى الأساسي حتى يصبح وقت تشغيل AMP جاهزًا ويمكن إظهاره. ففي حالة تعطيل Javascript أو فشل تحميل وقت تشغيل AMP، يضمن النص النموذجي الافتراضي عرض المحتوى في نهاية المطاف بصرف النظر عن ذلك.في إعلانات AMPHTML، وعلى الرغم من ذلك، يتم تعطيل Javascript تمامًا، ولن تعمل إعلانات AMPHTML ولن يتم عرض أي إعلان، لذا لا حاجة لقسم<noscript>. وفي غياب وقت تشغيل AMP، لن تتوفر معظم الآليات التي تعتمد عليها إعلانات AMPHTML (على سبيل المثال، تحليلات تتبع الرؤية أو amp-img لعرض المحتوى)، لذا من الأفضل عدم عرض أي إعلان بدلًا عن عرض إعلان معطل.

في النهاية، يستخدم النص النموذجي لإعلان AMPHTML amp-a4a-boilerplate بدلًا عن amp-boilerplateحتى يتمكن مسؤولو التحقق من الصحة من التعرف عليه بسهولة وإنتاج رسائل خطأ أكثر دقة لمساعدة المطورين.

لاحظ أن القواعد نفسها المتعلقة بالطفرات في النص النموذجي مطبقة كما في النص النموذجي العام لـ AMP.

CSS

القاعدة السبب
position:fixed وposition:sticky محظوران في CSS الإبداعي. يخرج position:fixed من DOM الظل، حيثما تعتمد إعلانات AMPHTML عليها. ولا يسمح أيضًا للإعلانات في AMP باستخدام الموضع الثابت.
touch-action محظور. إعلان يمكنه معالجة touch-action ويمكنه التداخل مع قدرة المستخدم على تمرير المستند المضيف.
CSS الإبداعي محدود على 20000 بايت. تعمل كتل CSS الكبيرة على زيادة حجم التصميم وزيادة زمن انتقال الشبكة وتقليل أداء الصفحة.
خضوع الانتقال والرسوم المتحركة إلى قيود إضافية. يجب أن تكون صفحات AMP قادرة على التحكم في جميع الرسوم المتحركة الخاصة بالإعلان، بحيث يمكن إيقافها عند عدم عرض الإعلان على الشاشة أو عندما تكون موارد النظام منخفضة جدًا.
تُعد البادئات الخاصة بالمورد أسماء مستعارة للرمز نفسه بدون البادئة لأغراض التحقق من الصحة. وهذا يعني إذا كان الرمز foo محظورًا بموجب قواعد التحقق من الصحة من CSS، فإن الرمز -vendor-foo سيكون محظورًا أيضًا. توفر بعض الخصائص التي يسبقها المورد وظائف مكافئة للخصائص المحظورة أو المقيدة بموجب هذه القواعد.

على سبيل المثال: -webkit-transition و-moz-transition كلاهما عبارة عن أسمين مستعارين لـ transition. وسيكون مسموح بهما فقط في سياقات حيثما يكون مسموح بـ transition المعطل (راجع قسم المحددات أدناه).

رسوم CSS المتحركة وانتقالاتها

المحددات

في النهاية، يستخدم النص النموذجي لإعلان AMPHTML amp-a4a-boilerplate بدلًا عن amp-boilerplate حتى يتمكن مسؤولو التحقق من الصحة من التعرف عليه بسهولة وإنتاج رسائل خطأ أكثر دقة لمساعدة المطورين.

  • تحتوي على الخصائص transition، أو animation، أو transform, visibility، أو opacity فقط.

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

جيد

.box {
transform: rotate(180deg);
transition: transform 2s;
}

سئ

الخاصية غير مسموح بها في فئة CSS.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}
الخصائص القابلة للنقل والتحريك

الخصائص الوحيدة التي يمكن نقلها هي معدل الشفافية والتحويل. (السبب)

جيد

transition: transform 2s;

سئ

transition: background-color 2s;

جيد

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

سئ

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

ملحقات AMP وعلاماتها المضمنة المسموح بها

فميا يلي وحدات AMP وعلامات AMP المدمجة المسموح بها في تصميم إعلان AMPHTML. إذ إن الملحقات أو العلامات المضمنة غير المدرجة بشكل صريح محظورة.

تكون معظم عمليات الحذف إما من أجل الأداء أو تسهيل تحليل إعلانات AMPHTML.

مثال: <amp-ad> محذوف من القائمة. إذ إنه غير مسموح به صراحةً لأنه يسمح <amp-ad> داخل <amp-ad> من شأنه أن يؤدي إلى حدوث تطور شلالي غير محدودة لتحميل الإعلان، وهو ما لا يلبي أهداف أداء إعلانات AMPHTML.

مثال: <amp-iframe> محذوف من القائمة. فهو غير مسموح به لأن الإعلانات يمكن أن تستخدمه لتنفيذ JavaScript عشوائي وتحميل محتوى غير محدد مسبقًا. ويجب أن تقوم الإعلانات التي ترغب في استخدام مثل هذه الإمكانيات false من إدخال a4aRegistry الخاص بها، واستخدم آلية عرض الإعلان "3p iframe" الحالية.

مثال: <amp-facebook>، و<amp-instagram>، و<amp-twitter>، و<amp-youtube> محذوفة للسبب نفسه مثل <amp-iframe>: جميعها تنشئ iframes مضمنة ويمكن أن تستهلك موارد غير محدودة فيهم.

مثال: <amp-ad-network-*-impl> محذوفة من القائمة. إذ إن العلامة <amp-ad> تتعامل مع التفويض إلى علامات التنفيذ هذه؛ حيث يجب ألا تحاول التصميمات تضمينها مباشرةً.

مثال: لم يتم تضمين <amp-lightbox> إلى الأن لأنه حتى بعض تصميمات إعلانات AMPHTML قد يتم عرضها في iframes ولا توجد حاليًا آلية لتوسيع الإعلان خارج iframes. ويمكن إضافة الدعم لها في المستقبل، إذا كانت هناك رغبة واضحة في ذلك.

علامات HTML

ما يلي عبارة عن علامات allowed في تصميم إعلانات AMPHTML. وهي علامات مسموح بها صراحةً وغير محظورة. وهذه القائمة عبارة عن مجموعة فرعية من السماح العامة لملحق علامة AMP العامة. ويتم ترتيب مثل هذه القائمة وفقًا لمواصفات HTML5 في القسم 4 عناصر HTML.

وتكون معظم عمليات الحذف إما من أجل لأداء أو لأن العلامات ليست معيار HTML5. على سبيل المثال: <noscript> محذوفة لأن إعلانات AMPHTML تعتمد على تمكين JavaScript، لذا لن يتم تنفيذ كتلة <noscript> أبدًا، وبالتالي ستؤدي إلى تضخيم النطاق الترددي والتكلفة ووقت الاستجابة لتصميم الإعلان فقط.. وعلى نحو مشابه، <acronym>، <big> وأخرى غيرهما محظورة لأنها غير متوافقة مع HTML5.

4.1 العنصر الجذر

4.1.1 <html>

  • يجب استخدام نوع <html ⚡4ads> أو <html amp4ads>

4.2 بيانات تعريف المستند

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

  • العلامات <link rel=...> غير مسموح بها، باستثناء <link rel=stylesheet>.

  • ملحوظة: على العكس في AMP العامة، فإن علامات <link rel="canonical"> محظورة.

4.2.5 <style> 4.2.6 <meta>

4.3 الأقسام

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 المحتوى المجمَّع

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 دلالات على مستوى النص

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 عمليات التحرير

4.6.1 <ins> 4.6.2 <del>

4.7 المحتوى المضمن

  • يتم دعم المحتوى المضمن عبر علامات AMP فقط، مثل <amp-img> أو <amp-video>.

4.7.4 <source>

4.7.18 SVG

لا تقع علامات SVG في مساحة اسم HTML5. إذ تم إدراجها في أدناه من دون معرِّفات القسم.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<svg> <g> <path> <glyph> <glyphref> <marker> <view> <circle> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> <clippath> <filter> <lineargradient> <radialgradient> <mask> <pattern> <vkern> <hkern> <defs> <use> <symbol> <desc> <title>

4.9 البيانات المجدولة

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 النماذج

4.10.8 <button>

4.11 البرمجة النصية

  • مثل مستند AMP عام، يجب أن تحتوي علامة <head> الخاصة بالتصميم على علامة <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
  • على عكس AMP العام، <noscript> محظور.
  • السبب: نظرًا لأن إعلانات AMPHTML تتطلب تمكين عمل Javascript مطلقًا، فإن كتل <noscript> لا تخدم أي غرض في إعلانات AMPHTML ولا تكلف سوى النطاق الترددي للشبكة.
  • على عكس AMP العام، <script type="application/ld+json"> محظور.
  • السبب: يتم استخدام JSON LD للغة ترميز البيانات المهيكلة في صفحات المضيف، لكن تصميمات الإعلانات ليست عبارة عن مستندات قائمة بذاتها ولا تحتوي على بيانات منظمة. فيما تكلف كتل JSON LD فيها عرض النطاق الترددي للشبكة.
  • ويتم ترحيل كل قواعد البرمجة النصية والاستثناءات الأخرى من AMP العام.