قد ترغب في ربط خانات إعلانات HTML في الصفحة بالفيديو أو الشرائح الإعلانية التي تظهر على سطح الفيديو. تتم الإشارة إلى هذه العلاقة بين الشرائح الإعلانية المرتبطة كعلاقة رئيسية ورفيقة.
بالإضافة إلى طلب إعلانات الفيديو والإعلانات الرئيسية التي تظهر على سطح الفيديو، يمكنك استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية لعرض إعلانات HTML المصاحبة. تظهر هذه الإعلانات ضمن ملف HTML محددة.
استخدام الإعلانات المصاحبة
لاستخدام الإعلانات المصاحبة، نفِّذ الخطوات التالية:
1. حجز الإعلانات المصاحبة
يجب أولاً حجز الإعلانات المصاحبة التي تريد عرضها مع الإعلانات الرئيسية. يمكن أن تكون الإعلانات المصاحبة الواردة في "مدير إعلانات Google" يمكنك عرض ما يصل إلى ستة إعلانات مصاحبة لكل إعلان رئيسي. وهذه التقنية، عندما يتحكم مشترٍ واحد في جميع الإعلانات على الصفحة، هي أيضًا يُعرف باسم الإعلان.
2. طلب الإعلانات المصاحبة
يتم تفعيل الإعلانات المصاحبة تلقائيًا لكل طلب إعلان.
3- الإعلانات المصاحبة على الشبكة الإعلانية
هناك طريقتان لعرض الإعلانات المصاحبة:
- باستخدام علامة "ناشر Google" (GPT) تلقائيًا
إذا كنت تستخدم علامة GPT لتنفيذ إعلاناتك المصاحبة، يتم عرضه تلقائيًا طالما تم الإعلان عن شرائح إعلانية مصاحبة في صفحة HTML ويتم تسجيل هذه الإعلانات في واجهة برمجة التطبيقات (أي يجب أن يتطابق رقم التعريف في JavaScript مع HTML). بعض مزايا استخدام GPT هي:- الوعي بخانة الإعلانات المصاحبة
- الإعلانات المصاحبة لملء البيانات من شبكة الناشر، إذا كانت آلية عرض إعلانات الفيديو (VAST) تحتوي الاستجابة على عدد أقل من الإعلانات المصاحبة مقارنةً بالخانات المحددة في صفحة HTML
- ملء تلقائي مصاحب في حال عدم توفّر إعلان فيديو
- خانات الإعلانات المصاحبة المُحمَّلة مسبقًا لمشغّلات الفيديو انقر للتشغيل
- عرض الإعلانات المصاحبة المُبرمَج، بما في ذلك
HTMLResourceوiFrameResource
- يدويًا باستخدام واجهة برمجة تطبيقات الإعلان:
استخدام الإعلانات المصاحبة مع علامة "ناشر Google"
تعمل علامة "ناشر Google" (GPT) على عرض ترميز HTML تلقائيًا. الإعلانات المصاحبة على موقعك. ننصح معظم الناشرين باستخدام GPT. تشير رسالة الأشكال البيانية تتعرّف حزمة HTML5 SDK على خانات GPT إذا تم تحميل GPT على صفحة الويب الرئيسية. (وليس في IFrame). يمكنك العثور على معلومات أكثر تفصيلاً حول استخدام GPT مع حزمة تطوير البرامج لإعلانات الوسائط التفاعلية في مستندات GPT.
في حال استضافة حزمة HTML5 SDK في إطار IFrame
إذا كنت تستوفي كلا المعيارين التاليَين، فأنت بحاجة إلى تضمين معرّف إضافي للنص البرمجي للخادم الوكيل كي يتم عرض إعلانات GPT المصاحبة بشكل صحيح:
- تحميل حزمة HTML5 SDK في IFrame.
- حمِّل علامة "علامة ناشر Google" على صفحة الويب الرئيسية (خارج إطار IFrame).
لعرض رفاقك في هذا السيناريو، يجب عليك تحميل النص البرمجي لخادم وكيل GPT قبل تحميل حزمة تطوير البرامج (SDK):
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
بعض النقاط المهمة الواجب مراعاتها:
- يجب ألا يتم تحميل أي علامة GPT داخل إطار IFrame الذي يُحمِّل حزمة تطوير البرامج (SDK).
- يجب تحميل علامة "GPT" في أعلى الصفحة، وليس في إطار IFrame آخر.
- يجب تحميل النص البرمجي للخادم الوكيل في الإطار نفسه مثل GPT (أي في الصفحة الرئيسية).
تعريف الخانات الإعلانية المصاحبة بتنسيق HTML
يوضح هذا القسم كيفية تعريف الإعلانات المصاحبة بتنسيق HTML باستخدام علامة GPT يوفر نموذج التعليمات البرمجية للسيناريوهات المختلفة. بالنسبة إلى HTML5 SDK، يمكنك بحاجة إلى إضافة بعض ملفات JavaScript إلى صفحة HTML وتعريف الإعلان المصاحب الخانات.
ملاحظة: في كل مثال من الأمثلة التالية، تأكّد من
توفير network وunit-path صالحَين في
استدعاء طريقة googletag.defineSlot (الموجود في <head> أو
<body> اعتمادًا على المثال الفعلي الذي تستخدمه).
- مثال 1: تنفيذ الشريحة الإعلانية الأساسية
- مثال 2: تنفيذ شريحة إعلانية ديناميكية
- مثال 3: الخانات الإعلانية المُحمَّلة مسبقًا
المثال 1: تنفيذ الشريحة الإعلانية الأساسية
يعرض الرمز النموذجي التالي كيفية تضمين ملف gpt.js في صفحة HTML وكذلك
الإعلان عن شريحة إعلانية. يبلغ حجم الشريحة الإعلانية المعلَن عنها 728×90 بكسل. يحاول جدول تقسيم المعرّف الفريد العمومي ملء الخانة
أي إعلانات مصاحبة يتم عرضها في استجابة 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: الشرائح الإعلانية المُحمَّلة مسبقًا
في بعض الحالات، قد تحتاج إلى عرض شيء ما في الشريحة الإعلانية قبل يتم طلب الإعلان المصاحب. عادةً ما يتم طلب الإعلانات المصاحبة مع من خلال إعلان فيديو. قد يحدث هذا الطلب بعد تحميل الصفحة التحميل. على سبيل المثال، لا يجوز تحميل الإعلان المصاحب إلا بعد أن يدخل المستخدم إلى الإعلان ينقر فوق فيديو يحث عليه النقر لتشغيله. في هذه الحالة، تحتاج إلى القدرة على طلب إعلان عادي لملء الشريحة الإعلانية قبل طلب الإعلان المصاحب. إلى في حالة الاستخدام هذه، يمكنك عرض إعلانات الويب القياسية في خانة مصاحبة. تأكّد من استهداف إعلانات الويب للخانات المصاحبة. يمكنك استهداف الخانات المصاحبة بنفس الطريقة التي تستهدفها الخانات الإعلانية العادية على الويب.
ملاحظة: نموذج الرمز التالي مماثل تمامًا. كما هو مذكور في المثال 1 باستثناء القسم المكتوب بخط غامق. في هذه الدورة، إذا كنت قد قدّمت شبكة الإعلانات ومسار الوحدة لإعلانك الذي يتضمّن عملية التحميل المسبق بدلاً من وحدة إعلانات الفيديو
في ما يلي مثال على عملية التنفيذ الموضّحة للتو:
<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.
الإعلانات المصاحبة على الشبكة الإعلانية
لعرض الإعلانات المصاحبة، عليك أولاً الإشارة إلى عنصر Ad
من خلال أي من أحداث AdEvent المرسلة من AdsManager.
نقترح استخدام حدث AdEvent.STARTED، لأنّه يعرض
يجب أن تتزامن الإعلانات المصاحبة مع عرض الإعلان الرئيسي.
بعد ذلك، استخدِم هذا الكائن Ad لطلب getCompanionAds()
الحصول على مصفوفة من CompanionAd كائن. هنا لديك خيار
لتحديد CompanionAdSelectionSettings، مما يتيح لك
ضبط فلاتر على الإعلانات المصاحبة لنوع تصميم الإعلان، والنسبة المئوية المناسبة تقريبًا،
ونوع المورد ومعايير الحجم. للحصول على مزيد من المعلومات حول هذه الإعدادات، يمكنك الاطلاع على
مستندات واجهة برمجة التطبيقات HTML5
العناصر 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% من عرض div الرئيسي، ثم تغير حجمها
الارتفاع لتناسب محتوى الصاحب. يتم ضبطها باستخدام الحجم المصاحب لـ Fluid.
في "مدير الإعلانات" اطّلِع على الصورة التالية لمعرفة مكان ضبط هذه القيمة.
إعلانات السوائل المصاحبة لعلامة GPT
عند استخدام إعلانات GPT المصاحبة، يمكنك الإعلان عن خانة مصاحبة مرنة من خلال تحديث
تمثّل هذه السمة المَعلمة الثانية لطريقة 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>