تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تعلم الأساسيات بالمثال

يتوسّع الدليل التالي في ما يخص عرض إعلان اختباري، ويقدّم المزيد من المفاهيم الأساسية للاستفادة إلى أقصى حد من مكتبة علامة "ناشر Google" (GPT). وتشمل هذه المفاهيم ما يلي:

حجم الإعلانات
استهداف القيمة الأساسية
بنية الطلب الفردي

تحميل مكتبة علامة "ناشر Google"

ابدأ بتحميل مكتبة GPT وإعدادها. أضِف ما يلي إلى <head> لمستند HTML:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

يؤدّي ذلك إلى تحميل مكتبة GPT وإعداد كلّ من العنصرَين googletag وCommandArray. إنّ إعداد هذه الكائنات يتيح لك البدء في استخدام صفيف أوامر GPT على الفور. أضِف رمز JavaScript الذي يتبع نص الدالة الفارغة المحددة في هذا المقتطف.

تحديد الشرائح الإعلانية

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

شريحة إعلانية ذات حجم ثابت

في ما يلي شريحة إعلانية بسيطة وثابتة الحجم:

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

بالإضافة إلى مسار الوحدة الإعلانية وحجمها ورقم تعريف الحاوية <div>، يحدّد هذا المقتطف أيضًا عددًا من خيارات الاستهداف. وتعمل هذه الخيارات على تقييد وتمييز الإعلانات المؤهَّلة للعرض في هذه الخانة. اطّلِع على مزيد من المعلومات عن استهداف القيمة الرئيسية.

شريحة إعلانية ثابتة

في ما يلي شريحة إعلانية ثابتة، مرفقة بأسفل إطار العرض:

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

خانات الإعلانات الثابتة هي نوع من التنسيقات "خارج الصفحة"، ويتم تحديدها باستخدام طريقة defineOutOfPageSlot، بدلاً من طريقة defineSlot المعتادة. تعرّف على مزيد من المعلومات عن تصميمات الإعلانات خارج الصفحة.

غالبًا ما تفرض أشكال الإعلانات خارج الصفحة قيودًا على أنواع الصفحات والأجهزة التي تكون مؤهّلة للعرض عليها. نتيجةً لهذه القيود، يجب التأكّد من أنّه تم تحديد الخانة بنجاح قبل التفاعل معها. راجع نموذج عرض إعلان ثابت لمزيد من التفاصيل.

شريحة إعلانية سلسة

في ما يلي شريحة إعلانية سلسة لإعلان مدمج مع المحتوى:

// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

ليس للخانات الإعلانية المرنة حجم ثابت. يتم ضبط الشرائح الإعلانية المرنة لتلائم المحتوى الإبداعي في الإعلان. يمكنك تحديد الشرائح الإعلانية السلسة من خلال خيار الحجم fluid. اطّلِع على مزيد من المعلومات حول أحجام الإعلانات وخيارات المقاسات المتاحة.

ضبط الإعدادات على مستوى الصفحة

تنطبق بعض خيارات ضبط GPT بشكل عام، بدلاً من خانات إعلانية محددة. ويُشار إلى هذه الإعدادات بالإعدادات على مستوى الصفحة.

في ما يلي مثال على كيفية ضبط الإعدادات على مستوى الصفحة:

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

يفعل هذا المقتطف ثلاثة أشياء:

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

الإعلانات الصورية

أخيرًا، أضِف المقتطف التالي إلى <body> في الصفحة:

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

يؤدي هذا إلى تحديد حاويتين للشرائح الإعلانية: banner-ad وnative-ad. تتوافق قيم الحاوية id هذه مع القيم التي قدمتها عند تحديد الخانات الإعلانية في وقت سابق من هذا المثال.

بعد تحديد كل الشرائح الإعلانية، يتم طلب عرض banner-ad. ونظرًا لتفعيل استراتيجية SRA، تطلب هذه المكالمة المعروضة أحادية العرض جميع الشرائح الإعلانية المحدّدة حتى هذه اللحظة. وإذا لزم الأمر، يمكنك التحكّم في تحميل الإعلانات وإعادة تحميلها وسلوك التجميع بدقة أكبر مع تفعيل SRA.

مثال كامل

في ما يلي رمز المصدر الكامل لنموذج الصفحة الذي يستند إليه هذا الدليل. يمكنك أيضًا مشاهدة عرض توضيحي تفاعلي لهذه الصفحة.

JavaScript

TypeScript

البدء

استخدام TypeScript