search

elyface / elyface-SSR

A react and Nextjs based, search-indexed SSR boilerplate and starter kits for publishers and news websites integrated with Blupoint CMS.
Other
0 stars 1 forks source link

Google DFP - React Entegrasyonu #19

Closed oyilmaztekin closed 5 years ago

oyilmaztekin commented 5 years ago

Bu konu biraz çetrefilli. Bunu buradan tartışmak, bağlantıları paylaşmak daha uygun olacak.

80

zekpehlivan commented 5 years ago

Burada example var; https://www.npmjs.com/package/react-dfp

Google DFP id; 61966246

zekpehlivan commented 5 years ago

screen shot 2019-02-13 at 14 39 42 Şu an sayfadaki kullanım şekli.

zekpehlivan commented 5 years ago

screen shot 2019-02-13 at 14 40 56 Burada da yayınlama şekli.

zekpehlivan commented 5 years ago

google.com/dfp

adresinden giriş yapabilirsin.

ozer.yilmaztekin@elluga.com mailini yönetici olarak tanımladım.

Mantığı şöyle;

1 - Envanter tanımlıyorsun. ( Bunu biz yapıyoruz ) Boyutu şekli şemali tanımlanıyor.

2 - Bu reklam birimi için daha sonra etiket tanımlanıyor.

Bu etikette sayfaya ekleniyor.

Mantığı bu şekilde.

etiket1 etiket2 reklambirimi yenireklambirim

oyilmaztekin commented 5 years ago

Abi ellerine sağlık gayet güzel anlatmışsın. Ben bununla alakalı olarak bi araştırma yapayım detaylı başlamadan önce.

oyilmaztekin commented 5 years ago 
 <DFPSlotsProvider dfpNetworkId={'9999'} adUnit={"foo/bar/baz"} ... >
         ...
         <AdSlot adUnit={"home/leaderboard"} sizes={[ [900, 90], [728, 90]]} />
         ...
         /* you can override the props */
         <AdSlot adUnit={"home/mobile"} sizes={[ [300, 250], [300, 600]]} />
         ...
         <div>
           ...
           <AdSlot adUnit={"home/footer"} sizes={[ [300, 250], [300, 600]]} />
           ...
         </div>
         ...
       </DFPSlotsProvider>

DFPSlotsProvider: this component is only meant to configure global options, it follows the context provider pattern ( see this link for details ), you should only declare and mount one instance of this component per page (tipically as higher as possible on the tree so all the nodes can access the context variables.)

Detaylı dökümantasyon - http://react-dfp.tk/examples/basic/

oyilmaztekin commented 5 years ago
örnek dataset

Blupoint reklam analizi - response

Belge başlığı - <head> kodları

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/61966246/AnasayfaMastHead', [970, 250], 'div-gpt-ad-1553767868243-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>

gövde - div alan kodu

<!-- /61966246/AnasayfaMastHead -->
<div id='div-gpt-ad-1553767868243-0' style='height:250px; width:970px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1553767868243-0'); });
</script>
</div>
oyilmaztekin commented 5 years ago

@zekpehlivan

DFP structure

oyilmaztekin commented 5 years ago

@zekpehlivan anasayfa_sol1 için iki tane genişlik ve yükseklik parametresi geliyor bana. Bunlar nasıl çalışıyor tam olarak? Aşağıdaki örneği baz alırsak mesela160x600, 120x800şeklinde mi? 

{
"boyut_genislik": "160,120", 
"boyut_yukseklik": "600,800"
}
zekpehlivan commented 5 years ago

Aynen dediğin gibi, 160x600, 600x800 olarak çalışıyor.

zekpehlivan commented 5 years ago

@oyilmaztekin Bu ikili sistem oluyor değil mi?

oyilmaztekin commented 5 years ago

@zekpehlivan ayarlarız bir şekilde doğrusu buysa. react-dfpde buna uygun bir kullanım var. sizes olarak geçiyor. Daha ileri seviye kullanımlar için de sizeMappping var. Mesela tarayıcı boyutuna göre kullanımlar için sizeMapping yapıyoruz.

zekpehlivan commented 5 years ago

Okdir. Kategori bazında da ekleme yaptım...

Bir inceleyebilirsin...

Gündem masthead ve sag alan 300x250 olarak yaptım...

oyilmaztekin commented 5 years ago

AdSlot componenti sadece DFPProvider context wrapper ı ile aynı seviyede çalışıyor. Child componentlerde AdSlot çalışmıyor.