Inserir adsense depois de X parágrafo com JS

epsilo99 · 07/04/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 · 07/04/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 · 08/04/2020

OmarCoder disse:

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 o anexo 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:

Inserir CODE, HTML ou PHP:

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

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

Inserir CODE, HTML ou 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/04/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/04/2020

rayden disse:
@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/04/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/04/2020

rayden disse:

@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/04/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/04/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

Inserir adsense depois de X parágrafo com 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

Tópicos similares