"Vendre un garage": façade et publicité dans hh.ru

Si votre projet public bénéficie d'une audience impressionnante, vos utilisateurs seront certainement intéressés par les systèmes publicitaires. Les entreprises le remarquent tôt ou tard et essaient naturellement d'en tirer des bénéfices.

Par coïncidence, la plupart du temps, j'étais engagé dans le développement d'interfaces pour les services publicitaires chez hh.ru. Dans cet article, vous ne trouverez pas de description des technologies de rupture, ce matériel est plus sur la façon de créer une interaction avec des entrepreneurs (dans le contexte d'un système de publicité interne) et de ne pas tomber sur un coucou.

Comment ça fonctionne

Ainsi, le client vient à l'équipe et dit le mot convoité «bannières». Le chef d'équipe cherche du temps dans son calendrier pour la prochaine réunion, et les exigences commencent à se former.

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