Insertar adsense despues de X parrafo con JS

epsilo99 · 7 Abr 2020

Hola,

tengo un sitio estático en html y me gustaría agregar automáticamente el código de adsense luego del 2 y 6 parrafo de cada artículo, por ejemplo.

se puede hacer algo así con js, css, html5.....

pues PHP al ser estático no puedo usar y editar artículo por artículo para meter el código se hace eterno...

Agradezco culquier ayuda!

OmarCoder · 7 Abr 2020

Lo básico sería algo como

HTML:

<div class="content">
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <p>Párrafo 6</p>
     <p>Párrafo 7</p>
     <p>Párrafo 8</p>
</div>
<script>
let parent = document.querySelector('.content');
let parrafos = [2,6]; 
parrafos.forEach(function(i){
    let p = parent.querySelector('p:nth-of-type('+i+')');
    let adsense = document.createElement('div');
    adsense.innerHTML = 'ADSENSEHTML';
    parent.insertBefore(adsense, p.nextSibling);
});

</script>

Y el resultado algo como

epsilo99 · 8 Abr 2020

OmarCoder dijo:

Lo básico sería algo como

HTML:

<div class="content">
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <p>Párrafo 6</p>
     <p>Párrafo 7</p>
     <p>Párrafo 8</p>
</div>
<script>
let parent = document.querySelector('.content');
let parrafos = [2,6];
parrafos.forEach(function(i){
    let p = parent.querySelector('p:nth-of-type('+i+')');
    let adsense = document.createElement('div');
    adsense.innerHTML = 'ADSENSEHTML';
    parent.insertBefore(adsense, p.nextSibling);
});

</script>

Y el resultado algo como
Ver el archivo adjunto 237658

Gracias por tu ayuda, el código funciona impecable para botones, textos, etc. también funciona para meter los contenidos después de los subtítulos sin problemas 😉

pero cuando le pongo el código de adsense ya no funciona 🙁 y se muestra esto al final del contenido:

Insertar CODE, HTML o PHP:

'; parent.insertBefore(adsense, p.nextSibling); });

alguna idea para que funcione metiendo un código así?

Insertar CODE, HTML o PHP:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- codigo-adse-3244 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-65354226265353"
     data-ad-slot="8034234245"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

rayden · 10 Abr 2020

@epsilo99 intenta bloqueando las comillas.

Free Online JavaScript (JS) Escape / Unescape Tool - FreeFormatter.com

A free online tool to escape or unescape Javascript strings

www.freeformatter.com

por ejemplo:
Declara una variable e introduce el string ya bloqueado
----------------

JavaScript:

var forobeta = '<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-65354226265353\"\r\n     data-ad-slot=\"8034234245\"\r\n     data-ad-format=\"link\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>';               
                
let parent = document.querySelector('.content');
let parrafos = [2,6];
parrafos.forEach(function(i){
    let p = parent.querySelector('p:nth-of-type('+i+')');
    let adsense = document.createElement('div');
    adsense.innerHTML = forobeta ;
    parent.insertBefore(adsense, p.nextSibling);
});

epsilo99 · 10 Abr 2020

rayden dijo:
@epsilo99 intenta bloqueando las comillas.

Free Online JavaScript (JS) Escape / Unescape Tool - FreeFormatter.com

A free online tool to escape or unescape Javascript strings

www.freeformatter.com

por ejemplo:
Declara una variable e introduce el string ya bloqueado
----------------

JavaScript:

var forobeta = '<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block\"\r\n data-ad-client=\"ca-pub-65354226265353\"\r\n data-ad-slot=\"8034234245\"\r\n data-ad-format=\"link\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>'; let parent = document.querySelector('.content'); let parrafos = [2,6]; parrafos.forEach(function(i){ let p = parent.querySelector('p:nth-of-type('+i+')'); let adsense = document.createElement('div'); adsense.innerHTML = forobeta ; parent.insertBefore(adsense, p.nextSibling); });

Gracias por tu ayuda.

Ahora ya no se presenta el error, pero la publicidad de adsense sigue sin mostrarse 😕

rayden · 11 Abr 2020

@epsilo99

Prueba con este:

HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p>The 1 paragraph in body.</p>
<p>The 2 paragraph in body.</p>
<p>The 3 paragraph in body.</p>
<p>The 4 paragraph in body.</p>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p:nth-of-type(1)").html("<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-65354226265353\"\r\n     data-ad-slot=\"8034234245\"\r\n     data-ad-format=\"link\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>");
});
</script>
</html>

epsilo99 · 11 Abr 2020

rayden dijo:

@epsilo99

Prueba con este:

HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p>The 1 paragraph in body.</p>
<p>The 2 paragraph in body.</p>
<p>The 3 paragraph in body.</p>
<p>The 4 paragraph in body.</p>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p:nth-of-type(1)").html("<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-65354226265353\"\r\n     data-ad-slot=\"8034234245\"\r\n     data-ad-format=\"link\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>");
});
</script>
</html>

Ahora si se muestra el anuncio y en lugar indicado, pero en lugar de ponerlo después del parrafo 1 lo que hace es remplazarlo por el párrafo 1, o sea desaparece el parrafo 1 y en su lugar aparece el anuncio....

OmarCoder · 11 Abr 2020

Hola de nuevo!
Te comento, el problema es que el script de adsense debe cargarse antes, en las etiquetas <head></head> de tu código, agrega la línea de
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Además, antes de cerrar la etiqueta body en </body>, agrega
[ICOD]<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>[/ICODE]
Posteriormente, debes agregar los contenedores de anuncios, algo como

HTML:

<div class="content">
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <p>Párrafo 6</p>
     <p>Párrafo 7</p>
     <p>Párrafo 8</p>
</div>
<script>
let parent = document.querySelector('.content');
let parrafos = [2,6];
parrafos.forEach(function(i){
    let p = parent.querySelector('p:nth-of-type('+i+')');
    let adsense = document.createElement('div');
    adsense.innerHTML = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-65354226265353" data-ad-slot="8034234245" data-ad-format="link"></ins>';
    parent.insertBefore(adsense, p.nextSibling);
});

</script>

De últimas, la solución del compañero rayden podría agregar el código en vez de reemplazarlo si haces algo como

HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p>The 1 paragraph in body.</p>
<p>The 2 paragraph in body.</p>
<p>The 3 paragraph in body.</p>
<p>The 4 paragraph in body.</p>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-of-type(1)").html($("p:nth-of-type(1)").html()+"<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block\"\r\n data-ad-client=\"ca-pub-65354226265353\"\r\n data-ad-slot=\"8034234245\"\r\n data-ad-format=\"link\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>");
});
</script>

epsilo99 · 12 Abr 2020

Tremendo!

Ahora si funcionan los dos códigos sin problemas,

(si se ponen varios anuncios hay que cerrar varias veces <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> sino muestra solo una vez)

Son unos genios @OmarCoder y @rayden

Insertar adsense despues de X parrafo con JS

epsilo99

OmarCoder

epsilo99

rayden

Free Online JavaScript (JS) Escape / Unescape Tool - FreeFormatter.com

epsilo99

Free Online JavaScript (JS) Escape / Unescape Tool - FreeFormatter.com

rayden

epsilo99

OmarCoder

epsilo99

Temas similares