"Menjual garasi": depan dan beriklan di hh.ru

Jika proyek publik Anda menawarkan audiens yang mengesankan, pengguna Anda pasti akan tertarik dengan sistem periklanan. Bisnis cepat atau lambat menyadari hal ini dan secara alami mencoba untuk mendapatkan keuntungan.

Secara kebetulan, sebagian besar waktu saya terlibat dalam pengembangan antarmuka untuk layanan periklanan di hh.ru. Pada artikel ini, Anda tidak akan menemukan deskripsi teknologi terobosan apa pun, materi ini lebih banyak tentang bagaimana membangun interaksi dengan kontraktor (dalam konteks sistem periklanan internal) dan tidak jatuh pada cuckoo.

Bagaimana itu bekerja

Jadi, pelanggan datang ke tim dan mengucapkan kata "spanduk" yang didambakan. Pemimpin tim mencari waktu di kalendernya untuk pertemuan berikutnya, dan persyaratan mulai terbentuk.

web " ", . , "" , . , url/image/description. , , , iframe.

backend- RPS, frontend web-. , WoW , . :

. hh 4- ( xs/s/m/l). , CSS.

, ( ) , . ( ).

, , . . , . , serp_first_l L (serp - search engine result page).

, . .

banners.add(
    pages=['vacancy_search_result'],
    banner_ids={
        BannerPlaces.SERP_FIRST_L: [1],
        BannerPlaces.SERP_FIRST_M: [2],
        BannerPlaces.SERP_FIRST_S: [3],
        BannerPlaces.SERP_FIRST_XS: [4],
        BannerPlaces.SERP_SECOND_L: [5],
        BannerPlaces.SERP_SECOND_M: [6],
        BannerPlaces.SERP_SECOND_S: [7],
        BannerPlaces.SERP_SECOND_XS: [8],
    },
)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, — , id , ( , serp_first_l). , id , .

: , global store setup, setup- .

, CSS. dom , . . , .

: ( , callback , ). , callback, AJAX- .

const visibilityWatcher = ({ element, onVisible }) => {
    let visible = false;
    const checkVisible = () => {
        if (visible) {
            return;
        }
        visible = 
            element.offsetWidth || 
            element.offsetHeight || 
            element.getClientRects().length;
        if (visible) {
            onVisible();
            window.removeEventListener('resize', checkVisible);
            element.dataset.listenersSetted = 'false';
        }
    };
    if (element.dataset.listenersSetted !== 'true') {
        window.addEventListener('resize', checkVisible);
        element.dataset.listenersSetted = 'true';
    }
    checkVisible();
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( javascript ). , : , .

, , . hh.ru iframe .

. .

Google Ad Manager

, Ad Manager — . Google , , ( , ..).  DFP ( Ad Manager) , .

GPT (GPT Google Publisher Tags —  javascript Ad Manager). , ad unit ( ).

, DFP , . , GPT , . , "".

Ad Manager : - 20%. DFP view hh.ru . .

CPU, Chrome?!

. , . , , . har …

, — . . Javascript CPU . , .

, observer. , . okmeter alerts, , .

, , ,

, :  . . har. ( ) pop-up , .

, ( ), , adblock . , pop-up. - — , .

?

( ). . , , .

GAM (Google Ad Manager), , . , 300 . , .