يوضّح الدليل التالي بالتفصيل كيفية عرض إعلان اختباري، ويقدّم المزيد من المفاهيم الأساسية للاستفادة إلى أقصى حدّ من مكتبة علامات "ناشر 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، يمكنك تحديد خانات الإعلانات. يحدِّد المثال التالي ثلاث خانات إعلانية بأشكال إعلانات وحجم ومقاييس targeting مختلفة.
خانة إعلانية ذات حجم ثابت
في ما يلي مساحة إعلانية بسيطة ذات حجم ثابت:
// 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> الحاوية، يحدِّد هذا ال snippet أيضًا عددًا من خيارات الاستهداف. تحدّ هذه الخيارات من الإعلانات المؤهّلة للعرض في هذه المساحة وتصنّفها. اطّلِع على مزيد من المعلومات عن
استهداف القيم الرئيسية.
خانة الإعلانات الثابتة
في ما يلي خانة إعلان ثابت، مرفقة بأسفل إطار العرض:
// 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)، الذي يجمع طلبات مَواضع إعلانات متعدّدة في طلب إعلان واحد تحسِّن ميزة "الاستبعادات المشترَكة" الأداء، وهي ضرورية لضمان الالتزام بالاستبعادات التنافسية والإجراءات الوقائية، لذا ننصحك بتفعيلها دائمًا. اطّلِع على مزيد من المعلومات عن استخدام ميزة "الاستبعادات المشترَكة" بشكل صحيح.
- تفعّل الخدمات المرتبطة بالخانات الإعلانية التي تسمح بتقديم طلبات الإعلانات.
الإعلانات الصورية
أخيرًا، أضِف المقتطف التالي إلى <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، يطلب هذا الطلب الفردي للعرض جميع المساحات الإعلانية
المحدّدة حتى هذه المرحلة ويعرضها. إذا لزم الأمر، يمكنك بدقة أكبر
التحكّم في تحميل الإعلانات وإعادة تحميلها و
سلوك تجميع الإعلانات مع تفعيل ميزة "التحميل المُدار للإعلانات".
مثال كامل
في ما يلي رمز المصدر الكامل لنموذج الصفحة التي يستند إليها هذا الدليل. يمكنك أيضًا الاطّلاع على عرض تجريبي تفاعلي لهذه الصفحة.