Inserción dinámica de Adsense con JavaScript

Question

No puedo creer lo difícil que es encontrarlo, pero incluso en los documentos para desarrolladores de Google no puedo encontrarlo. Necesito poder dinámicamente, solo con JavaScript insertar adsense. También busqué StackOverflow y algunos otros me han preguntado esto pero no han respondido. Esperemos que esta sea una mejor explicación y obtenga algunas respuestas.

Básicamente, un usuario inserta mi guión, vamos a llamarlo my.js (no se puede decir lo que es específicamente por el momento.) my.js se carga y se muestra en my.js algunos medios incorporados en su página entonces necesito alguna manera para anexar el código HTML generado a partir de:

<script type="text/javascript"><!-- 
google_ad_client = "ca-pub-xxx"; 
/* my.js example Ad */ 
google_ad_slot = "yyy"; 
google_ad_width = 468; 
google_ad_height = 60; 
//--> 
</script> 
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

Dentro de un elemento específico <div> (o lo que sea). ¿Algunas ideas?

P.S. No hay bibliotecas como jQuery, y no puedo insertar código HTML en la página a menos que sea a través de JavaScript y tiene que ser insertado en un determinado <div> nombré (estoy usando Sizzle de mi biblioteca JS si eso ayuda)

Answer 1

¿Qué hay de tener los VARs (google_ad_client, etc) siempre en la cabeza y añadir dinámicamente la otra parte como esto:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; 
myDIV.appendChild(script); 

Answer 2

Según this page, es posible generar etiquetas script y poblar sus campos src en el momento - que es lo que @noiv sugiere (mi versión aquí debe ser independiente, no se requieren bibliotecas html o js externas). ¿Has probado esto? No parece tan difícil ...

function justAddAdds(target_id, client, slot, width, height) { 
    // ugly global vars :-P 
    google_ad_client = client; 
    google_ad_slot = slot; 
    google_ad_width = width; 
    google_ad_height = height; 
    // inject script, bypassing same-source 
    var target = document.getElementById(target_id); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; 
    target.appendChild(script); 
} 

Answer 3

La técnica simple que se usa para cargar de forma asíncrona el guión de AdSense propuesto por otras respuestas no funcionará porque Google utiliza document.write() dentro de la secuencia de comandos de AdSense. document.write() solo funciona durante la creación de la página, y cuando se ejecuta el script cargado de forma asíncrona, la creación de la página ya se habrá completado.

Para que esto funcione, necesitará sobreescribir document.write() por lo que cuando el guión lo llama AdSense, puede manipular el DOM sí mismo. Aquí hay un ejemplo:

<script> 
window.google_ad_client = "123456789"; 
window.google_ad_slot = "123456789"; 
window.google_ad_width = 200; 
window.google_ad_height = 200; 

// container is where you want the ad to be inserted 
var container = document.getElementById('ad_container'); 
var w = document.write; 
document.write = function (content) { 
    container.innerHTML = content; 
    document.write = w; 
}; 

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; 
document.body.appendChild(script); 
</script> 

El ejemplo primero almacena en caché la función native document.write() en una variable local. Luego sobrescribe document.write() y dentro de él, usa innerHTML para inyectar el contenido HTML que Google enviará a document.write(). Una vez hecho esto, restaura la función nativa document.write().

Esta técnica fue tomado de aquí: http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

Answer 4

Estos métodos funcionarán pero no va a funcionar para https. Si desea colocar anuncios dinámicamente y usar https, deberá registrarse para Double Click For Publishers.

he tenido este problema en mi sitio por lo que poner juntos un módulo de NPM para resolver este problema por mí mismo. Esperamos que te sea útil.

Use Adsense in Single Page Web Apps

El enlace contiene código de ejemplo completo de cómo utilizar el módulo en una sola aplicación página web.

Una vez que tenga el módulo instalado este código mostrará su anuncio en el elemento que especifique: ViceView.showAdsense({adslot: {slot: "myslot", sizes: "[300,100]", id:"your adsenseid"}, element: "element", adwidth: 300, adheight: 100});

Answer 5

Ya tengo adsense en mi página, pero también se inyecta nuevos anuncios en los marcadores de posición en mi artículo de blog. Donde quiero un anuncio inyectar agrego un div con una clase de 'adsense-inyección', entonces corro este script cuando el documento está listo y sé el guión adsense ya se ha cargado a los otros anuncios: -

$(document).ready(function() 
    { 
     $(".adsense-inject").each(function() { 
      $(this).append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3978524526870979" data-ad-slot="6927511035" data-ad-format="auto"></ins>'); 
      (adsbygoogle = window.adsbygoogle || []).push({}); 
     }); 
    }); 

Answer 6

Aquí hay una implementación actualizada, esto es útil si no necesita administrar los anuncios usando una javascript externa común, en mi caso tengo muchos archivos html estáticos y funciona bien. También ofrece un único punto de administración para mis scripts de AdSense.

var externalScript = document.createElement("script"); 
externalScript.type = "text/javascript"; 
externalScript.setAttribute('async','async'); 
externalScript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; 
document.getElementsByTagName('body')[0].appendChild(externalScript); 

var ins = document.createElement("ins"); 
ins.setAttribute('class','adsbygoogle'); 
ins.setAttribute('style','display:block;');/*add other styles if required*/ 
ins.setAttribute('data-ad-client','ca-pub-YOUR-CLIENTID'); 
ins.setAttribute('data-ad-slot','YOUR-SLOTID'); 
ins.setAttribute('data-ad-format','auto'); 
document.getElementsByTagName('body')[0].appendChild(ins); 

var inlineScript = document.createElement("script"); 
inlineScript.type = "text/javascript"; 
inlineScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});' 
document.getElementsByTagName('body')[0].appendChild(inlineScript); 

Ejemplo de uso:

<script type="text/javascript" src="/adinclude.js"></script>