قد تحتاج إلى ربط خانات الإعلانات HTML في الصفحة بخانات إعلانات الفيديو أو الإعلانات التي تظهر على سطح الفيديو. يُشار إلى هذه العلاقة بين خانات الإعلانات المرتبطة باسم علاقة الإعلان الرئيسي والإعلان المصاحب.
بالإضافة إلى طلب الإعلانات الرئيسية للفيديو والإعلانات التي تظهر على سطح الفيديو، يمكنك استخدام حزمة تطوير البرامج للإعلانات التفاعلية لعرض إعلانات HTML المصاحبة. تظهر هذه الإعلانات ضمن بيئة HTML.
استخدام الإعلانات المصاحبة
لاستخدام الإعلانات المصاحبة، اتّبِع الخطوات التالية:
1. حجز إعلاناتك المصاحبة
عليك أولاً حجز الإعلانات المصاحبة التي تريد عرضها مع إعلاناتك الرئيسية. يمكن عرض الإعلانات المصاحبة في مدير إعلانات Google. يمكنك عرض ما يصل إلى ستة إعلانات مصاحبة لكل إعلان رئيسي. تُعرف هذه التقنية أيضًا باسم الإعلان الحصري، وهي تحدث عندما يتحكّم مشترٍ واحد في جميع الإعلانات على الصفحة.
2. طلب إعلاناتك المصاحبة
تكون الإعلانات المصاحبة مفعّلة تلقائيًا لكل طلب عرض إعلان.
3. عرض الإعلانات المصاحبة
هناك طريقتان لعرض الإعلانات المصاحبة:
تلقائيًا باستخدام علامة "ناشر Google" (GPT).
إذا كنت تستخدم علامة "ناشر Google" لعرض إعلاناتك المصاحبة، ستظهر تلقائيًا طالما تم الإعلان عن خانات الإعلانات المصاحبة على صفحة HTML وتم تسجيل هذه الإعلانات في واجهة برمجة التطبيقات (أي يجب أن يتطابق معرّف div في JavaScript وHTML). في ما يلي بعض مزايا استخدام علامة "ناشر Google":
- التعرّف على خانة الإعلان المصاحب
- إعادة ملء الإعلانات المصاحبة من شبكة الناشر، إذا كان ردّ VAST يحتوي على عدد أقل من الإعلانات المصاحبة مقارنةً بالعدد المحدّد من الخانات على صفحة HTML
- الملء التلقائي للإعلانات المصاحبة إذا كان إعلان الفيديو غير متوفّر
- خانات الإعلانات المصاحبة المحمَّلة مسبقًا لمشغّلات فيديو انقر للتشغيل
- عرض الإعلانات المصاحبة تلقائيًا، بما في ذلك
HTMLResourceوiFrameResource
يدويًا باستخدام Ad API.
استخدام الإعلانات المصاحبة مع علامة "ناشر Google"
تتولّى علامة "ناشر Google" عرض إعلانات HTML المصاحبة على موقعك الإلكتروني تلقائيًا. ننصح معظم الناشرين باستخدام علامة "ناشر Google". تتعرّف حزمة تطوير برامج HTML5 على خانات علامة "ناشر Google" إذا تم تحميل علامة "ناشر Google" على صفحة الويب الرئيسية (وليس في إطار iframe). يمكنك الاطّلاع على معلومات أكثر تفصيلاً حول استخدام علامة "ناشر Google" مع حزمة تطوير البرامج للإعلانات التفاعلية في مستندات علامة "ناشر Google".
إذا كنت تستضيف حزمة تطوير برامج HTML5 ضمن إطار iframe
إذا استوفيت كلا المعيارَين التاليَين، عليك تضمين نص برمجي إضافي للوكيل لكي تظهر إعلاناتك المصاحبة التي تستخدم علامة "ناشر Google" بشكلٍ صحيح:
- تحميل حزمة تطوير برامج HTML5 في إطار iframe
- تحميل علامة "ناشر Google" على صفحة الويب الرئيسية (خارج إطار iframe)
لكي تظهر إعلاناتك المصاحبة في هذا السيناريو، عليك تحميل النص البرمجي للوكيل الخاص بعلامة "ناشر Google" قبل تحميل حزمة تطوير البرامج:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
بعض النقاط المهمة الواجب مراعاتها:
- يجب عدم تحميل أي علامة "ناشر Google" داخل إطار iframe الذي يتم فيه تحميل حزمة تطوير البرامج.
- يجب تحميل علامة "ناشر Google" على الصفحة الرئيسية، وليس في إطار iframe آخر.
- يجب تحميل النص البرمجي للوكيل في الإطار نفسه الذي يتم فيه تحميل علامة "ناشر Google" (أي على الصفحة الرئيسية).
التعريف بخانات الإعلانات المصاحبة في HTML
يوضّح هذا القسم كيفية الإعلان عن الإعلانات المصاحبة في HTML باستخدام علامة "ناشر Google"، ويقدّم نموذجًا للرمز البرمجي لسيناريوهات مختلفة. بالنسبة إلى حزمة تطوير برامج HTML5، عليك إضافة بعض JavaScript إلى صفحة HTML والإعلان عن خانات الإعلانات المصاحبة.
- المثال 1: استخدام خانة إعلانية أساسية
- المثال 2: استخدام خانة إعلانية ديناميكية
- المثال 3: خانات الإعلانات المحمَّلة مسبقًا
المثال 1: استخدام خانة إعلانية أساسية
يوضّح نموذج الرمز البرمجي التالي كيفية تضمين ملف gpt.js في صفحة HTML والإعلان عن خانة إعلانية. تبلغ أبعاد الخانة الإعلانية التي تم الإعلان عنها 728×90 بكسل. تحاول علامة "ناشر Google" ملء الخانة بأي إعلانات مصاحبة يتم عرضها في ردّ VAST وتتطابق مع هذا الحجم. بعد الإعلان عن خانات الإعلانات، يمكن أن تعرضها الدالة googletag.display() في أي مكان يتم استدعاؤها فيه على الصفحة. بما أنّ الخانات هي خانات إعلانات مصاحبة، لا يتم عرض الإعلانات على الفور. بدلاً من ذلك، تظهر بجانب إعلان الفيديو الرئيسي.
في ما يلي مثال على عملية التنفيذ:
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
للتجربة:
يمكنك الاطّلاع على نموذج التعليمات البرمجية التالي لمعرفة عملية التنفيذ:
المثال 2: استخدام خانة إعلانية ديناميكية
في بعض الأحيان، قد لا تعرف عدد الخانات الإعلانية على الصفحة إلى أن يتم عرض محتوى الصفحة. يوضّح نموذج الرمز البرمجي التالي كيفية تحديد الخانات الإعلانية أثناء عرض الصفحة. هذا المثال مطابق للمثال 1 باستثناء أنّه يسجّل الخانات الإعلانية في الأماكن التي يتم عرضها فيها فعليًا.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
للتجربة:
يمكنك الاطّلاع على نموذج التعليمات البرمجية التالي لمعرفة عملية التنفيذ:
المثال 3: خانات الإعلانات المحمَّلة مسبقًا
في حالات معيّنة، قد تحتاج إلى عرض محتوى في الخانة الإعلانية قبل طلب الإعلان المصاحب. عادةً ما يتم طلب الإعلانات المصاحبة مع إعلان فيديو. قد يحدث هذا الطلب بعد تحميل الصفحة. على سبيل المثال، قد يتم تحميل الإعلان المصاحب فقط بعد أن ينقر المستخدِم على فيديو انقر للتشغيل. في هذه الحالة، تحتاج إلى إمكانية طلب إعلان عادي لملء الخانة الإعلانية قبل طلب الإعلان المصاحب. لدعم حالة الاستخدام هذه، يمكنك عرض إعلانات الويب العادية في الخانة المصاحبة. تأكَّد من استهداف إعلانات الويب للخانات المصاحبة. يمكنك استهداف الخانات المصاحبة بالطريقة نفسها التي تستهدف بها خانات إعلانات الويب العادية.
في ما يلي مثال على عملية التنفيذ التي تم وصفها للتو:
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
للتجربة:
يمكنك الاطّلاع على نموذج التعليمات البرمجية التالي لمعرفة عملية التنفيذ:
استخدام الإعلانات المصاحبة مع Ad API
يوضّح هذا القسم كيفية عرض الإعلانات المصاحبة باستخدام Ad API.
عرض الإعلانات المصاحبة
لعرض الإعلانات المصاحبة، عليك أولاً الحصول على مرجع لكائن Ad من خلال أي
من أحداث AdEvent التي يتم إرسالها من AdsManager. ننصحك باستخدام الحدث AdEvent.STARTED، لأنّ عرض الإعلانات المصاحبة يجب أن يتزامن مع عرض الإعلان الرئيسي.
بعد ذلك، استخدِم كائن Ad هذا لاستدعاء getCompanionAds() للحصول على مصفوفة من
CompanionAd الكائنات. هنا لديك خيار تحديد CompanionAdSelectionSettings، ما يتيح لك ضبط الفلاتر على الإعلانات المصاحبة حسب نوع التصميم ونسبة التطابق التقريبي ونوع المَورد ومعايير الحجم.
لمزيد من المعلومات حول هذه الإعدادات، يمكنك الاطّلاع على مستندات
IMA CompanionAdSelectionSettings API.
يمكنك الآن استخدام الكائنات CompanionAd التي يعرضها getCompanionAds لعرض الإعلانات المصاحبة على الصفحة باستخدام هذه الإرشادات:
- أنشئ خانة إعلان مصاحب
<div>بالحجم المطلوب على الصفحة. - في معالج الأحداث للحدث
STARTED، استرجِع كائنAdمن خلال استدعاءgetAd(). - استخدِم
getCompanionAds()للحصول على قائمة بالإعلانات المصاحبة التي تتطابق مع حجم خانة الإعلان المصاحب وCompanionAdSelectionSettingsولها رقم التسلسل نفسه الذي يحمله التصميم الرئيسي. تُعامَل التصاميم التي لا تتضمّن سمة التسلسل على أنّها تحمل رقم التسلسل 0. - احصل على المحتوى من مثيل
CompanionAdواضبطه على أنّه HTML الداخلي لـ<div>الخاص بالخانة الإعلانية.
نموذج الرموز البرمجية
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
عرض الإعلانات المصاحبة المرنة
تتيح حزمة تطوير البرامج للإعلانات التفاعلية الآن عرض الإعلانات المصاحبة المرنة. يمكن تغيير حجم هذه الإعلانات المصاحبة ليطابق حجم الخانة الإعلانية. تملأ هذه الإعلانات عرض الحاوية الرئيسية بنسبة% 100، ثم يتم تغيير ارتفاعها ليناسب محتوى الإعلان المصاحب. يتم ضبطها باستخدام حجم الإعلان المصاحب Fluid في "مدير إعلانات Google". يمكنك الاطّلاع على الصورة التالية لمعرفة مكان ضبط هذه القيمة.
الإعلانات المصاحبة المرنة التي تستخدم علامة "ناشر Google"
عند استخدام الإعلانات المصاحبة التي تستخدم علامة "ناشر Google"، يمكنك الإعلان عن خانة إعلان مصاحب مرنة من خلال تعديل المعلمة الثانية لطريقة defineSlot().
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
الإعلانات المصاحبة المرنة التي تستخدم Ad API
عند استخدام Ad API للإعلانات المصاحبة، يمكنك الإعلان عن خانة إعلان مصاحب مرنة
من خلال تعديل
google.ima.CompanionAdSelectionSettings.SizeCriteria
إلى القيمة SELECT_FLUID.
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>