"Garage verkaufen": Front und Werbung in hh.ru.

Wenn Ihr öffentliches Projekt ein beeindruckendes Publikum hat, werden Ihre Benutzer definitiv an Werbesystemen interessiert sein. Das Geschäft bemerkt dies früher oder später und versucht natürlich, einige Gewinne zu erzielen.

Zufällig war ich die meiste Zeit mit der Entwicklung von Schnittstellen für Werbedienstleistungen bei hh.ru beschäftigt. In diesem Artikel finden Sie keine Beschreibung bahnbrechender Technologien. In diesem Material geht es eher darum, wie Sie die Interaktion mit Auftragnehmern (im Kontext eines internen Werbesystems) aufbauen und nicht auf einen Kuckuck fallen.

Wie es funktioniert

Also kommt der Kunde ins Team und sagt das begehrte Wort "Banner". Der Teamleiter sucht in seinem Kalender nach Zeit für das nächste Meeting, und die Anforderungen beginnen sich zu bilden.

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