جدول المحتويات

amp-ad / amp-embed

amp-ad

Description

A container to display an ad.

Required Scripts

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item fluid intrinsic nodisplay responsive

أمثلة

amp-ad amp-fx-flying-carpet amp-sticky-ad News Article Advanced User Consent Flow Client Side User Consent Flow

هذا العنصر عبارة عن حاوية لعرض الإعلان. amp-embed هو اسم مستعار للعنصر amp-ad، ويستمد كل وظائفه ولكن باسم علامة مختلف. استخدِم amp-embed عندما تريد أن تكون أكثر دقة من حيث الدلالة. لا تتيح مستندات AMP سوى الإعلانات/التضمينات التي يتم عرضها عبر HTTPS.

amp-ad / amp-embed

من المحتمل أن تتطور مواصفات amp-ad/amp-embed بشكل ملحوظ بمرور الوقت. وتم تصميم الأسلوب الحالي لتشغيل شكل الإعلان مبدئيًا لتتمكن من عرض الإعلان.

الوصف	هذا العنصر عبارة عن حاوية لعرض الإعلان. `amp-embed` هو اسم مستعار للعنصر `amp-ad`، ويستمد كل وظائفه ولكن باسم علامة مختلف. استخدِم `amp-embed` عندما تريد أن تكون أكثر دقة من حيث الدلالة. لا تتيح مستندات AMP سوى الإعلانات/التضمينات التي يتم عرضها عبر HTTPS.
النص البرمجي المطلوب	`<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>` ملاحظة: ربما لا يزال العنصر amp-ad يعمل بدون هذا النص البرمجي، لكننا ننصح باستخدام النص بشدة بغرض التوافق في المستقبل.
التنسيقات المعتمدة	fill وfixed وfixed-height وflex-item وintrinsic وnodisplay وresponsive
أمثلة	اطِّلع على مثال amp-ad في الموقع "AMP بالمثال".

السلوك

يتم تحميل الإعلانات مثل جميع الموارد الأخرى في مستندات AMP، مع عنصر مخصص خاص يُسمى <amp-ad>. لا يُسمح بتشغيل جافا سكريبت مقدم من شبكة إعلانات في مستند AMP. وبدلاً من ذلك، يحمّل وقت تشغيل AMP إطار iframe من أصل مختلف (من خلال وضع حماية إطارات iframe) مثل مستند AMP، ويعمل على تنفيذ جافا سكريبت المقدمة من شبكة الإعلانات داخل وضع حماية إطارات iframe هذا.

يتطلب العنصر <amp-ad> تحديد قيم العرض والارتفاع وفق قاعدة نوع التنسيق التابع له. ويتطلب أيضًا الوسيطة type التي تحدد شبكة الإعلانات التي يتم عرضها. يتم تلقائيًا تمرير جميع سمات data-* الموجودة على العلامة كوسيطات إلى الترميز الذي يعرض الإعلان في النهاية. وتختلف سمات data- المطلوبة حسب نوع الشبكة المعين كما يجب توثيقها باستخدام الشبكة.

مثال: عرض بعض الإعلانات

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>

فتح هذه القصاصة في الساحة

السمات

type (مطلوبة)	تحدد هذه السمة معرّف شبكة الإعلانات. تختار السمة `type` النموذج الواجب استخدامه لعلامة الإعلان.
src (اختياريّة)	استخدِم هذه السمة لتحميل علامة نص برمجي لشبكة الإعلانات المحددة. يمكن استخدامها لشبكات الإعلانات التي تتطلب إدراج علامة نص برمجية واحدة في الصفحة. يجب أن تحتوي قيمة `src` على بادئة مدرجة في القائمة البيضاء لشبكة الإعلانات المحددة ، ويجب أن تستخدم القيمة البروتوكول `https`.
data-foo-bar	تتطلب معظم شبكات الإعلانات تهيئة إضافية، والتي يمكن تمريرها إلى الشبكة باستخدام سمات `data-` باللغة HTML. تخضع أسماء المعلَمات إلى تحويل الشرطات إلى الحالة camelCase الخاصة بسمات البيانات القياسية. يتم مثلاً إرسال "data-foo-bar" إلى الإعلان لتهيئته ليكون "fooBar". يمكنك مراجعة وثائق شبكة الإعلانات لمعرفة السمات التي يمكن استخدامها.
data-vars-foo-bar	يتم حجر السمات المبدوءة بـ `data-vars-` لمتغيرات `amp-analytics`.
json (اختياريّة)	استخدِم هذه السمة لتمرير تهيئة إلى الإعلان ككائن JSON معقد بشكل عشوائي. يتم تمرير الكائن إلى الإعلان كما هو دون أي تغيير في الأسماء.
data-consent-notification-id (اختياريّة)	في حال توفير هذه السمة، فإنها تتطلب تأكيد amp-user-notification بمعرّف HTML-id المعين إلى أن يتم تمرير "معرِّف عميل AMP" (يشبه ملف تعريف ارتباط) للمستخدِم إلى الإعلان. يعني هذا تأخر عرض الإعلان إلى أن يؤكد المستخدِم الإشعار.
data-loading-strategy (اختياريّة)	توجّه هذه السمة الإعلان لبدء التحميل عندما يقع الإعلان ضمن عدد معين من إطارات العرض وبعيدًا عن إطار العرض الحالي. في حال غياب السمة `data-loading-strategy`، يتم استخدام الرقم 3 تلقائيًا. يمكنك تحديد قيمة تعويم ضمن النطاق [0 و3] (في حال عدم تحديد القيمة، سيتم تعيينها على 1.25). استخدِم قيمة أصغر للحصول على زيادة إمكانية العرض (أي زيادة فرصة مشاهدة الإعلان بعد تحميله) ولكن مع خطر إنشاء عدد أقل من مرات الظهور (أي عدد أقل من الإعلانات التي يتم تحميلها). إذا تم تحديد السمة مع ترك القيمة فارغة، سيقوم النظام بتعيين قيمة تعويم، ما يؤدي إلى تحسين إمكانية العرض بدون التأثير بشكل كبير على مرات الظهور. تجدر الإشارة إلى أن تحديد `prefer-viewability-over-views` لتكون القيمة يعمل تلقائيًا على تحسين إمكانية العرض.
data-ad-container-id (اختياريّة)	تُبلِغ هذه السمة الإعلان بمعرّف مكّوِن الحاوية في حال محاولة التصغير. يجب أن يكون مكّوِن الحاوية مكّوِن `<amp-layout>` ويكون عنصرًا رئيسيًا للإعلان. عند تحديد `data-ad-container-id`، والعثور على مكّوِن الحاوية `<amp-layout>`، سيحاول وقت تشغيل AMP تصغير مكّوِن الحاوية بدلاً من مكّوِن الإعلان أثناء عدم تعيين fill. يمكن أن تكون هذه الميزة مفيدة عند توّفر مؤشر الإعلان.
السمات المشتركة	يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

العنصر النائب

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

<amp-ad width=300 height=250
    type="foo">
  <div placeholder>Loading ...</div>
</amp-ad>

عدم توفر أي إعلان

في حال عدم توفر أي إعلان للخانة، تحاول AMP تصغير العنصر amp-ad (أي تعيينه على display: none). تحدد AMP إمكانية إجراء هذه العملية بدون التأثير على موضع تمرير المستخدِم. إذا كان الإعلان في إطار العرض الحالي، لن يتم تصغير الإعلان لأنه يؤثر على موضع تمرير المستخدِم ولكن إذا كان الإعلان خارج إطار العرض الحالي، سيتم تصغيره.

في حال تعذُّر محاولة التصغير: يتيح المكوِّن amp-ad عنصرًا ثانويًا من خلال السمة fallback. إذا كان هناك عنصر احتياطي، سيتم عرض العنصر الاحتياطي المخصص. وإلا تطبق AMP العنصر الاحتياطي التلقائي.

مثال مع عنصر احتياطي:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

عرض إعلانات الفيديو

هناك 3 طرق لتحقيق الربح من الفيديوهات في AMP من خلال إعلانات الفيديو:

تتيح AMP أصلاً عمل عدد من مشغلات الفيديو، مثل BrightCove وDailyMotion وغيرهما والتي يمكنها تحقيق الربح من الإعلانات. للحصول على القائمة الكاملة، راجع مكونات الوسائط.
استخدِم المكوِّن amp-ima-video الذي يأتي مع أداة تطوير البرامج لإعلانات الوسائط التفاعلية المضمّنة ومشغل فيديو HTML5.
إذا كنت تستخدم مشغل فيديو غير متوافق في AMP، يمكنك عرض مشغلك المخصص باستخدام amp-iframe. عند استخدام الأسلوب amp-iframe:
- تأكد من وجود ملصق إذا تم تحميل المشغل في إطار العرض الأول. يمكنك معرفة التفاصيل.
- يجب عرض الفيديو والملصق عبر HTTPS.

تشغيل الإعلانات من نطاق خاص

تتيح AMP تحميل إطار iframe للتشغيل المبدئي الذي يستخدَم لتحميل الإعلانات من نطاق خاص مثل نطاقك.

لتفعيل هذا، انسخ الملف remote.html إلى خادم الويب لديك. وبعد ذلك أضِف العلامة الوصفية التالية إلى ملفات AMP:

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

السمة content للعلامة الوصفية هي عنوان URL الكامل لنسختك من ملف remote.html على خادم الويب لديك. ويجب أن يستخدم عنوان URL هذا مخطط "https". لا يمكن استضافة العنوان على الأصل نفسه الذي عليه ملفات AMP. إذا استضفت مثلاً ملفات AMP على www.example.com، يجب ألا يكون عنوان URL هذا على النطاق www.example.com ولكن النطاق something-else.example.com مقبول. يمكنك مراجعة "سياسة أصل إطارات Iframe" للحصول على مزيد من التفاصيل عن الأصول المسموح بها لإطارات iframe.

الأمان

تحقق من صحة البيانات الواردة قبل تمريرها إلى الوظيفة draw3p للتأكد من تنفيذ إطار iframe المهام المتوقعة منه فقط. ويكون هذا صحيحًا لا سيما مع شبكات الإعلانات التي تسمح بإدخال جافا سكريبت مخصص.

يجب تنفيذ إطارات Iframe بشكل يجعل تضمينها مقتصرًا على الأصول التي يُتوقع تضمينهم فيها فقط. قد تكون الأصول:

أصولك الخاصة
https://cdn.ampproject.org لذاكرة التخزين المؤقت لصفحات AMP

في حال ذاكرة التخزين المؤقت لصفحات AMP، تحتاج أيضًا إلى التحقق من أن "أصل المصدر" (أصل المستند الذي يعرضه cdn.ampproject.org) هو أحد أصولك.

يمكن تنفيذ الأصول باستخدام الوسيطة الثالثة لوظيفة draw3p ويجب أيضًا أن يتم ذلك باستخدام التوجيه allow-from للحصول على إتاحة كاملة لعمل المتصفح.

تحسين تهيئة الإعلانات الواردة

هذا العمل اختياري تمامًا: نسعى أحيانًا إلى تحسين طلب الإعلان قبل إرساله إلى خادم الإعلانات.

إذا كانت شبكة الإعلانات تتيح الجلب السريع، يُرجى استخدام تهيئة الوقت الفعلي (RTC). (تتيح عمليات تكامل DoubleClick وAdSense الجلب السريع وتهيئة الوقت الفعلي).

إذا كانت شبكة إعلاناتك تستخدم الجلب المؤجل، يمكنك إرسال رد اتصال على اتصال الوظيفة draw3p في الملف remote.html. يتلقى رد الاتصال التهيئة الواردة كوسيطة أولى ثم يتلقى رد اتصال آخر كوسيطة ثانية (تحمل اسم done في المثال أدناه). يجب إجراء رد الاتصال هذا بالتهيئة المحدّثة حتى يتسنى استكمال عرض الإعلانات.

مثال:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

التصميم

لا يجوز أن تحتوي عناصر <amp-ad> نفسها على حاويات بها المجموعة CSS position: fixed ولا يجوز وضعها في هذه الحاويات (باستثناء amp-lightbox). ويرجع هذا إلى التأثيرات التي تلحق بتجربة المستخدِم نتيجة الإعلانات المركبة على الصفحة بأكملها. قد يتم النظر مستقبلاً في السماح بأشكال إعلانات مشابهة داخل حاويات AMP التي يتم التحكم فيها والتي تحافظ على بعض ثوابت تجربة المستخدِم.

التحقق

اطِّلع على قواعد amp-ad في مواصفات مدقق AMP.

شبكات الإعلانات المتوافقة

أنواع التضمينات المتوافقة

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow

هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub