Адаптивные объявления отображаются в разном размере, чем iFrame, и выровнены неправильно - PullRequest
0 голосов
/ 28 мая 2019

Я внедряю адаптивную рекламу от Google DFP на новостном сайте, и почти все, кажется, работает нормально, за исключением двух вещей:

1.- Они не всегда выровнены по центру, даже если яиспользуя правильные стили и функцию DFP для центрирования.

2.- Иногда, например, вызывается объявление 970x250, и iframe создается с таким размером, но изображение объявления просто 970x90, иУ меня осталось много пустого пространства, которое я не могу контролировать с помощью CSS, потому что это не всегда так, и я не могу сейчас определить, какой размер вызывается из стека отображения размеров.

Это реализация, которая у меня есть (она работает на https://digitallpost.com.mx/justicia/video-trailer-embiste-quince-autos-santa-fe/):

<script>
    (function() {
        var src = 'https://www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '""></scr' + 'ipt>');
    })();
    googletag.cmd.push(function() {

        var mappingtop2 = googletag.sizeMapping().
        addSize([900, 0], [[970, 90], [970, 250], [728, 90], [1, 1]]). //desktop
        addSize([768, 0], [[728, 90], [1, 1]]). //tablet
        addSize([320, 0], [[320, 100], [320, 50], [300, 250], [1, 1]]). //mobile
        addSize([0, 0], [[320, 100], [320, 50], [300, 250], [1, 1]]). //other
        build();

            googletag.defineSlot('/158800740/R_DAP_Notas_Top2', [300, 250], 'div-gpt-ad-1535413794930-0').defineSizeMapping(mappingtop2).addService(googletag.pubads());

            googletag.pubads().setCentering(true);
        googletag.pubads().enableLazyLoad();
        googletag.pubads().collapseEmptyDivs();
        googletag.enableServices();
    });
</script>

Это HTML:

<div class="[ banner_holder banner_top_2 ]">
    <!-- /158800740/R_DAP_Notas_Top2 -->
    <div id='div-gpt-ad-1535413794930-0'>
        <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1535413794930-0'); });
        </script>
    </div>
</div>

И CSS:

.banner_holder {
    width: 100%;
    text-align: center;
    margin: 20px auto;
    position: relative;
}

Это неправильный результат, который я получаю для проблемы с выравниванием: https://digitallpost.com.mx/dap-dfp.jpg

Это неправильный результат, который я получаю для проблемы с размером: https://digitallpost.com.mx/dap-dfp-alig.jpg

И не меняя ничего, просто обновляя, я иногда получаю правильный результат: https://digitallpost.com.mx/dap-dfp-right.jpg

...