أحجام الإعلانات

يجب أن تحدّد كل شريحة إعلانية تحدّدها أحجام الإعلانات المؤهّلة للعرض في تلك الشريحة. تختلف طريقة تحديد أحجام الإعلانات باختلاف نوع الإعلانات التي سيتم عرضها، وكذلك حجم الشرائح الإعلانية ومرونتها.

في بعض الحالات، قد يتم إلغاء حجم الإعلان على مستوى العناصر ضمن "مدير إعلانات Google". يمكنك زيارة مركز المساعدة للاطّلاع على مزيد من المعلومات.

يمكن العثور على الرمز الكامل للأمثلة المضمّنة في هذا الدليل في نموذج صفحة أحجام الإعلانات.

الإعلانات ذات الحجم الثابت

يمكنك تحديد شريحة إعلانية بحجم واحد ثابت.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

في هذا المثال، لن يتم عرض سوى تصميمات الإعلانات ذات الحجم 300x250.

النقطة الأساسية: عند العمل مع الإعلانات ذات الحجم الثابت، ننصحك بشدة بتحديد حجم العنصر <div> الذي سيتم عرض تصميم الإعلان عليه. ونظرًا لأن تصميمات الإعلانات غالبًا ما يتم عرضها بشكل غير متزامن، فقد تتسبب في تغيير العناصر الأخرى على الصفحة إذا لم تتوفر لها مساحة كافية.

الإعلانات متعددة الأحجام

إذا كان الإعلان يتيح استخدام أحجام متعددة، يجب تقديم قائمة بالأحجام المسموح بها عند تحديد الشريحة الإعلانية.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

في هذا المثال، يمكن عرض تصميمات الإعلانات بأحجام 300x250 و728x90 و750x200. ولا يضع "مدير إعلانات Google" في الاعتبار سوى المواد الإبداعية التي تتطابق مع هذه الأحجام أثناء عملية اختيار الإعلانات.

إذا لم يتم تحديد أبعاد للشريحة الإعلانية <div> في CSS، تعمل علامة GPT تلقائيًا على ضبط الأبعاد على قيمة مساوية لأقصر طول مُعلن وأعرض عرض معلَن أكبر من 1 بكسل عند استدعاء display(). في هذه الحالة، يكون 750x90. ومع ذلك، قد يحدث هذا الحجم بعد تحميل محتوى آخر على الصفحة، مما يتسبب في تغيير هذا المحتوى. لتجنّب متغيّرات التصميم، يمكنك حجز مساحة باستخدام CSS كما هو موضّح في دليل تقليل متغيّرات التصميم.

عند العمل مع الإعلانات متعددة الأحجام، تأكد من أن التنسيق مرن بما يكفي لدعم الإعلان الذي تم تحديده بأكبر حجم. سيؤدي ذلك إلى تجنب اقتصاص المواد الإبداعية عن غير قصد.

الإعلانات المرنة

ليس للإعلانات المرنة حجم ثابت، بل تتم مواءمتها لتتلاءم مع محتوى تصميم الإعلان الذي تعرضه. الإعلانات المدمجة مع المحتوى هي حاليًا نوع الإعلان الوحيد المرن الذي يدعمه "مدير الإعلانات".

عند العمل مع الإعلانات السلسة، يمكن تحديد حجم fluid مخصّص.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

في هذا المثال، ستحتوي الشريحة الإعلانية على عرض حاويتها الرئيسية وتغيّر حجم ارتفاعها لتلائم محتوى تصميم الإعلان. في ما يلي الخطوات التي تستغرقها علامة GPT لتغيير حجم الشريحة الإعلانية:

  1. يتم تلقّي استجابة الإعلان.
  2. تتم كتابة محتوى المواد الإبداعية في إطار iframe، مع ضبط الارتفاع الأولي على 0px وضبط العرض على 100%.
  3. بعد الانتهاء من تحميل جميع الموارد في iframe، يصبح تصميم الإعلان مرئيًا من خلال ضبط ارتفاع iframe على قيمة مساوية لارتفاع عنصر <body> في iframe.

الإعلانات المتجاوبة

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

ويتم تحقيق ذلك من خلال تحديد تعيين بين حجم إطار العرض وحجم الإعلان، ثم ربط عملية التعيين هذه بالشريحة الإعلانية.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

في هذا المثال، يحدِّد التعيين ما يلي:

  • عندما تكون قيمة إطار العرض >= 1024x768، يمكن عرض الإعلانات بحجم 750x200 أو 728x90.
  • عندما تكون العلامة 1024x768 > إطار العرض >= 640x480، يمكن عرض الإعلانات بحجم 300x250.
  • عندما تكون قيمة إطار العرض أقل من 640x480، لا يمكن عرض أي إعلانات.

سيكتشف GPT حجم إطار العرض للمتصفح الذي ينشئ الطلب ويستخدم أكبر تعيين مناسب. لتحديد أكبر عملية تعيين في GPT تأخذ في الاعتبار العرض أولاً، ثم الارتفاع (أي [100, 10] > [10, 100]). في حال حدوث خطأ في عملية الربط أو تعذّر تحديد حجم إطار العرض، سيتم استخدام الأحجام المحدّدة في defineSlot().

وبعد ذلك، يتم ربط عملية الربط بشريحة إعلانية من خلال استدعاء طريقة Slot.defineSizeMapping(). تقبل هذه الطريقة مجموعة من التعيينات بالتنسيق التالي:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

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

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]