Java Script Code Loading by Screen Resolution

Question

Hello,

I have a situation I need help with.

I have a responsive site where the layout is adaptable to several screens, where the content presented and how to present will be according to the resolution of the user! Therefore, I have a js code from Ad Manager (Google Advertising Manager) where I have to incorporate js codes. Codes will be entered according to the resolution of the user screen.

I am using css to hide and present parts of the code according to the resolution of the example user screen:

@media (max-width:992px) {
body {
    padding-top: 76px;
}       
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background: #fff;
}   
.header-redesocial, .header-busca, .banner-300x250-desktop {
    display: none !important;
}
.banner-300x250-mobile {
    display: block !important;      
}

}

In case, I display one code and hidden another according to the resolution.

Problem faced, even hidden the code according to the resolution, google servers count as if the code was invoked, that is, inserted and presented to the user even not being presented due to the resolution size of the user screen!

How to make the code correctly to enter the google codes so that google did not account for the insertion? Hidden the div is just not working because it exists, just does not display to the user, then google understands that it was entered by visa.

Grateful.

Follow the js code to be inserted:

<script>
      googletag.cmd.push(function() {
        googletag.defineSlot('/444444/home-630x100', [630, 100], 'div-gpt-ad-166399527555553-').addService(googletag.pubads());

</script>

above code to display the banners, being a code for each ad block, if you have 10, you have to invoke 10 codes in the

Code below to display the banner: the one I need to hide and present according to the resolution

<!-- /6666/home-mobile-300x100-01 -->
<div id='div-gpt-ad-166399527555553-0' style='height:100px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-166399527555553-'); });
</script>

Answer 1

Using javascript it is possible to do this by analyzing for example the window.innerWidth to identify the resolution, then create a "script" type element and add to your page:

var scriptDinamico = document.createElement("script");
scriptDinamico.type = "text/javascript";

if (window.innerWidth > 640 && window.innerWidth < 900){
    scriptDinamico.src = "http://urldoscript/script640-900.js";
} else if (.... outras resoluções ) {
    scriptDinamico.src = "http://urldoscript/script901-1200.js";
}

document.getElementsByTagName('head')[0].appendChild(scriptDinamico);

At the end, you can use the appendChild to add to tag head page