martes, 8 de noviembre de 2011

Google Adwords: Incrementando la relevancia de los Anuncios

Siguiendo con el tema de la relevancia aumentada en los anuncios y tal como os comentaba en el otro artículo, hay otros trucos para incrementar la relevancia de los anuncios en Google Adwords.
Hoy nos centraremos en uno de los factores que yo llamo Estructurales, concretamente en las Extensiones de Anuncios y en las llamadas Extensiones de Sitios (Ad SiteLinks).
Los anuncios con Ad SiteLinks aparecen siempre situados en las primeras posiciones,  siempre en la zona "podium", encima de los resultados SEO.

















Como sabeis, los AdSiteLinks SOLO aparecen cuando Google considera que existe un muy alto nivel de calidad respecto a la búsqueda efectuada por el usuario con la palabra clave asociada y anuncio del anunciante (trinomio).
No confundir este nivel de calidad ("on fly") con el que tiene la palabra clave en la campaña, ya que ese es un nivel de calidad "del pasado", basado en los cálculos de nivel de calidad efectuados hasta hoy según búsquedas efectuadas por los usuarios en los que ha intervenido la palabra clave en cuestión, el CTR de cuenta, campaña, palabra clave, etc... Obviamente que es la guía que debemos usar, pero... no lo es todo. Aquí teneis un interesante articulo de Enrique del Valle sobre Nivel de calidad y anuncios.

Con los Ad SiteLinks, podemos construir un anuncio que consiga una buena comunicación con el usuario, ya que permite ofrecer al usuario accesos directos a puntos relevantes de la web que tengan que ver con su búsqueda.

Bien, hasta aqui lo que hay en los libros, ahora vamos un poco más allá....

Los Ad SiteLinks tienen un comportamiento bastante interesante si los llevas al límite, a ese comportamiento (que ahora describiré) le llamo "Ad SiteLink embeded" (incrustado).
Me explico:
Siguiendo con la filosofía de tener grupos de anuncios con un número reducido de palabras clave y con anuncios altamente relevantes (ver el otro artículo), podemos generar Ad SiteLinks cuyo texto concuerde con nuestras palabras clave.

Hasta aqui casi nada nuevo, pero.... si estas palabras clave están también en el texto de nuestro anuncio (generalmente estarán si se sigue la filosofía explicada en el anterior artículo), el Ad SiteLink aparece dentro del texto del anuncio como un link.

La palabra clave contenida en el texto y también definida como texto del Ad SiteLink, "se activa" y aparece en negrita azulada con un link directo al contenido relevante asociado en el Ad SiteLink. Ya tenemos el  "Ad SiteLink embeded".
En otras palabras, si el texto del Ad SiteLink coincide con una parte del texto del Anuncio, éste se activará como link adicional y en negrita azulada, logrando una visibilidad mayor.











No obstante, su aparición va ligada a las mismas condiciones que los Ad SiteLinks clásicos y por tanto, tener coincidencia de texto con el Ad SiteLink, no es garantía de aparación. Tal como tambien ocurre con los Ad SiteLinks clásicos, que no aparecen siempre aunque los tengamos definidos.
Además son excluyentes, es decir, si aparecen los Ad SiteLinks clásicos, no se activan los "Ad SiteLinks embeded". Aqui lo podeis ver:







Aunque si que aparecen (cuando las condiciones son idóneas para su aparición) junto con las Extensiones de Ubicación, y eso si que es interesante. Aqui lo podeis ver:








Conclusión (por ahora): Los "Ad SiteLinks Embeded" aparecen cuando:
H1.- Los Ad SiteLinks clásicos "no caben", debido a que hay otras extensiones de anuncios como las de Ubicación o las de Producto.
H2.- "No se cumplen del todo" (pero casi) las condiciones para la aparición de los clásicos.
H3.- Y no aparecen si salen los clásicos.

Aplicar este "truco" y aprovechar este comportamiento, nos va a diferenciar de los otros anuncios competidores desde el punto de vista del Usuario y hace que destaquemos entre los demás.
Por los datos que manejamos en nuestras campañas, los anuncios en donde aparecen estos "Ad SiteLink embeded" tienen más clics que los anuncios normales. Desgraciadamente, por ahora no hay datos que discriminen los clics recibidos por los "Ad SiteLinks Embeded" de los Ad SiteLinks clásicos. Google Adwords tiene que trabajar más este aspecto ofreciendo datos sobre clics en los Ad SiteLinks individualmente y discriminando entre los clásicos y los embeded.

Gracias por leer hasta aquí, espero que este artículo os sirva para mejorar vuestras campañas de alto rendimiento ya que (recordad) los Ad SiteLinks sólo salen si hay un alto nivel de calidad.

¿Habíais pensado/Utilizabais una solución como ésta para maximizar los clics en vuestros anuncios?
Cualquier comentario al respecto será bienvenido.



martes, 4 de octubre de 2011

Google Adwords: Anuncios con relevancia aumentada

Este artículo se va a centrar en maximizar la relevancia de los anuncios, es decir, en conseguir anuncios relevantes de acuerdo con la búsqueda efectuada por el usuario y las palabras claves de nuestra campaña.

En Google Adwords hay varias maneras de incrementar la concordancia y relevancia de los anuncios. Una buena gestión de sus posibilidades nos hará incrementar de manera importante nuestra relevancia (factor importante en el Nivel de Calidad) y nuestro CTR (factor más importante en el Nivel de Calidad) .

El ejemplo que vamos a utilizar para ilustrar este artículo versará sobre "cursos de google adwords". El dominio de referencia será "google.es", y utilizaremos un grupo de anuncios con las palabras clave: [cursos google adwords], [curso google adwords], [cursos adwords],  [curso adwords], [cursillo adwords], [cursillos adwords], [cursillos google adwords], [cursillo google adwords], etc..

En Google Adwords es importante buscar una máxima concordancia entre la búsqueda del usuario y la palabra clave, asi como una alta relevancia de ambas con el anuncio que se imprime.
Para que este trinomio (búsqueda usuario-palabra clave-anuncio) funcione, hay que GENERAR GRUPOS DE ANUNCIOS CON CONJUNTOS REDUCIDOS DE PALABRAS CLAVE que versen sobre el mismo tema.
Eso facilitará mucho el manejo de la propia campaña, además de conseguir anuncios relevantes que es de lo que trata este artículo.

Diversos factores permiten hacer anuncios relevantes; yo los defino como factores Sintácticos, Semánticos y Estructurales:
Sintácticos (cómo decimos lo que queremos decir):
          - Introducir en el texto del anuncio las palabras clave.
          - Introducir la opción {keyword:palabra clave relevante}
                · En título, líneas de texto e incluso en la URL visible.

  Semánticos (qué queremos decir):
- Textos de llamadas a la acción. 
      ·  Llámenos ahora.  /   Pruébenos. 
- Textos que generen "ansia de compra": 
      · Últimos dias.  /  Hasta fin de mes.
- Etc

 Estructurales (opciones que nos ofrece el sistema):
-Uso de las extensiones de anuncio:
     ·  Extensiones de sitio
     ·  Extensiones de ubicación
     ·  Extensiones de llamada
     ·  Extensiones de producto


Nos centraremos sólo en los factores Sintácticos y Semánticos del anuncio, para incrementar su relevancia. Los factores Estructurales serán motivo de otro artículo que desarrollaré en un futuro, ya que también pueden aportar mucho a la relevancia del anuncio.

Basándonos en lo anterior, un anuncio se compone de factores Sintácticos y Semánticos. Ambos son imprescindibles a la hora de crear un anuncio.
Podemos hacer un anuncio sintácticamente perfecto, pero que no comunique, y por tanto, no tendrá los resultados esperados.
100% Sintáctico: 
          {KeyWord:Cursos Google Adwords}
         {Keyword:Google adwords}-{KeyWord:Google Adwords}
         {keyWord:google Adwords}-{keyword:google adwords}
         adwords.google.es/{keyword:google-adwords}
Relevancia 100%, resultado: pobre. No comunica, ni empatiza. Sintácticamente es perfecto para la relevancia, pero semánticamente no nos dice nada.

O podemos hacer un anuncio semánticamente perfecto, yéndonos al lado opuesto:
100% Semántico: 
         Cursos adwords a medida.
         Marqueting online a su alcance.
         Últimos días para matricularse.
         www.google.es
Este anuncio tiene poca relevancia al tener apenas las palabras clave contenidas en él. Aunque sí que empatiza, ofrece una ventaja, un beneficio y "apremia" a la acción. Pero dada su poca relevancia, el sistema lo relegará a una baja posición (manteniendo la misma oferta CPC), por lo que... pocos clics, poco CTR, bajo Nivel de Calidad, etc....

La solución, como siempre, en el punto intermedio:
        {KeyWord:Cursos Google Adwords}
        Certificación en {Keyword:Google adwords}
        10% dto. últimas plazas. Llámenos.
        adwords.google.es/{keyword:google-adwords}

Aquí vemos que conjuntando bien los 2 factores, podemos construir un anuncio que consiga una buena comunicación con el usuario y una buena relevancia.

Bien, hasta aqui lo que hay en los libros, ahora vamos un poco más allá....

La línea de anuncio que Adwords más tiene en cuenta para fijar la relevancia de un anuncio es la línea verde, la zona de la URL visible. El sistema entiende (acertadamente) que "Si hay algo que no miente, es el dominio".
Al centrarnos en esa línea, hay varias cosas que me llaman la atención:
  1. Si pongo www.google.es/{Keyword:Palabra clave}, obviamente esa URL visible (la resultante) no existe. Por tanto, entiendo que Adwords no comprueba que la URL visible exista, sino que comprueba el dominio y si éste coincide con el de la URL invisible (obviamente, la URL invisible si tiene que existir).      mmmmmm.....interesante....
  2. Por el otro lado (el lado izquierdo de la URL visible), están los posibles subdominios. Por ejemplo: en vez de poner www.google.es ,  podemos poner adwords.google.es.  Estos subdominios,  hay que crearlos en el servidor, etc, etc..., pero....¿Adwords comprueba los subdominios? ¿Sí? ¿Seguro?  
Yo creo que no, Adwords sólo comprueba el dominio de la URL visible. Llegados a este punto, voy a fundamentar esta afirmación, porque desencadenará la conclusión y el valor añadido de este artículo.

Lo primero que hay que tener claro es.... ¿qué es un dominio?.
Un dominio NO es esto: www.google.es , un dominio es exactamente esto: google.es , es decir, sin el "www.", que en realidad es un subdominio.

Fijémonos también que si en la URL visible ponemos  google.es  (sin www.), no supone ningún problema para validar el anuncio y su URL visible. El sistema lo acepta y es normal que lo haga.

Por lo que deduzco que el sistema no comprueba ni los posibles subdominios a la izquierda, ni los /lo-que-sea a la derecha del dominio en la URL visible.

Ahora conjeturemos....., si la teoría de la "NO comprobación" (de subdominios por la izquierda, ni de los /lo-que-sea por la derecha)  es cierta, implica que no hace falta que los subdominios estén previamente definidos en nuestro servidor, ni tenemos por qué poner subdominios, sino que podemos escribir lo que queramos, incluso... palabras clave !!!.

Por tanto, la cosa puede ser mucho más versátil de lo que nos imaginamos y podríamos poner cosas como éstas: 
cursos-adwords.google.es/{KeyWord:Google Adwords}  y que funcione.
cursillos-adwords.google.es/{keyword:google adwords}  y que funcione.
Como ejemplo ilustrativo, aunque se pase de largo (y sea rechazado por ello):
la-palabra-clave-que-yo-quiera-para-incrementar-la-relevancia-de-ese-anuncio-en-particular.google.es/mas-relevancia-extra-aqui

Si la teoría fuera cierta, podríamos poner en la línea verde, que es donde Adwords pondera con mayor fuerza la relevancia del anuncio, un  "plus de relevancia" insospechado hasta el momento.

Pues la teoría es correcta y funciona perfectamente, sin problemas de rechazo por parte del sistema. Siguiendo ciertas normas, claro.

Vamos a verlo:

En una campaña con pocas palabras clave en cada grupo de anuncios, podemos poner la palabra clave "insignia" del grupo en esa parte del anuncio, y en otra creatividad (aconsejo al menos 2 creatividades de anuncio por grupo) la segunda, etc, etc. Sin preocuparnos de crear los subdominios correspondientes, con la serie de procedimientos (a veces fuera del alcance del que gestiona la campaña) que esto conlleva.

  {KeyWord:Curso Google Adwords}
  Certificación en {Keyword:Google adwords}
  10% descuento inscripción online.
  cursos-adwords.google.es/{keyword:cursos adwords}

  {KeyWord:Cursillo Google Adwords}
  Ven a nuestros {keyword:cursillos adwords}
  Ultimas plazas con oferta especial.
  Cursillos-adwords.google.es/{keyWord:cursos Adwords}

Aunque no todo vale:
  • Si ya estáis pensando en algo parecido a esto:                                          {KeyWord:Google-Adwords}.google.es/{KeyWord:Google Adwords}, olvidaos, el sistema lo rechaza. Y tiene sentido que lo haga.
  • Palabras separadas por espacio en blanco:                                              google adwords.google.es/{keyword:google adwords}, el sistema también lo rechaza.

Las palabras clave que ubiquemos allí deben ir juntas.
Yo utilizo el guión medio  (google-adwords) para diferenciar las palabras y ayudar a visualizarlas mejor por parte del usuario. Al sistema Adwords no le hace falta, ya que las identifica (las pone en negrita) si coinciden con la búsqueda del usuario, aunque estén juntas (googleadwords). No obstante, separarlas con un guión medio (-), ayuda a que el usuario las lea con mayor comodidad y hacen que el anuncio sea más "amigable".

En igualdad de condiciones con otros anunciantes, este "plus de relevancia añadida",  permite siempre situarse en mejor posición. Y sobre todo, diferenciarnos.


Esta es una manera de incrementar la relevancia de un anuncio maximizando el uso de la zona verde (URL Visible) del mismo,  pero hay otros "trucos", en otras partes del anuncio,  igual de eficaces que explicaré en futuros artículos.

Gracias por leer hasta aquí, espero que este artículo os sirva para mejorar vuestras campañas. La mejora contínua de las mismas es el mejor camino para obtener un buen Nivel de Calidad y la mejor manera de conseguir buenos CPCs, CTRs y CPAs.

¿Habíais pensado/Utilizabais una solución como ésta para maximizar la relevancia de los anuncios?
Cualquier comentario al respecto será bienvenido.


miércoles, 20 de julio de 2011

Google Adwords: Estrategia de Gestión del CPC en Red de búsqueda

Como todos sabeis, en Google Adwords la gestión del CPC es una de las herramientas básicas para controlar el presupuesto de la campaña. 
Ya puedes ser buen piloto, que sin gasolina el coche no corre, por tanto, disponer de suficiente carburante, es vital para desarrollar toda la estrategia de campaña posterior.

Voy a intentar explicar una estrategia (que a nosotros nos funciona muy bien) para poder optimizar al máximo una campaña de búsqueda desde el punto de vista del CPC. Esto, nos permitirá que después podamos focalizarnos en las Conversiones, su coste, etc.
Pero para centrarnos, dejo claro que voy a hablar poco o nada de diferentes aspectos que también intervienen en la optimización del CPC de búsqueda, entre ellos:
  • Los Anuncios y sus técnicas para incrementar la relevancia con sus palabra clave asociadas. Aquí libra una batalla el nivel de calidad, pero no es el objeto de este post.
  • Landing pagesaquí también libra su batalla el nivel de calidad, e incluso se gana la guerra de la conversión, aunque no es el objeto de este post.
  • Conversiones ni rendimiento, ni costes de las mismas. Aunque no se perderán de vista, y después veremos como "explotan".
  • Google Analytics y sus datos para refinar adwords, aunque su estudio en las últimas fases de la estrategia es vital.

Al empezar una campaña....hay que adquirir buen Nivel de Calidad lo antes posible, y después...mantenerlo. Eso pasa por tener un buen CTR. 
Mirar este video para haceros una idea de como conjugan CPC, CTR, Nivel de Calidad (QS) y Posición del Anuncio.


Implementación de la estrategia:

Día 0:
  • Estudio exhaustivo del producto, usos, competencia, web, landing pages, objetivos iniciales, etc.... 
  • Lista de palabras que definen el producto/servicio, usos, etc.
  • Preparamos las landing pages para que sean relevantes, o escogemos las más relevantes. Hay varias técnicas para ello, según la naturaleza de la web.
  • Lista de palabras agrupadas con landing page especifica y/o particular. No muchas, unas 40-50 como máximo en 10-15 grupos (aunque esto dependerá del tipo de producto o servicio).
Día 1:
  • Asociar cada palabra clave con landing pages especificas, si es posible.
  • Las palabras clave se dispondrán en grupos de anuncios lo más atomizados posibles, para que la relevancia entre ellos y las palabras clave sea alta.
  • Introducimos sólo palabras clave en concordancia [exacta].
  • Activamos la gestión manual del CPC, e intentamos pujar "fuerte" para poder estar en primeras posiciones (zona izquierda encima de SEO).
Dia 10:
  • Ya deberíamos tener un CTR de 2 dígitos (>10%) si no es así, hay algo que no estamos haciendo bien. 
    • Revisar  lo hecho hasta ahora.
    • Atención a los sinónimos de nuestras palabras clave.
  • El nivel de calidad debe estar entre 7 y 10, pero aún es pronto....
  • "Abrimos" las palabras a concordancia "de frase", según :
    • Grupo de anuncios al que pertenezcan.
    • Posibles implicaciones en cuanto a concreción de significado, que podría afectar a su CTR y al general de campaña.
  • Bajamos el CPC sólo a las palabras de concordancia [exacta]:
    • Monitoreando para no perjudicar su posición.
    • Manteniendo el CTR por encima de 10%. 
  • Ya deberían haberse realizado algunas conversiones, aunque no debe preocuparnos en exceso este punto ahora.
Día 10-15 (y ya periódicamente):
  • Revisión en "Términos de búsqueda" de las palabras no válidas, es decir, que serán negativas y las incluimos. 
    • Recordar que las palabras negativas también tienen concordancia  y es básico usarla.
  • Revisión en "Términos de búsqueda" de palabras válidas, es decir, que serán [exactas] y las incluimos.
    • Pocas en frase y ninguna en amplia.
  • CTR > 15%. Si baja...
    • Hacer el proceso cada día. 
    • Comprobar y eliminar posibles sinónimos en las palabras clave.
    • Atomizar más las palabras y los grupos de anuncios. 
 Día 30 (y ya periódicamente):
  • Entran a jugar las palabras en concordancia +amplia (con el +,  nunca solas) para poder darnos términos interesantes y no descubiertos hasta el momento. 
  • Vigilad las palabras en concordancia +amplia cada dia, a lo sumo cada dos.
  • Control del nivel de calidad, todas entre 7 y 10.
    • Si alguna baja de este nivel, monitorear y tratar de mejorarla (quizás creando un nuevo grupo de anuncios para ella), si no sube en 15 dias.... sacrificarla, ya podremos volver a ponerla cuando hayamos logrado el objetivo.
  • Las conversiones deben ser ya habituales, de lo contrario, deberíamos chequear cuál es el problema en nuestras landing pages.
  • CTR  siempre > 10% - 15%
Durante los siguientes 3 - 4 meses
Seguimos en este bucle que hace que el CPC vaya fluctuando dado que las palabras en concordancia [exacta] "tirarán" hacia abajo del CPC,  y las palabras en"frase" y +amplia, "tirarán" de él hacia arriba. No obstante, si se hace bien, y el Nivel de calidad se mantiene alto, la tendencia general del CPC es a la baja.
  • El CTR debe mantenerse entre el 15% y el 20% (o más).
  • Las conversiones ya deben ser comunes y periódicas.
  • Paramos las palabras en concordancia +amplia con Nivel calidad por debajo de 7/10.
  • Notaremos que el porcentaje de impresiones perdidas:
    • Por presupuesto, es "alto", quizás > 60%. no debe preocuparnos, por ahora.
    • Por ranking, es "bajo", alrededor de 5% - 8%.  Si es así, no hay problema, si es mayor, se está escapando CTR (Nivel de calidad) en algunas palabras. Arreglarlo.

Pasados los 5 meses:
Una vez tengamos la campaña "atada en corto", insisto "atada muy en corto":
  • Con CTRs mensuales de 15% a 20% (o más), 
  • Niveles de calidad 10/10, 9/10, 8/10 y 7/10(de estos muy pocos).... 
  • Conversiones periódicas y habituales. 
  • Y ya no aparezcan sorpresas en los "Terminos de búsqueda".
Es el momento : PASAMOS A GESTION DE CPC AUTOMÁTICA.

Si se ha hecho bien,  el resultado es ... francamente   IMPRESIONANTE.

Evolución CPC - CLICS

Evolución CPC / Posición Media


Evolución CPC/ CTR

Evolución CPC / Conversiones

Estas gráficas son ejemplos de una campaña "pequeña" con un presupuesto mensual de 360€, es decir, 12€ diarios.
No es condición imprescindible tener un alto presupuesto para aplicar esta estrategia. pero en campañas con presupuestos altos, al aplicar esta estrategia "el salto" es proporcionalmente "increíble" a su presupuesto.

RESULTADOS
  • Bajadas de CPC > 85%, con movimientos de CPCs que van (según campañas) desde
    • 0,55 a 0,07€
    • 1,8€ a 0,13€
    • 2,5€ a 0,19€
  • CPCs de 0,02 céntimos en términos generales, no marcas, ni dominios, sino términos generales.
  • Posición media bajando sólo unas décimas. Si es motivo de preocupación, lo dirá el % de conversiones.
  • Incremento de clics (buenos) en un 700% - 800%.
  • Las conversiones se multiplican por 5-6 o más !!!!! 
  • El porcentaje de impresiones perdidas baja a menos del 5%. Aunque esto también dependerá de otros factores.
  • El único punto "negativo" (que puede afectar al futuro de la estrategia) es que el CTR baja de más de un 20% a un +-11%.
    • Podeis pensar que "sigue siendo estratosférico", pues... mantenerlo arriba es lo más importante. 
    • Y debe cuidarse, "limpiando" continuamente la campaña, con diferentes estrategias para incrementar el CTR, no ya por CPC, sino por relevancia de palabra:
      • Trabajar o quitar palabras con niveles de calidad bajos.
      • Trabajar o quitar palabras con CTRs bajos (<11%).
      • Versiones de Anuncios con mayor relevancia.
      • Atomizar más los grupos de anuncios y palabras.
      • Customizar mejor las landing pages.


REFLEXIONES FINALES

Llegados a este punto, y solucionados los problemas de CPC ("gasolina" para la campaña), la mejora del ROI y un buen coste por Conversión debe ser el nuevo objetivo de campaña.
Hay que tener claro que tener un buen CTR sólo es el camino, no el objetivo.

En este post hemos obviado algunos puntos que no hemos considerado cruciales, aunque  requieren su estudio. Pero las líneas básicas aplicables a cualquier campaña están ahí para obtener resultados parecidos.

Hemos desarrollado e implantado esta estrategia en muchas campañas Adwords y TODAS funcionan igual de bien. El comportamiento es siempre el mismo.

Espero que este post os pueda ayudar en el desarrollo de vuestras campañas en Google Adwords.
¿Es la única manera de optimizar el CPC de una campaña de búsqueda?
¿Que estrategias utilizáis vosotros para ello?

miércoles, 29 de junio de 2011

Optimización de código javascript de los botones sociales. Mejorando tiempo de carga en web

Este es mi primer post, espero que le sucedan muchos más y que todos sirvan de utilidad a la comunidad que los lea.
Desde ahora mismo, mi agradecimiento por leerlos, así como por vuestras opiniones y comentarios.
Bien, vamos allá:
De entrada difícil ponerle título, yo le llamaría:
Mejora del tiempo de carga de una web, optimizando el código javascript de los diversos "botones sociales",  haciéndolo re-utilizable.

Objeto del post:
Cuando se añaden "botones sociales" a una web, se incluye código javascript que poco a poco retrasa su tiempo carga.
Esto puede llevar a una penalización en el SEO y en las posibles campañas SEM.
Recordemos que en ambos (SEO y SEM), el Tiempo de carga de una web es un factor a tener en cuenta.

El problema:
El otro dia, programando los llamados "botones sociales" (Buzz, Digg, Follow de Twitter, Like de Facebook, Google +1, etc) en la web de un cliente, nos dimos cuenta de un problema.
Todos los fabricantes de "botones sociales" (la mayoria), suministran un código javascript para "inyectarlo" allí donde se quiera ubicar el botón social correspondiente.

Veamos un par de ejemplos:
Código Buzz:
<a title="Publicar en Google Buzz" class="google-buzz-button"
href="http://www.google.com/buzz/post"
data-button-style="small-count" data-locale="es"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js">
</script>
Resultado:



Código Follow de Twitter:
<a href="http://twitter.com/WManagerService"
class="twitter-follow-button" data-lang="es">Follow @WManagerService</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js" >
</script>
Resultado:


Pero si lo programas/añades "tal cual" a la web, enseguida aparecen los problemas:
  1. Código javascript "desparramado, desordenado y duplicado" por dentro de la web en cantidad importante.
  2. El código javascript se ejecuta en el navegador del cliente cuando se detecta y eso relentiza el tiempo de carga de la web.
Hacia la solución, por partes:
Primero ponemos todos los scripts al principio de la página (en el <head>), ya que con sólo cargarlos una vez es suficiente, además, los tendremos ordenados y minimizaremos el problema 1.
<head>
...
...
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js">
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js" >
</script>
...
...
</head>
Siguiendo con el ejemplo de Buzz y Twitter, el resto de código, si que se debe ubicar allí donde tenga que aparecer el botón, repitiéndose en cuantas ocurrencias se deseen del mismo.
<a title="Publicar en Google Buzz" class="google-buzz-button"  
href="http://www.google.com/buzz/post"
data-button-style="small-count" data-locale="es">
</a>



y
<a href="http://twitter.com/WManagerService"
class="twitter-follow-button data-lang="es">
Follow @WManagerService</a>


Vale, genial, lo hacemos para todos los botones que queremos poner, que son muchos..... y...Problema 1 minimizado, pero el problema 2, principal objeto de este post, sigue allí.

Nota: Recordemos que el código de los botones sociales se componen de "2 partes", la carga del javascript (".js") y el código de ubicación, que se debe poner allí donde se desee aparezca el botón. Aquí vamos a tratar de optimizar el proceso de carga del ".js".

Buscando en Google como solucionar el problema del tiempo de carga de ficheros javascript (".js"), encontramos el sistema de carga asíncrona, es decir, el navegador lanza un proceso paralelo de carga del fichero javascript (".js"), mientras sigue con el proceso de carga general de la página web, al final todos confluyen y la página se carga completa. Perfecto, es lo que andamos buscando.

Veamos como es el código de carga asíncrono que aporta el propio Twitter:
<script type="text/javascript">
  (function(){
    var twitterWidgets = document.createElement('script');
    twitterWidgets.type = 'text/javascript';
    twitterWidgets.async = true;
    twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
    document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
  })();
</script>
Para Buzz seria algo así:
<script type="text/javascript">
  (function(){
    var buzzWidgets = document.createElement('script');
    buzzWidgets.type = 'text/javascript';
    buzzWidgets.async = true;
    buzzWidgets .src = 'http://platform.twitter.com/widgets.js';
    document.getElementsByTagName('head')[0].appendChild(buzzWidgets);
  })();
</script>
y así para cada "botón social"... bufff!, cuanto código!!!

Pero espera... este código me suena...

¿Esto no es lo mismo que el codigo asíncrono para Google analytics, que ya tenemos en la web?
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

No, no es lo mismo, pero se le parece....mmmmmm,  procedamos a su estudio:
Esta es la parte del código de Google Analytics que activa el proceso asíncrono de carga de sus rutinas ".js": 

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
Y esta la de Twitter:
<script type="text/javascript">
  (function(){
    var twitterWidgets = document.createElement('script');
    twitterWidgets.type = 'text/javascript';
    twitterWidgets.async = true;
    twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
    document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
  })();
</script>

No son iguales, pero, son muy parecidas, al fin y al cabo deben hacer lo mismo: Activar un proceso asíncrono para la carga de un fichero javascript (".js").

Entonces, si logramos hacer una función en lenguaje javascript para la "carga asíncrona de un fichero javascript" y la utilizamos para todos....podríamos:
  1. Limpiar/reducir código javascript .
  2. Minimizar el problema 2 (tiempo de carga).
Vamos a intentarlo:
<head>
...
...
<!-- Funcion general de carga asincrona  -->

<script type="text/javascript">
    function CreateAsyncProcess(url_process) {
         var AsyncProcess = document.createElement('script');
        AsyncProcess.type = 'text/javascript';
        AsyncProcess.async = true; 
        AsyncProcess.src = url_process;   
        document.getElementsByTagName('head')[0].appendChild(AsyncProcess); 
    }
</script>
...
...
</head>

Bien !!!. Veamos que tenemos:
  • Tenemos una sola función que podemos llamar cuantas veces se quiera (código re-utilizable).
  • Tenemos un parámetro por donde nos llega la url del ".js" a cargar desde el servidor que sea.
  • "Enganchamos" el proceso asíncrono que lanzamos, con el 'head' (última línea de la función), que es donde la tenemos definida, y es una etiqueta que siempre existe en el html.
Ahora debemos utilizar esta función y que "cuadre" con todos los "botones sociales" y ya de paso, con Google Analytics, Skype Contact button, Google Translator, etc.. (sí, ya lo sé, me gusta complicarme la vida).

Vamos a ello: 
<head>
...
...
<script type="text/javascript">

    function CreateAsyncProcess(url_process) {
         var AsyncProcess = document.createElement('script');
        AsyncProcess.type = 'text/javascript';
        AsyncProcess.async = true; 
        AsyncProcess.src = url_process;   
        document.getElementsByTagName('head')[0].appendChild(AsyncProcess); 
    }
//
-- Analytics --
    var _gaq = _gaq || [];  
    _gaq.push(['_setAccount', 'UA-XXXXX-X']); 
    _gaq.push(['_trackPageview']);
    CreateAsyncProcess((('https:' == document.location.protocol) ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');

//!-- Post on Digg --

   CreateAsyncProcess('http://widgets.digg.com/buttons.js');

//-- Post on Buzz --

  CreateAsyncProcess('http://www.google.com/buzz/api/button.js');
 

//-- Share on LinkedIn --
   CreateAsyncProcess('http://platform.linkedin.com/in.js');

//-- Like on Facebook -- 

  CreateAsyncProcess('http://connect.facebook.net/es_ES/all.js#xfbml=1');

//-- Follow on Twitter --

   CreateAsyncProcess('http://platform.twitter.com/widgets.js');

//-- Google +1 --

   CreateAsyncProcess('https://apis.google.com/js/plusone.js');

//-- Contact Skype --
 CreateAsyncProcess('http://download.skype.com/share/skypebuttons/js/skypeCheck.js');

//-- Google Translator-- 
   function googleTranslateElementInit() {
       new google.translate.TranslateElement({
           pageLanguage: 'es',
           includedLanguages: 'ca,es,en,de,fr,it,pt',
           gaTrack: true,
           gaId: 'UA-XXXXXX-X',
           floatPosition: google.translate.TranslateElement.FloatPosition.TOP_RIGHT
       }, 'google_translate_element');
    }
   CreateAsyncProcess('http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');

</script>
...
...
</head>

Nota: Volver a recordar que el código de los "botones sociales" (y los otros procesos) se componen de "2 partes", la carga del javascript (".js") y el código de ubicación, que se debe poner allí donde se desee aparezca el botón. Aquí estamos optimizando el proceso de carga del ".js".

Vamos a ver que tenemos...
  1. Código re-utilizable creando un proceso asíncrono para cada llamada que ejecutamos.
  2. La función de carga asíncrona de Analytics que ya teniamos implementada en la web, la hemos retocado y hemos comprobado que siga funcionando con Analytics.
  3. Hemos extendido su uso a la carga de todos los botones sociales, y otros procesos, que requieren una carga extra de ficheros ".js" desde sus servidores.
Nos ahorramos código javascript asíncrono duplicado y sigue funcionando todo.... ¡perfecto!.

Ahora, si lo que queremos es ir a por nota (SEO y SEM), lo mejor seria coger todo ese código javascript del <head>, y ponerlo en un archivo .js propio a parte del código html.
Para ello:
  1. Creamos un sudirectorio /js para ubicar allí el fichero (eso será bueno para SEO y SEM).
  2. En robots.txt ponemos un Disallow: /js/, ya que no nos interesa que los robots revisen este directorio.
  3. Todo el código javascript anterior, lo ponemos en un fichero llamado "scripts.js" (puede llamarse como se quiera). Lo sistematizamos de manera parecida a los CSS, es decir, con un fichero a parte (styles.css).
  4. Hay que recordar que a un fichero javascript (".js"), NO le hacen falta las etiquetas <script>...</script>,..  y que su sistema de comentarios es distinto al de html. 
  5. Hemos de preveer un posible fallo de carga del fichero, por lo que programamos la instrucción alert. La instrucción alert, sólo se ejecutará si la carga del fichero falla, por tanto, será correcto avisar...
Una vez hechos los pasos anteriores, se procede a su carga directamente con la instrucción:
<head>
...
...
<script type='text/javascript' language="javascript"
src='http://www.miweb.com/js/scripts.js'>
alert ('Error en fichero /js/scripts.js'); //Sólo se ejecuta si falla la carga.
</script>
...
...
</head>
Ya lo tenemos !!! 
Problema 2 solucionado (o al menos, minimizado)!!!
(y de "rebote" el problema 1 eliminado)

Finalmente, si quereis ver esto funcionando sólo teneis que entrar en nuestra web WebManagerService, y si quereis ver el código, desde el navegador pulsar el botón derecho y "Ver código fuente de la página" .

Espero que os haya gustado el artículo. Sólo me queda daros las gracias, ya que si habeis leido hasta aquí, es lo mínimo que puedo daros.

No dudeis en comentar, espero vuestros aportes.
¿Solucionariais el problema del tiempo de carga de los botones sociales de otra manera?