¿Como mostrar un anuncio de Adsense en función de la resolución de ancho de pantalla?

daniel7 · 24 Ene 2024

Hola,
Tengo un problema importante en mi sitio web (y urgente de solucionar).
Necesito poner el código de un anuncio pero que solo se muestre en una determinada resolución de pantalla.
En concreto, si el ancho de pantalla es de 1920 px entonces quiero que se muestre este anuncio:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ocultado"
crossorigin="anonymous"></script>

<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-ocultado"
data-ad-slot="9444285417"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

En concreto necesito poner ese código en la parte izquierda de páginas de mi sitio web pero que si la resolución es inferior a 1920px (el ancho), entonces no se muestre ese código.

Gracias.

BotBeta · 24 Ene 2024

Podrías usar JavaScript para detectar el ancho de la pantalla y ejecutar tu código Adsense solo si el ancho es de 1920 px.

JavaScript:

if(window.innerWidth == 1920) {
  document.write("<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ocultado' crossorigin='anonymous'><\/script><ins class='adsbygoogle' style='display:inline-block;width:160px;height:600px' data-ad-client='ca-pub-ocultado' data-ad-slot='9444285417'><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>");
}

Inserta este script en tu código donde quieras que aparezca el anuncio. Recuerda que si el usuario cambia la resolución de su pantalla mientras tu sitio está abierto, este código no actualizará el anuncio en tiempo real. Asegúrate de probarlo en diferentes navegadores y tamaños de pantalla para garantizar su correcto funcionamiento.

Puko · 24 Ene 2024

BotBeta dijo:
Podrías usar JavaScript para detectar el ancho de la pantalla y ejecutar tu código Adsense solo si el ancho es de 1920 px.

JavaScript:

if(window.innerWidth == 1920) { document.write("<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ocultado' crossorigin='anonymous'><\/script><ins class='adsbygoogle' style='display:inline-block;width:160px;height:600px' data-ad-client='ca-pub-ocultado' data-ad-slot='9444285417'><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>"); }

Inserta este script en tu código donde quieras que aparezca el anuncio. Recuerda que si el usuario cambia la resolución de su pantalla mientras tu sitio está abierto, este código no actualizará el anuncio en tiempo real. Asegúrate de probarlo en diferentes navegadores y tamaños de pantalla para garantizar su correcto funcionamiento.

No es mas facil con media jquery y con la class "adsbygoogle" o agregandole otra?

BotBeta · 24 Ene 2024

Puko dijo:
No es mas facil con media jquery y con la class "adsbygoogle" o agregandole otra?

Sí, puedes usar media queries con JQuery para hacerlo más interactivo. Por ejemplo:

JavaScript:

$(document).ready(function(){
    if (window.matchMedia('(min-width: 1920px)').matches) {
        $('.adsbygoogle').show();
    } else {
        $('.adsbygoogle').hide();
    }
    $(window).resize(function() {
        if (window.matchMedia('(min-width: 1920px)').matches) {
            $('.adsbygoogle').show();
        } else {
            $('.adsbygoogle').hide();
        }
    });
});

Esto ocultará el anuncio en pantallas que son más pequeñas que 1920px y se mostrará cuando la pantalla sea de al menos 1920px. También se actualizará si el usuario redimensiona su ventana.

sonyd · 24 Ene 2024

Can this method be applied to Exblog JP? I currently have Adsense active on Exblog JP, but I don't know how to apply it, there is only an HTML editing option. Thanks for your help..

Alchemist · 26 Ene 2024

BotBeta dijo:
Sí, puedes usar media queries con JQuery para hacerlo más interactivo. Por ejemplo:

JavaScript:

$(document).ready(function(){ if (window.matchMedia('(min-width: 1920px)').matches) { $('.adsbygoogle').show(); } else { $('.adsbygoogle').hide(); } $(window).resize(function() { if (window.matchMedia('(min-width: 1920px)').matches) { $('.adsbygoogle').show(); } else { $('.adsbygoogle').hide(); } }); });

Esto ocultará el anuncio en pantallas que son más pequeñas que 1920px y se mostrará cuando la pantalla sea de al menos 1920px. También se actualizará si el usuario redimensiona su ventana.

Hacerlo asi podria darte problemas con adsense y te pueden suspender la cuenta pues gestionar los codigos de esa manera va contra las politicas.

BotBeta · 26 Ene 2024

Alchemist dijo:
Hacerlo asi podria darte problemas con adsense y te pueden suspender la cuenta pues gestionar los codigos de esa manera va contra las politicas.

Tienes razón, manipular el código de anuncios de Adsense o no mostrar anuncios basándose en la resolución de la pantalla puede violar las políticas de Google. En lugar de ocultar los anuncios, puedes considerar usar espacios publicitarios responsivos o diferentes tamaños de anuncios adaptados a diferentes resoluciones de pantalla. Te recomendaría leer y seguir las políticas de Adsense con cuidado para evitar cualquier contratiempo.

daniel7 · 28 Ene 2024

Gracias por vuestros comentarios.
Tengo otra duda (también relacionado con un anuncio de 160x600 px, pero es de Themoneytizer). No sé si alguien podría ayudarme en este post aunque sea de de Adsense ya que mi anuncio del cual hablo ahora no es de Adsense si no de Themoneytizer.

Tengo este anuncio:


<div id="anuncio160x600" style="position: absolute; left: 90px;top: 78px;">
<div id="61881-20"><script src="//ads.themoneytizer.com/s/gen.js?type=20"></script><script src="//ads.themoneytizer.com/s/requestform.js?siteId=61881&formatId=20"></script></div>
</div>

¿Cómo puedo hacer que solo se muestre si la resolución de pantalla es de 1920x1080 px?

He preguntado a la"inteligencia artificial" (chatGPT) y no me funciona correctamente lo que me ha dicho (ya que el anuncio me crea un salto de línea y no quiero que se produzca ese salto de línea porque si no todo el contenido de la derecha se me desplaza hacia abajo). Esto es lo que me ha dicho:

<head>

<style>
.publicidad160x600 {
display: none; /* Ocultar el anuncio por defecto */
position: absolute;
left: 90px;
top: 78px;
}
</style>

<script>
window.onload = function () {
// Verificar la resolución al cargar la página
checkResolution();

// Agregar un evento de cambio de tamaño de ventana
window.addEventListener("resize", checkResolution);
};

function checkResolution() {
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

// Mostrar u ocultar el anuncio según la resolución
if (screenWidth >= 1920) {
document.getElementById("publicidad160x600").style.display = "block";
} else {
document.getElementById("publicidad160x600").style.display = "none";
}
}
</script>

Gracias.

Alchemist · 28 Ene 2024

Crea un div padre para el codigo de la publicidad con otro id y haz que oculte o le de display block a ese ID con eso te debe bastar

daniel7 dijo:
Gracias por vuestros comentarios.
Tengo otra duda (también relacionado con un anuncio de 160x600 px, pero es de Themoneytizer). No sé si alguien podría ayudarme en este post aunque sea de de Adsense ya que mi anuncio del cual hablo ahora no es de Adsense si no de Themoneytizer.

Tengo este anuncio:


<div id="anuncio160x600" style="position: absolute; left: 90px;top: 78px;">
<div id="61881-20"><script src="//ads.themoneytizer.com/s/gen.js?type=20"></script><script src="//ads.themoneytizer.com/s/requestform.js?siteId=61881&formatId=20"></script></div>
</div>

¿Cómo puedo hacer que solo se muestre si la resolución de pantalla es de 1920x1080 px?

He preguntado a la"inteligencia artificial" (chatGPT) y no me funciona correctamente lo que me ha dicho (ya que el anuncio me crea un salto de línea y no quiero que se produzca ese salto de línea porque si no todo el contenido de la derecha se me desplaza hacia abajo). Esto es lo que me ha dicho:

<head>

<style>
.publicidad160x600 {
display: none; /* Ocultar el anuncio por defecto */
position: absolute;
left: 90px;
top: 78px;
}
</style>

<script>
window.onload = function () {
// Verificar la resolución al cargar la página
checkResolution();

// Agregar un evento de cambio de tamaño de ventana
window.addEventListener("resize", checkResolution);
};

function checkResolution() {
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

// Mostrar u ocultar el anuncio según la resolución
if (screenWidth >= 1920) {
document.getElementById("publicidad160x600").style.display = "block";
} else {
document.getElementById("publicidad160x600").style.display = "none";
}
}
</script>

Gracias.

daniel7 · 28 Ene 2024

Disculpe, pero, no sé como hacer eso / esto:
(Crea un div padre para el codigo de la publicidad con otro id y haz que oculte o le de display block a ese ID con eso te debe bastar)

No sé programación casi, solo sé casi solo "copiar y pegar", "jeje.

Puko · 28 Ene 2024

Tengo este anuncio:


<div id="anuncio160x600" style="position: absolute; left: 90px;top: 78px;">
<div id="61881-20"><script src="//ads.themoneytizer.com/s/gen.js?type=20"></script><script src="//ads.themoneytizer.com/s/requestform.js?siteId=61881&formatId=20"></script></div>
</div>

¿Cómo puedo hacer que solo se muestre si la resolución de pantalla es de 1920x1080 px usando el id "anuncio160x600" y con media jquery nomas?

BotBeta · 28 Ene 2024

Puko dijo:
Tengo este anuncio:


<div id="anuncio160x600" style="position: absolute; left: 90px;top: 78px;">
<div id="61881-20"><script src="//ads.themoneytizer.com/s/gen.js?type=20"></script><script src="//ads.themoneytizer.com/s/requestform.js?siteId=61881&formatId=20"></script></div>
</div>

¿Cómo puedo hacer que solo se muestre si la resolución de pantalla es de 1920x1080 px usando el id "anuncio160x600" y con media jquery nomas?

Puedes usar jQuery para verificar si la resolución de la pantalla es 1920x1080px y luego mostrar u ocultar el anuncio. Debería ser algo parecido a esto:

JavaScript:

$(document).ready(function(){
  // Ocultar el anuncio por defecto
  $('#anuncio160x600').hide();

  // Comprobar si la resolución de pantalla es 1920x1080px
  if (window.innerWidth == 1920 && window.innerHeight == 1080) {
    // Si es así, mostrar el anuncio
    $('#anuncio160x600').show();
  }
});

Este código ocultará el anuncio por defecto cuando se carga la página y luego comprobará la resolución de la pantalla. Si la resolución es 1920x1080px, mostrará el anuncio.

daniel7 · 28 Ene 2024

¿Pongo entonces esto en <head> o en <body>?

<script>
$(document).ready(function(){
// Ocultar el anuncio por defecto
$('#anuncio160x600').hide();

// Comprobar si la resolución de pantalla es 1920x1080px
if (window.innerWidth == 1920 && window.innerHeight == 1080) {
// Si es así, mostrar el anuncio
$('#anuncio160x600').show();
}
});
</script>

¿Y ésto lo pongo en <body> o hay que cambiar algo en este código?


<div id="anuncio160x600" style="position: absolute; left: 90px;top: 78px;">
<div id="61881-20"><script src="//ads.themoneytizer.com/s/gen.js?type=20"></script><script src="//ads.themoneytizer.com/s/requestform.js?siteId=61881&formatId=20"></script></div>
</div>

¿Y hay que añadir algo más en <head>?

Gracias.

daniel7 · 28 Ene 2024

Parece ser que por fin lo he solucionado (pero de otra forma).