آموزش ایجاد Header Bidding
مقالات تخصصی IT و هاستینگ

Header Bidding چیست و چگونه می توان آن را پیاده سازی کرد؟

فناوری Header Bidding در سال 2015 شروع به توسعه کرد و از آن زمان به ناشران بسیاری کمک نمود تا درآمد خود را تا 40٪ (و حتی در برخی موارد تا 100٪ یا بیشتر) افزایش دهند. با استفاده از Header Bidding، نویسندگان می‌توانند قیمت بالاتری برای تخصص خود تعیین کنند و بازده مقالات خود را بالاتر ببرند. 

Header Bidding چیست؟

Header Bidding به ناشران امکان می‌دهد تا تبلیغات خود را به بنگاه های تبلیغاتی یا همان Supply-Side Platforms (به اختصار SSP) مختلف، پیشنهاد دهند. این پیشنهاد به طور همزمان و حتی قبل از برقراری ارتباط با سرورهای تبلیغاتی انجام می شود. یک ناشر برای افزایش قدرت کسب درآمد خود از طریق این فناوری، باید مراحل زیر را طی کند:

  • به سرویس دهنده SSP درخواست دهد و تاییدیه دریافت نماید.
  • Prebid.JS را در وب سایت پیاده سازی کند.
  • پیکربندی سرور تبلیغات را انجام دهد.
  • یک سامانه مدیریت رضایت (consent management system) انتخاب کند.
  • تست و رفع اشکال نماید.

ارسال درخواست به سرویس دهنده SSP

تصویر(1)

صدها سرویس دهنده SSP وجود دارند که در ادامه لیستی از محبوب ترین آنها آورده شده اند:

  • TripleLift
  • Index Exchange
  • Amazon UAM/TAM
  • Xandr (همان AppNexus)
  • Teads
  • Pubmatic
  • Sovrn
  • Verizon
  • Magnite (همان Rubicon)
  • OpenX
  • Sonobi
  • GumGum
  • Sharethrough
  • Unurly

فرد باید فرم درخواست آنلاین خود را یافته و از فرآیند اعتبارسنجی شرکت عبور نماید. به عنوان مثال، در Xandr، صفحه تماس به این شکل می باشد:

ثبت نام در SSP جهت Header Bidding

تصویر(2)

در Xandr، حداقل میزان ad impressions (نمایش تبلیغ) معادل 50 میلیون بار در ماه است. برای ورود به برخی از شبکه های تبلیغاتی، شما نیاز به یک وب سایت کاملا چشمگیر دارید. 

با این حال، همه SSP ها چنین آستانه بالایی برای کاربرد ندارند. به عنوان مثال، Sharethrough تنها به 20 میلیون نمایش تبلیغات نیاز دارد. علاوه بر این، آنها عواملی مانند کیفیت مخاطب، موقعیت جغرافیایی ترافیک، مدت زمانی که کاربران در وب سایت صرف می کنند را نیز در نظر می گیرند. معمولاً چند هفته طول می کشد تا درخواست شما تایید گردد و بتوانید با آنها همراه شوید. بنابراین می تواند یک فرآیند نسبتاً زمان بر باشد که حتی ممکن است ماه ها طول بکشد.

Prebid.js چگونه کار می کند؟

هنگامی که کاربر یک صفحه وب را باز می کند، یک درخواست تبلیغ برای همه پیشنهاد دهندگان SSP ارسال می شود. پیشنهاد دهندگان نیز با Cost-per-thousand impressions یا به اختصار CPM خود پاسخ می دهند. برای نمونه 1 دلار و 1.50 دلار پیشنهاد می شود و Prebid.js با بالاترین هدف CPM، درخواستی را به سرور تبلیغات ارائه می دهد (در این مثال،1.50 دلار خواهد بود)

در سرور تبلیغات Google Ad Manager، درخواستی دریافت می‌شود که نشان می‌دهد شخصی 1.50 دلار CPM برای یک تبلیغ پرداخت می‌کند. این عمل منجر به اجرای حراج دیگری با Google Adsense یا AdX می شود. اگر گوگل CPM بالاتری ارائه دهد، تبلیغاتش برنده حراج می‌شوند. در غیر این صورت، تبلیغ شما با CPM 1.50 دلار برنده شده و توسط سرویس دهنده SSP، ارائه می گردد.

استفاده از Prebid.js در Header Bidding

تصویر(3)

ترفند اصلی در Header Bidding این است که حراج ها در زمان واقعی (real time) اتفاق می‌افتند در این صورت باعث می‌شود Google AdX بالاترین CPM ممکن را پیشنهاد دهد. اگر Google AdX رقیبی نداشته باشد، کمترین CPM ممکن را پیشنهاد خواهد داد تا بتواند فرصت تبلیغ را با قیمت ارزان‌تری خریداری کند. Header Bidding به پیشنهاد دهندگان این امکان را می‌دهد که رقابت کنند و CPM ها (و در نتیجه درآمد) را افزایش دهند. دو روش برای پیاده سازی Header Bidding وجود دارد:

  1. سمت مشتری: زمانی که حراج از طریق جاوا اسکریپت در مرورگر اجرا می شود.
  2. سمت سرور: زمانی که مزایده روی سرور اجرا می گردد.

نحوه اجرای Header Bidding سمت مشتری

برای تنظیم Header Bidding، باید Prebid.js را در وب سایت خود پیاده سازی کنید و Google Ad Manager (یا سرور آگهی) خود را پیکربندی نمایید.

Prebid.js را در وب سایت خود پیاده سازی کنید

Prebid.js یک پلتفرم Header Bidding می باشد که بیش از 200 منبع درخواست را یکپارچه کرده است. باید از صفحه Customize با آدرس docs.prebid.org/download.html برای انتخاب سرویس دهندگان SSP و دانلود نسخه کتابخانه موردنظر جهت پیکربندی خاص خود، استفاده کنید. حتما ماژول های Consent Management را جهت مطابقت با استانداردهای حریم خصوصی GDPR و Global Private Partners انتخاب نمایید. در زیر نمونه کد برگرفته از اسناد رسمی Prebid.js قرار داده شده است.

<html>
    <head>        
        <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
        <script async src="//your-customized-prebid.js"></script>
        <script>
            var div_1_sizes = [
                [300, 250],
                [300, 600]
            ];
            var div_2_sizes = [
                [728, 90],
                [970, 250]
            ];
            var PREBID_TIMEOUT = 1000;
            var FAILSAFE_TIMEOUT = 3000;
            var adUnits = [
                {
                    code: '/19968336/header-bid-tag-0',
                    mediaTypes: {
                        banner: {
                            sizes: div_1_sizes
                        }
                    },
                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370

                        }

                    },

                     { 

                      bidder: "conversant",
                       params: {site_id:"122869",secure:1}
                     }

                   ]

                },

                {
                    code: '/19968336/header-bid-tag-1',
                    mediaTypes: {
                        banner: {
                            sizes: div_2_sizes
                        }
                    },

                    bids: [{
                        bidder: 'appnexus',
                        params: {
                            placementId: 13144370
                        }
                    },

                    { 
                     bidder: "conversant",
                     params: {site_id:"122869",secure:1}
                    }

                     ]
                }

            ];
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            googletag.cmd.push(function() {
                googletag.pubads().disableInitialLoad();
            });
            var pbjs = pbjs || {};
            pbjs.que = pbjs.que || [];
            pbjs.que.push(function() {
                pbjs.addAdUnits(adUnits);
                pbjs.requestBids({
                    bidsBackHandler: initAdserver,
                    timeout: PREBID_TIMEOUT
                });
            });
            function initAdserver() {
                if (pbjs.initAdserverSet) return;
                pbjs.initAdserverSet = true;
                googletag.cmd.push(function() {
                    pbjs.que.push(function() {
                        pbjs.setTargetingForGPTAsync();
                        googletag.pubads().refresh();
                    });
                });
            }
            // in case PBJS doesn't load
            setTimeout(function() {

                initAdserver();

            }, FAILSAFE_TIMEOUT);

            googletag.cmd.push(function() {

                googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());

                googletag.pubads().enableSingleRequest();

                googletag.enableServices();
            });

            googletag.cmd.push(function() {

                googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());

                googletag.pubads().enableSingleRequest();

                googletag.enableServices();
            });

        </script>

    </head>

    <body>

        <h2>Basic Prebid.js Example</h2>

        <h5>Div-1</h5>

        <div id='div-1'>

            <script type='text/javascript'>

                googletag.cmd.push(function() {

                    googletag.display('div-1');

                });

            </script>

        </div>

        <br>

        <h5>Div-2</h5>

        <div id='div-2'>

            <script type='text/javascript'>

                googletag.cmd.push(function() {

                    googletag.display('div-2');

                });

            </script>

        </div>

    </body>

</html>

تجزیه کد بالا به شرح زیر می باشد:

  • خطوط اول همه فایل های JS مورد نیاز و فایل سفارشی Prebid.JS را لود می کنند.
  • اسلات های تبلیغاتی (Ad slots) در متغیر آرایه adUnits تعریف می شود.
  • در تعاریف adslot، می‌توان نام سرویس دهندگان SSP و شناسه‌هایی که هنگام ورود به آنها در اختیار شما قرار گرفته اند را مشاهده نمایید.
  • ;()googletag.pubads().disableInitialLoad جهت غیرفعال کردن درخواست آگهی برای ارسال به Google Ad Manager تا زمانی که Prebid.js حراج را تمام کند، فراخوانی می شود.
  • تابع pbjs.requestBids، سرویس دهندگان SSP را فراخوانی می کند و برنده را تعیین می نماید.
  • تابع ()initAdserver فراخوانی می شود تا با کلید hb_pb یک درخواست تبلیغ به Google Ad Manager ارسال کند که حاوی مقدار CPM برنده است، به عنوان مثالhb_pb=”1.5″. (این مرحله با راه اندازی Google Ad Manager در مرحله بعد مرتبط می باشد.)
  • وقتی Google Ad Manager درخواست را با پیشنهاد برنده دریافت می کند، حراج خود را در Google AdX اجرا کرده، سپس تبلیغ AdX را با CPM بالاتر یا آگهی SSP برنده، بر می‌گرداند.

برای مورد خاص دیگر، ممکن است نیاز به کد متفاوت یا تغییر تنظیمات داشته باشید اما پایه و اساس آن یکسان باقی می‌ماند. 

نحوه پیاده سازی Lazy Loading

Google tag دارای یک چارچوب Lazy Loading است که در صورت پیشنهاد قیمت Header Bidding، عمل نخواهد کرد زیرا برای پیشنهاد قیمت Header Bidding، باید یک مزایده اجرا کنید و قبل از ارسال درخواست به سرور تبلیغات، مقادیر کلیدی را تعیین و تنظیم نمایید. به همین دلیل، توصیه می‌شود از Intersection Observer API برای تعیین زمان لود آگهی در تگ <div> هنگامی که در معرض دید قرار می گیرد، استفاده کنید.

options = {
root: null, // relative to document viewport
rootMargin: '1500px', // margin around root. Values are similar to css property. Unitless values not allowed
threshold: 0 // visible amount of item shown in relation to root
};
your_observer = new IntersectionObserver( observer_handler, options );
your_observer.observe( goog_adslots[i] );

در تابع بازخوانی observer_handler، می توانید حراج قبل از پیشنهاد را اجرا کرده و با سرور آگهی ارتباط برقرار نمایید.

function observer_handler( entries, observer ) {
dynamicAdUnit =[{
code: 'your_html_div_id',
mediaTypes: {
banner: {
sizes: [728,90]
}
},
bids: [{ bidder: 'appnexus', params: { placementId: 13144370 } }, { bidder: "conversant", params: {site_id:"122869",secure:1} } ]
}];
pbjs.addAdUnits(dynamicAdUnit);
slot = window.googletag.defineSlot('/1055389/header-bid-tag-0', [728,90], 'your_html_div_id' ).addService(googletag.pubads());
lazySlotPrebid(slot, 'your_html_div_id')
}
function lazySlotPrebid(slot, div_id) {
pbjs.que.push(function() {
pbjs.request bids({
timeout: PREBID_TIMEOUT,
adUnitCodes: [div_id],
bidsBackHandler: function() {
pbjs.setTargetingForGPTAsync([div_id]);
googletag.pubads().refresh(slot);
});
});
} 
}// endd of initDynamicSlotPrebid

نحوه تنظیم Google Ad Manager یا GAM برای Header Bidding

سرورهای تبلیغاتی باید ده ها خط در مورد اولویت قیمت با کلید hb_pb داشته باشند که تمام مقادیر CPM ممکن، مانند hb_pb=0.04، hb_pb=0.03 و غیره را هدف قرار می دهند.

تنظیم Google Ad Manager برای Header Bidding

تصویر(4)

این نکته کلیدی است که باعث می شود موتور Header Bidding کار کند.

  • هنگام لود صفحه، حراج در مرورگر اجرا می شود.
  • برنده SSP با یک مقدار کلیدی که hb_pb = 2.62 را هدف قرار می دهد به GAM ارسال می گردد.
  • از آنجایی که سفارش دارای ارزش CPM یکسانی است، GAM می‌داند که قیمت پیشنهادی 2.62 دلاری وجود دارد.
  • GAM حراجی AdX را اجرا می کند و برای برنده شدن در مناقصه و نمایش تبلیغات گوگل باید بیش از 2.62 دلار بپردازد.

همانطور که در بالا ذکر شد، شما باید آیتم های هر خط را در GAM با جزئیات دقیق بسازید. برای نمونه اگر جزئیات تا 0.01 در نظر گرفته شود، باید 2000 مورد خط را جهت محدوده CPM از 0 تا 20 دلار، ایجاد نمایید. انجام این کار به صورت دستی، بسیار دشوار است و باید از GAM API استفاده کنید. متاسفانه هیچ راه حل کاملی وجود ندارد که بتوان آن را به سادگی دانلود و با یک کلیک اجرا کرد.

این کار تقریبا پیچیده است اما به لطف مشارکت‌کنندگانی که ابزارهای API را ساخته‌اند (حتی اگر فعالانه از آنها پشتیبانی نمی‌کنند)، هنوز هم می‌توان آن را با کمی تغییر انجام داد. مراحل راه اندازی Google Ad Manager به شرح زیر می باشد:

  • ساختن GAM credentials 
  • نصب PHP (یا از XAMPP استفاده نمایید)
  • Composer
  • Prebid LineItems Setup Tool
  • Git 

مرحله 1: دسترسی API را فعال کنید

در Google Ad manager از منوی "Global settings" قسمت "General settings"، مطمئن شوید که دسترسی API فعال است. روی دکمه "Add a service account user" کلیک کرده و به عنوان نمونه، کاربری با نام "GAM API USER" و ایمیل "gam-api-user@example.com" با دسترسی های مدیریتی ایجاد نمایید.

فعالسازی دسترسی API در Google Ad Manager برای Header Bidding

تصویر(5)

مرحله 2: ایجاد یک پروژه جدید

به صفحه Google API Console Credentials مراجعه و از منوی کشویی پروژه، "Create a new project" را انتخاب کنید، نامی برای پروژه وارد کرده یا شناسه پروژه ارائه شده را ویرایش نمایید. روی "Create" کلیک نموده و از منوی "Credentials"، گزینه "CREATE CREDENTIALS" را برگزینید.

 ایجاد یک پروژه جدید در Google Ad Manager برای Header Bidding

تصویر(6)

سپس "Service account" را انتخاب کنید. 

ایجاد اکانت جدید در Google Ad Manager برای Header Bidding

تصویر(7)

پس از پایان کار، روی اکانتی که ایجاد کرده اید، کلیک نمایید.

ورود به مشخصات اکانت در Google Ad Manager برای Header Bidding

تصویر(8)

در صفحه جدید، گزینه "KEYS" و سپس "ADD KEY" را انتخاب نمایید و روی گزینه "Create new key" کلیک کنید.

دریافت KEY جدید برای Header Bidding

تصویر(9)

در نهایت گزینه مربوط به خروجی را از نوع "JSON" انتخاب نمایید. برای دانلود فایل حاوی کلید خصوصی روی "Create" کلیک کنید.

دریافت KEY با فرمت JSON برای Header Bidding

تصویر(10)

مرحله 3: دانلود پروژه

فایل zip پروژه را دانلود کرده و آن را از حالت فشرده خارج نمایید. برای ساخت پروژه، composer را در سیستم عامل خود نصب کنید.

مرحله 4: PHP.INI را تغییر دهید

در فایل php.ini (واقع در /xampp/php/php.ini) می توانید "extension=soap" را با حذف ";" از مقابل آن، فعال نمایید. سپس مقدار "soap.wsdl_cache_ttl=0" را تنظیم نموده و نهایتا Apache را (از کنترل پنل XAMPP) مجددا راه اندازی کنید. 

مرحله 5: پوشه های فرعی ایجاد نموده و پروژه را بسازید

هنگامی که همه چیز را تنظیم و از حالت فشرده خارج کردید، فایل composer.json را باز نموده و «googleads/googleads-php-lib» : «^44.0.0» را تغییر دهید و به جای آن آخرین نسخه موجود را فعال نمایید.

در پوشه /app/ جستجو نموده و نام پروژه را از "v201911" به "v202202" تغییر دهید( آن پروژه git از سال 2019 بروز نشده است) تا از آخرین نسخه کتابخانه ها استفاده کنید. پس از باز نمودن command line در سیستم، وارد دایرکتوری پروژه شوید و بروز رسانی composer را در ترمینال اجرا نمایید. 

مرحله 6: مشخصات Google Ad Manager خود را تنظیم کنید

فایل JSON دانلود شده "gam-api-52545-0c04qd8dfgfghfcb.json" را به پوشه اصلی پروژه ای که ساخته اید منتقل کنید. در مرحله بعد، فایل adsapi_php.ini را دانلود کرده و مشخصات  Google Ad Manager خود را در آن تنظیم نمایید.

networkCode = "899899"
applicationName = "My GAM APP"
jsonKeyFilePath = "D:\xampp\htdocs\dfp-prebid-lineitems\gam-api-54545-0c04qd8fcb.json"
scopes = "https://www.googleapis.com/auth/dfp"
impersonatedEmail = "gam-api-user@example.com"

jsonKeyFilePath همان مسیر دایرکتوری متعلق به فایل کلید JSON در پوشه اصلی است.

مرحله 7: محتوای فایل را تنظیم نمایید

در نهایت به فایل /script/tests/ConnexionTest.php مراجعه نموده و محتوای فایل را مانند کد زیر تنظیم کنید:

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';
$traffickerId = (new \App\AdManager\UserManager())->getUserId();
if (is_numeric($traffickerId)) {
echo "\n====Connexion OK====\n\n";
} else {
echo "\n===Connexion KO====\n\n";
}

در ترمینال سیستم خود (یا کنسول git bash) اگر در پوشه /script/tests/ هستید، با اجرای دستور زیر اتصال را آزمایش نمایید.

php ConnexionTest.php

در نهایت باید پیام "====Connection OK====" را مشاهده کنید.

مرحله 8: پارامترها را پیکربندی نمایید

به فایل script/tests/ConnexionTest.php/ در پروژه خود وارد شوید. کد زیر را در آن فایل کپی کنید و پارامترهای موجود در آرایه‌های entry$ و buckets$ را بر اساس نیاز خود پیکربندی نمایید.

putenv('HOME='.dirname(__DIR__)."/../");
require __DIR__.'/../../vendor/autoload.php';
use App\Scripts\HeaderBiddingScript;
$bucket_range = array();
$Your_Advertiser_Name = 'Sample_Advertiser';
$buckets =
["buckets" =>[
['precision' => 2, 'min' => 0, 'max' => 4.00, 'increment' => 0.01],
['precision' => 2, 'min' => 4.01, 'max' => 8.00, 'increment' => 0.05],
]
];
foreach ( $buckets["buckets"] as $k => $bucket ){
$request_bucket = array( 'buckets' => array( $bucket ) );
$order_name = 'Your_Order_name '.$bucket['min'].'-'.$bucket['max'];
// echo $order_name.'<br/><br/>';
$entry = [
'priceGranularity' => $request_bucket, // can be 'low', 'med', 'high', 'auto','dense', 'test'
'currency' => 'USD',
//'sizes' => [ [1,1] ,[160, 600], [250, 250], [300, 250], [300, 600], [320, 50], [320, 100], [300, 100], [336, 280], [728, 90], [970, 90], [970, 250]],
'sizes' => [ [250, 250] ],
'orderPrefix' => $Your_Advertiser_Name, //prebid advertiserName
'orderName' => $order_name
];
$script = new HeaderBiddingScript();
$script->createGlobalAdUnits($entry);
}

 

در صورت تمایل می‌توانید «geoTargetingList» => «dz, pk, ke, pt» یا مقدار کلید سفارشی را با هدف قرار دادن customTargeting مشخص کنید. دستور زیر، آیتم های خطی در تنظیمات bucket که پیشتر مشخص کرده اید را ایجاد می نماید.

php ConnexionTest.php

اشکال زدایی

برای اشکال زدایی، چند افزونه مرورگر وجود دارد که می توانید توسط آنها بررسی نمایید که آیا حراج بدون مشکل اجرا می شود یا خطایی در آن رخ می دهد:

  • BidFilter Header Bidding Analysis.
  • Headerbid Expert.
  • Professor Prebid.

علاوه بر این، در صورت باز کردن URL صفحه وب با استفاده از پارامتر "pbjs_debug=true?/" در انتهای آن، می توان گزارش‌های کنسول را مشاهده نمود. باید مطمئن شوید که مقادیر کلید hb_pb به Google Ad Manager منتقل می‌شوند. برای باز کردن کنسول GAM از «google_console=1?/» در انتهای URL استفاده نمایید و روی «Delivery Diagnostics» هر واحد تبلیغاتی کلیک کنید. باید مطمئن شوید که مقادیر hb_pb تنظیم شده و تبلیغات به سرور ارسال می شوند.

اشکال زدایی Header Bidding

تصویر(11)

یک سیستم مدیریت رضایت یا Consent Management System را انتخاب کنید

حریم خصوصی کاربران یکی از مهم ترین عوامل است و باید اطمینان حاصل نمایید که از الزامات GDPR و Global Private Partners پیروی می شود. ارائه دهندگان بسیاری هستند که با آخرین استانداردهای Interactive Advertising Bureau یا به اختصار IAB مطابقت دارند. چند مورد از محبوب ترین آنها عبارتند از:

  • Quantcast Choice
  • uniConsent
  • Cookiebot

جمع بندی

Header Bidding یک روش جدید برای فروش فضای تبلیغاتی است که به ناشران محتوا امکان می‌دهد قیمت‌های بالاتری را برای فضای تبلیغاتی خود دریافت کنند و کنترل بیشتری بر نحوه نمایش تبلیغات روی وب‌سایت خود داشته باشند. در روش سنتی فروش فضای تبلیغاتی، ناشران تنها به یک آژانس تبلیغاتی دسترسی داشتند. این امر باعث می‌شد که ناشران نتوانند از رقابت بین چندین آژانس تبلیغاتی برای افزایش قیمت‌ها استفاده کنند.

Header Bidding این مشکل را با اجازه دادن به ناشران برای فروش فضای تبلیغاتی خود به چندین آژانس تبلیغاتی به صورت همزمان، برطرف می‌کند. این امر باعث ایجاد رقابت بین آژانس‌های تبلیغاتی و افزایش قیمت‌ها برای ناشران می‌شود. علاوه بر افزایش درآمد تبلیغاتی، Header Bidding به ناشران امکان می‌دهد تا کنترل بیشتری بر نحوه نمایش تبلیغات روی وب‌سایت خود داشته باشند زیرا ناشران می‌توانند انتخاب کنند که تبلیغات کدام آژانس تبلیغاتی را نمایش دهند.

شاید مراحل زیاد جهت تنظیم و راه اندازی Header Bidding، کمی تعجب بر انگیز و دور از انتظار باشد اما ارزش اجرای آنها را دارد و با ایجاد فشار فروش روی تبلیغات گوگل، به راحتی می تواند درآمد شما را 30% یا بیشتر افزایش دهد.

اشتراک گذاری:

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *