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

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

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

تحميل مكتبة GPT

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

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

  googletag.cmd.push(() => {

  });
</script>

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

تحديد الخانات الإعلانية

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

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

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

// 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 fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
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