Añadiendo google ads que se vean bien tanto en mobile como en pc (gads)

gads – Si te estas preguntando como puedo agregar los ads de google sin que perjudique tu diseño tal vez este pequeño archivo que me invente hace ya un tiempo te pueda ayudar. Este archivo javascript que le puse de nombre gads.js podría ayudarte. A continuación el análisis de este archivo que talvez en un futuro tenga modificaciones.

function gads(client,slot,parent){
 this.client = client;
   this.slot = slot;
 function x(client,slot){
     cont ="<\/script>";
     cont +="<!-- bc_horizontal_phones 480-->";
     cont +="<ins class=\"adsbygoogle\"";
     if(window.innerWidth < 480){
       cont +="style=\"display:inline-block;   width:"+parent.offsetWidth+"px;height:75px\"";
     }else{
       cont +="style=\"display:inline-block;width:"+parent.offsetWidth+"px;height:90px\"";
     }
     cont +="data-ad-client=\""+client+"\"";
     cont +="data-ad-slot=\""+slot+"\"></ins>";
     cont +="<script>";
     cont +="(adsbygoogle = window.adsbygoogle || []).push({});";
     cont +="<\/script>";
     //alert(parent.width);
     return cont;<br />
   }

this.content = x(this.client,this.slot);
}


function checkForAds(selector){       if(document.querySelector(selector) != null){
     var parent = document.querySelector(selector);
     selector = selector.substr(1);
     var adsX =new gads(c[selector]["client"],c[selector]["slot"],parent);
     parent.innerHTML = adsX.content;<br />
   }
 }



var c = {
    adsHeader:{
      client:"ca-pub-413001688xxxxxxx",
      slot:"7632xxxxxx"
    },
    adsFooter:{
      client:"ca-pub-413001688xxxxxxx",
      slot:"7424xxxxxx"
    },
    adsBc1:{
      client:"ca-pub-413001688xxxxxxx",
      slot:"1372xxxxxx"
    }
 };
adsname =new Array(
   ".adsHeader",
   ".adsFooter",
   ".adsbc1"
 );
 (function(){
   for(ad in adsname){
     //alert(adsname[ad]);
     checkForAds(adsname[ad]);
   }
 })();

Como puede ver en mi archivo javascript tengo un array llamado adsname este array contendra todos los nombres de las clases de los dibs que contendran a los ads que quiero utilizar.

Por ejemplo si yo pongo <div class=»adsFooter»></div> quiero que me lo rellene con un ads.

También en el código puede ver una función que se llama checkForAds con esta función chequeo si existe algún div con una clase de estas para rellenar con el ads de google.

También puede ver una función directamente en el archivo esta clase de función se ejecutan tan pronto llegue a ella no es llamada ni nada seria como hacer el document ready de jquery. Simplemente lo que hago con la función es recorrer el array e ir pasando a checkForAds.

Y por último tengo la función gads que es el constructor de un objeto para poner un banner a la medida según el tamaño de pantalla de la persona que está viendo la página.

Nueva Version teniendo en cuenta los ataques XSS

En la nueva version puede ver que en ves de hacer esto atraves de innerHTML agrego el ads manipulando el DOM esto es bueno ya que evita ataques XSS a nuestro sitio. El uso de innerHTML es algo que tendríamos que evitar en javascript o tener en cuenta al usarlo.

function gads(client,slot,parent){

  this.client = client;
  this.slot = slot;


  function x(client,slot){
    var parent = document.createElement("div");
    parent.setAttribute("class","ads");
    var script1 = document.createElement("script");
    script1.setAttribute("async","");
    script1.setAttribute("src","https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");

    var g_ins = document.createElement("ins");
    g_ins.setAttribute("class","adsbygoogle");
    if(window.innerWidth < 480){
      g_ins.setAttribute("style","display:inline-block;width:"+parent.offsetWidth+"px;height:75px");

    }else{
      g_ins.setAttribute("style","display:inline-block;width:"+parent.offsetWidth+"px;height:90px");
    }
    g_ins.setAttribute("data-ad-client",client);
    g_ins.setAttribute("data-ad-slot",slot);
    var script2 = document.createElement("script");
    text = document.createTextNode("(adsbygoogle = window.adsbygoogle || []).push({});");
    script2.appendChild(text);
    parent.appendChild(script1);
    parent.appendChild(g_ins);
    parent.appendChild(script2);
    return parent;
  }



  this.content = x(this.client,this.slot);

}
function checkForAds(selector){
  if(document.querySelector(selector) != null){
    var parent = document.querySelector(selector);
    selector = selector.substr(1);
    var adsX =new gads(c[selector]["client"],c[selector]["slot"],parent);
    parent.appendChild(adsX.content);
  }
}

var c = {
   adsHeader:{
     client:"ca-pub-413001688570xxxx",
     slot:"763220xxxx"
   },
   adsFooter:{
     client:"ca-pub-413001688570xxxx",
     slot:"742460xxxx"
   },
   adsBc1:{
     client:"ca-pub-413001688570xxxx",
     slot:"137285xxxx"
   }
};

adsname =new Array(
  ".adsHeader",
  ".adsFooter",
  ".adsbc1"
);
(function(){
  for(ad in adsname){
    checkForAds(adsname[ad]);
  }
})();

Como utilizar el archivo gads

Tome el adsname y cámbielo a placer, directamente agregue los lugares donde necesite el ads.

En el objeto c ponga sus credenciales del slot y el cliente si mira c podrá ver que tienen varias x esto es porque no iba a poner un número de cliente real en el ejemplo.

En la parte de los ads en google adsense debe crear un objeto de tipo display para usarlo de esta manera.

Si deseas descargar el ejemplo a tu computadora puedes descargarlo atrevés de github en el siguiente link ?