2012-09-11 4 views
8

現在、DFPでGoogleのサイト運営者タグを使用して、すぐに応答するサイトに広告を配信しています。潜在的に2つの潜在的な幅(728または960)を提供できる特定の広告スロットが1つあります。広告の幅を上げたり上げたりすることによって、広告をナビの上または下にレンダリングします。配信された広告のサイズを検出するには

これは明らかに最初の疑問ですが、これは遠隔地であっても、それは可能ですか?私はおそらく2つの異なる広告スロットを定義する必要があると思う。

おそらくもっと学問的なものですが、どのように配信された広告のディメンションを検出できますか?私は基本的にノードの挿入が検出されてからコンテナ要素の寸法を調べているので、これに対する解決策は広告プラットフォームには無関心であると思われます。

私はDOMNodeInserted javascriptイベントを試してきましたが、広告はすべて "BUT"されているようです。私はgptがこのイベントを引き起こさないような方法で広告を挿入しない限り、これで混乱します。

+0

大きな質問です! – jnthnclrk

答えて

5

私はこれまでにこうしたことをしています...そして、私が決めた方法は内部DFP関数(renderEnded)をオーバーライドして、画面上にレンダリングしたポイントの広告が見えるようにしました...

あなたは、次のような何かを行うことができ、広告の寸法を取得する例えば

(私はクロームでこれをテストしてみたが、それはあまりにも遠く、完全にクロスブラウザであることからすべきではない):

<html> 
<head> 
    <title>DFP test</title> 

    <script type='text/javascript'> 
     var googletag = googletag || {}; 
     googletag.cmd = googletag.cmd || []; 
     (function() { 
      var gads = document.createElement('script'); 
      gads.async = true; 
      gads.type = 'text/javascript'; 
      var useSSL = 'https:' == document.location.protocol; 
      gads.src = (useSSL ? 'https:' : 'http:') + 
      '//www.googletagservices.com/tag/js/gpt.js'; 
      var node = document.getElementsByTagName('script')[0]; 
      node.parentNode.insertBefore(gads, node); 
     })(); 
    </script> 


    <script type="text/javascript"> 
     googletag.cmd.push(function() { 
      var slot1 = googletag.defineSlot('/12345678/TEST', [266, 115], 'div-gpt-ad-1340819095858-0').addService(googletag.pubads()); 

      slot1.oldRenderEnded = slot1.renderEnded; 
      slot1.renderEnded = function(){ 
       window.console.log('width: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.width); 
       window.console.log('height: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.height); 
       slot1.oldRenderEnded(); 
      }; 

      googletag.pubads().enableSingleRequest(); 
      googletag.enableServices(); 
     }); 
    </script> 

</head> 
<body> 

    <div id='div-gpt-ad-1340819095858-0' style='width:266px; height:115px;'> 
     <script type='text/javascript'> 
      googletag.cmd.push(function() { 
       googletag.display('div-gpt-ad-1340819095858-0'); 
      }); 
     </script> 
    </div> 

</body> 
</html> 

それはあなたの後ろのものではないかもしれませんが、その機能をオーバーライドすることで、必要な場所にアクセスできるようにする必要があります。ご質問がある場合はお知らせください。

+0

これは実際に私が探しているものに最も近い解決策です。次のステップは、広告スロット内でレンダリングされるクリエイティブの意図された幅を常に検出することです。私たちにとって、クリエイティブはiframe、画像、およびフラッシュオブジェクトによって異なる場合があります。私は彼らがほとんど常に私が読むことができる幅のparamを持っていることがわかった。レンダリングされた幅を検出することは、コンテナdivが小さすぎてクリエイティブが水平方向に壊されてしまった場合に問題になります。 – sphoid

+0

@Matt Cooper - 内部DFP関数renderEndedはどこでどのように発見されましたか?他の機能があれば、それを上書きすることができます。 – dinie

+2

@umami私はそれを見つけただけで、クロムインスペクタでgoogletagの名前空間を調べました。インスペクタを起動してgoogletagをコンソールに入力すると、googletagオブジェクトが表示されます。そこにはいくつかの機能があり、slot_manager_instanceを調べて個別の広告ユニットをドリルダウンすると、他の関数... 私は後で発見した別のレポは、内部のdfpロガーをフックし、他のdfp関数にもフックすることができます、あなたは興味深いかもしれません:https://github.com/mcountis/ dfp-events –

0

Google AdSenseでWiiMusic.netと同様の問題が発生しました。私がやったことは、JavaScriptを含む広告を含むdivのサイズを検出してから広告を読み込むことでした。このような状況では、読み込まれたページの解像度やサイズを変更することはできませんでした。

あなたの状況では、あなたのページは確かにサイズを変えることができます。レスポンシブデザインに応じて異なる広告バージョンを表示するには、その時点で広告を再読み込みする必要があります。非同期広告コードを使用している場合は、これが可能である必要があります。

これを要約すると、これはJavaScriptでうまくいきます。とにかく広告にはJavaScriptが必要なので、あまり大きな障壁にならないようにしてください。

+0

私の状況では、実際にはその逆を行う必要があります。私は、配信された広告のサイズに応じて、他の方法ではなく、含まれるdivのサイズ/位置を調整します。そのためには、広告が挿入されたときのコールバックを定義する方法を見つける必要があります。私が述べたように、私はDOMNodeInsertedイベントを試しました。また、DOMSubtreeModifiedを試して、広告コンテンツが挿入されたときを検出しています。 – sphoid

+0

@sphoid、私の無知を許しますが、DFP広告スロットには1つのサイズしか含めることができませんでした。 DFPはどのサイズの広告を配信するかをどのように決定しますか?あなたは戻ってくるサイズの広告に応じてページのサイジングを変更していますか? DOMNodeInsertedの問題は、広告が配信されているiframeに起因すると考えられます。 – Brad

+0

googletag.defineslot()の1つのスロットに複数の広告サイズをカンマで区切って定義できます。私は主に、全ページ幅のバナーと狭い中央のバナーを配信できるリーダーボード広告スロットのためにこれを行います。広告の中にはiframeを挿入しないものもあれば、divを動的に生成し、クリエイティブがFlashベースの場合はスクリプトタグやオブジェクトタグを挿入するものもあります。私はそれらの要素が少なくともいつ挿入されるかを検出できるはずです。 – sphoid

0

いつものように私はこれを考えていた。私がDOMの変更を検出していなかったのは、イベントハンドラを割り当てていたときに広告が既に挿入されていたからです。広告を同期的に読み込むときは、すぐにコンテナdivのサイズを測定して広告のサイズを取得できます。非同期にロードするとき、元のhtmlを使用して保存し、変更をポーリングし、変更が発生したときにコンテナdivの測定を行うことで、内側のhtml変更をポーリングできます。あなたの時間のためにブラッドに感謝します。

+0

私はあまりにも早く話しました。このソリューションは、コンテナdivがクリエイティブがそれを保証するときにサイズを変更できるようになっている場合にのみ機能します。コンテナdivのサイズを変更できないため、クリエイティブが水平に壊れてしまうというシナリオがあります。これは避けようとしている問題です。私は、クリエイティブのサイズを検出するために正当な方法が必要だと思います。 – sphoid

9

GPTのアップデートがありました。これにより、これをより洗練された方法で行うことができます。 イベントはクリエイティブが返されたかどうかを通知し、その場合はディメンションと追加情報を通知します。

googletag.pubads().addEventListener('slotRenderEnded', function(event) { 
console.log('Creative with id: ' + event.creativeId + 
    ' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]); 
}); 

実際のクリエイティブが返されたかどうかを示すevent.isEmptyもあります。

+1

とevent.Size too arrayはレンダリングされたクリエイティブのサイズを示します。 https://support.google.com/dfp_premium/answer/1650154?hl=en – MarkD

+0

これは本当に選択された回答になります。 – jnthnclrk

関連する問題