"Selling a garage": front and advertising in hh.ru

If your public project boasts an impressive audience, your users will definitely be interested in advertising systems. Business sooner or later notices this and naturally tries to extract some profits.

By coincidence, most of the time I was engaged in the development of interfaces for advertising services at hh.ru. In this article, you will not find a description of any breakthrough technologies, this material is more about how to build interaction with contractors (in the context of an internal advertising system) and not fall on a cuckoo.

How it works

So, the customer comes to the team and says the coveted word "banners". The team leader looks for time in his calendar for the next meeting, and requirements begin to form.

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 . , .