Medir cuántos usuarios hacen click para ampliar la imagen en Google Imágenes, aunque no entren en nuestra web

Publicado por Lino Uruñuela el 20 de febrero del 2018

El otro da Google hizo un cambio importante del inteface en su buscador de imágenes, eliminando el botón de ver imagen y respondiendo así a la demanda antimonopolio que Getty Images realizó ante la Unión Europea.

Cómo era antes
Google elimina la opción de ver imagen


Y actualmente ha desaparecido la opción de "ver imagen"

Cómo es ahora
Google Imágenes antes


Supuestamente esto debería aumentar algo el tráfico orgánico proveniente de Google images, ya que habrá un porcentaje de usuarios, por pequeño que sea, qué querrá guardar esa imagen y para ello lo más sencillo con el nuevo diseño podría ser entrar en la web dónde está.

Antes el usaurio que quería guardar una imagen que estaba viendo en Google Imágenes lo tenía mucho más fácil, solo tenía que hacer click sobre el botón de "ver imagen" que enlazaba directamente a la imagen, por lo que luego el usuario podía hacer click en el botón derecho del ratón y descargar la imagen mendiante la opción "Guardar como"

No quiero extenderme mucho sobre este cambio ya que creo que no tendrá el gran impacto que algunos piensan, y porque tampoco parece que tenga, de momento, más implicaciones. Lo que sí me gustaría compartir con todos son dos cosas que se me han ocurrido a raíz de este cambio.

Imágenes en miniatura en Google Imágenes

Cuándo un usuario está navegando por Google Images está viendo imágenes que Google tiene guardadas en su caché, es decir, se cargan desde una copia que Google tiene guardada en sus propios servidores, estas imágenes suelen ser más pequeñas y de menor calidad que las originales.

Google sirve las imágenes en miniatura desde su caché




Si miramos el código fuente vemos como la imagen se carga desde los propios servidores de Google, y lo sirve embebiéndolo directamente en el código con base64

Imagenes alojadas en Google



Imágen ampliada al hacer click en Google Imágenes

Cuándo hacemos click en alguna de ellas, la imagen es ampliada, pero con una notable diferencia al ejemplo que hemos visto previamente con las miniaturas, esta imagen es cargada "al vuelo" desde el servidor de la página web que la contiene y no desde Google como hemos visto que hacía en las miniaturas.

Si miramos el código fuente al hacer click en la imagen ampliada, se puede ver cómo la imagen se carga directamente desde el servidor web que la contiene, en este caso mecagoenlos.com

imagen servida desde el servidor web


A esta manera de cargar las imágenes, usando un enlace a una imagen que está archivada en otro sitio web en lugar de guardar una copia de la imagen en el sitio web en el que se mostrará la imagen se le llama, hotlinking, hotlinking de toda la vida...

Google imagenes haciendo hotlinking


Al analizar los logs del servidor vemos cómo esas peticiones llegan justo al hacer click para ampliar en alguna imagen en Google Images.

logs google images


Hace unos años, cuándo hubo un verdadero cambio en el interface de Google Imágenes, comenté esto también y expuse los pros y contras de ello. Por entonces ya intenté hacer alguna prueba para intentar evitar justo lo que Google ahora está impidiendo, que un usuario pueda guardar la imagen sin ni siquiera tener que entrar en nuestra web para ello.

Ahora voy a compartir dos cosas que podemos aprovechar de este hotlinking que nos hace Google de nuestras imágenes para mostrarlas en su buscador.

Cómo medir cuántos usuarios hacen click para ampliar la imagen en Google Imágenes, sin entrar en nuestro site.

Cada vez que un usuario hace click para ampliar la imagen en Google Imágenes, se carga la imagen desde nuestro propio servidor cómo ya hemos visto, y por ello, y aunque el recurso solicitado sea una imagen, podemos hacer que cuándo sea cargada desde Google tratemos esa petición de una manera especial antes de servirla al navegador y ejecutar el código que creamos oportuno.

En este caso lo que haremos en ese fichero que tratará la petición es hacer una llamada a Google Analytics para crear un evento con los datos de la previsualización en Google Images (cuando el usuario hace click para ampliar la imagen), y posteriormente servir la imagen al usuario que está en Google.

Para realizar esto necesitamos

  1. Configurar el servidor para que las urls de imágenes (en este post solo lo haré para las imágenes png) y además tengan un referer que sea igual a www.google.es se procesen en un script concreto, en mi caso es preGoogleImages.php

    En mi caso uso Apache y php, por lo que desde el fichero htaccess, añadiendo estas líneas.

    RewriteCond %{REQUEST_FILENAME} .*png$ [NC]
    RewriteCond %{HTTP_REFERER} .*www.google.es.* [NC]
    RewriteRule (.*) preGoogleImages.php?src=$1

    De esta manera cualquier petición que se haga a una imagen .png y con referer igual a www.google.es será tratado por el fichero preGoogleImages.php
  2. Realizar la llamada a Google Analytics creando un evennto con los datos de la imagen.
    En este caso le voy asignar los siguientes valores:

    • Categoría del evento = "previsualiza Google Images".
    • Acción del evento = la url de la imagen.

El fichero preGoogleImages.php realizará lo siguiente

  1. Comprueba si el usuario tiene una cookie llamada "GoogleImages", si no la tiene la creará.
    Esta cookie la usaré para otro test que debo hacer, así que la podéis omitir.
  2. Realiza una llamada a Google Analytics mediante el protocolo de medición, enviando un evento con los valores antes mencionados

El contenido del fichero preGoogleImages.php es el siguiente

<?php
$src = $_GET['src']; 
if (!$_COOKIE["GoogleImages"]) {
		$imagen = $src; 
		setcookie("GoogleImages","coockie desde Google Images", time() + 31536000);
	}

class BotTracker  {
	
	static function track($s, $params){
		$bot = "";
			$data = array( 
				'v'	=> 1, 
				'tid'	=> 'UA-xxxxx-4',
				'cid'	=> self::generate_uuid(), 
				't'	=> 'event',
				'dt'	=> $params['page_title'], 
				'ck'	=> $s['HTTP_USER_AGENT'], 
				'uip'	=> $s['REMOTE_ADDR'],
				'ec'	=> "previsualiza Google Images",
				'ea'	=> $params['image_url'],
				'el'	=> "nada",
			);
			
			$url = 'http://www.google-analytics.com/collect';
			$content = http_build_query($data); 
	
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_USERAGENT, $s['HTTP_USER_AGENT']);
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 0);
			curl_setopt($ch, CURLOPT_CONNECTTIMEOUT_MS, 0);
			curl_setopt($ch, CURLOPT_TIMEOUT_MS, 0);
			curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/x-www-form-urlencoded'));
			curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
			curl_setopt($ch, CURLOPT_POST, 1);
			curl_setopt($ch,CURLOPT_ENCODING , "gzip");
			curl_setopt($ch, CURLOPT_POSTFIELDS, $content);
			$result = curl_exec($ch);
			$info= curl_getinfo($ch);
			curl_close($ch);
		}
		static private function generate_uuid() {
		
		return sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
			mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
			mt_rand( 0, 0xffff ),
			mt_rand( 0, 0x0fff ) | 0x4000,
			mt_rand( 0, 0x3fff ) | 0x8000,
			mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
		);
	}
}
header("Pragma-directive: no-cache");
header("Cache-directive: no-cache");
header("Cache-control: no-cache");
header("Pragma: no-cache");
header("Expires: 0");
header("Content-type: image/jpeg");
BotTracker::track($_SERVER, array("page_title"=>"imagen ".$src,"image_url"=>$src ));

imagejpeg
($image);  imagedestroy($image);  imagedestroy($watermark); ?>



Podemos corraborar que el código funciona de la siguiente manera:

  • Abrimr el informe en Tiempo Real de Google Analytics, y seleccionamos "Eventos"
  • Abre una ventana de incógnito
  • Realiza una búsqueda en Google Imágenes
  • Haz click para ampliar alguna de las imágenes de nuestro site pero SIN ENTRAR en el site
  • Comprobar en Google Analytics en tiempo real que se ha generado el evento


Verás cómo cada vez que haces click en una imagen en Google Imágenes, se lanza un evento sin que el usuario haya entrado siquiera en tu site.

Tracking Google Images


Con esto podemos contabilizar de alguna manera cuántos usuarios hacen click en nuestras imágenes estando en Google Imágenes, aunque el usuario no entre en nuestro site.

Lo ideal sería poder hacer el seguimiento cuándo el usuario entre en el site después de haber previsualizado la imagen a través de Google Imágenes, para ello deberíamos sobreescribir la fuente que Google le atribuye al usuario cuando entra, si este usuario contiene la cookie "GoogleImages" antes mencionada, pero esto será otro post ;)


Modificar la imagen ampliada que ve el usaurio en Google Imágenes

Cómo hemos visto anteriormente, podemos realizar acciones desde nuestro servidor cuándo identificamos que una imagen está siendo servida desde Google.es,

En el caso anterior hemos visto cómo enviar un evento a Google Analytics para medir los clicks que nuestras imágenes tienen en el buscador, pero ahora vamos a ir un paso más allá y añadiremos una capa a la imagen en la que el usuario ha hecho click y está visionando desde el buscador de imágenes de Google, es muy importante señalar que solo se mostrará esta capa extra si el usuario está navegando en Google Imágenes pero no saldrá cuándo navegue por nuestro site.

Para ello vamos crear una imagen semitransparente que será usada para superponerla a la original, de esta manera crearemos un mix entre las dos y esta imagen final será la que se mostrará el usuario cuando haga click para ampliar la imagen en Google Imágenes. En este ejemplo veremos como añadir una especie de marca de agua, esta concretamente.

Imagen a incrustar en Google Imágenes


Ahora vamos a añadir unas líneas al fichero "preGoogleImages.php" que teníamos antes

El contenido del fichero preGoogleImages.php es el siguiente, he tachado el código que ya hemos visto antes.

<?php
$src = $_GET['src']; 
if (!$_COOKIE["GoogleImages"]) {
		$imagen = $src; 
		setcookie("GoogleImages","coockie desde Google Images", time() + 31536000);
	}

class BotTracker  {
	
	static function track($s, $params){
		
		
			
			$bot = "";
			
			$data = array( 
				'v'	=> 1, 
				'tid'	=> 'UA-273162-4',
				'cid'	=> self::generate_uuid(), 
				't'	=> 'event',
				'dh'	=> $s['HTTP_HOST'], 
				'dl'	=> $s['REQUEST_URI'], 
				'dr'	=> $s['HTTP_REFERER'],
				'dp'	=> $s['REQUEST_URI'], 
				'dt'	=> $params['page_title'], 
				'ck'	=> $s['HTTP_USER_AGENT'], 
				'uip'	=> $s['REMOTE_ADDR'],
				'ec'	=> "previsualiza Google Images",
				'ea'	=> $params['image_url'],
				'el'	=> "n",
			);
			
			$url = 'http://www.google-analytics.com/collect';
			$content = http_build_query($data); 
	
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_USERAGENT, $s['HTTP_USER_AGENT']);
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 0);
			curl_setopt($ch, CURLOPT_CONNECTTIMEOUT_MS, 0);
			curl_setopt($ch, CURLOPT_TIMEOUT_MS, 0);
			curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/x-www-form-urlencoded'));
			curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
			curl_setopt($ch, CURLOPT_POST, 1);
			curl_setopt($ch,CURLOPT_ENCODING , "gzip");
			curl_setopt($ch, CURLOPT_POSTFIELDS, $content);
			$result = curl_exec($ch);
			$info= curl_getinfo($ch);
			curl_close($ch);
		}
		static private function generate_uuid() {
		
		return sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
			mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
			mt_rand( 0, 0xffff ),
			mt_rand( 0, 0x0fff ) | 0x4000,
			mt_rand( 0, 0x3fff ) | 0x8000,
			mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
		);
	}
	
	
	
	
	
}
header("Pragma-directive: no-cache");
header("Cache-directive: no-cache");
header("Cache-control: no-cache");
header("Pragma: no-cache");
header("Expires: 0");
header("Content-type: image/jpeg");
BotTracker::track($_SERVER, array("page_title"=>"imagen ".$src,"image_url"=>$src ));

//CODIGO PARA SUPERPONER LA MARCA DE AGUA

 $watermark = imagecreatefrompng('google-hotlinking.png');  $watermark_width = imagesx($watermark);  $watermark_height = imagesy($watermark);  $image = imagecreatetruecolor($watermark_width, $watermark_height);  if(eregi('.gif',$src)) { $image = imagecreatefromgif($src);  } elseif(eregi('.jpeg',$src)||eregi('.jpg',$src)) { $image = imagecreatefromjpeg($src);  } elseif(eregi('.png',$src)) { $image = imagecreatefrompng($src);  } else { exit("La imagen no es JPG, GIF o PNG");  }  $size = getimagesize($src);   imagefilter($image, IMG_FILTER_COLORIZE,10, 10, 10,10);  $dest_x = ceil($size[0]/2) - ceil($watermark_width/2) - 0;  $dest_y = $size[1] - $watermark_height - 0;   imagecopyresampled($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $watermark_width, $watermark_height);
//FIN CODIGO PARA SUPERPONER LA MARCA DE AGUA
imagejpeg
($image);  imagedestroy($image);  imagedestroy($watermark); ?>


Con esto conseguiremos que cuando un usuario, que se encuentre en Google Imágenes, hace click en una de las imágenes de nuestro site le aparezca la imagen original con una capa añadida que es la nueva imagen que hemos creado como marca de agua.

Hack Google Images



OjO:

Esta técnica puede retardar el tiempo de carga de la imagen, ya que se ejecutan tareas extra antes de enviar la imagen al navegador. Además podría ser que a Google no le gustase mucho, pero por el momento, y si cómo en este ejemplo condicionamos este comportamiento a peticiones a imágenes desde Google.es posiblemente no se verá afectado a la hora de ser evaluado por los algoritmos de Google, ya que Google cuándo accede a cualquier recurso de un sitio web suelen hacerlo sin pasar referer alguno y además casi siempre desde el .com y no desde el .es

Otros casos de uso

Con este método se me ocurren cosas que en muchos casos podría merecer la pena probar, por ejemplo

  1. "Obligar" entrar en el site para descargarse la imagen, o por lo menos que no pueda hacer un pantallazo.
    Se le podría añadir algún mensaje, si puede ser nejor que el que estoy usando en este ejemplo ;),  para incitar a los usuarios a entrar en el site.
  2. Dejar constancia de dónde se está obteniendo esa imagen.
    Los usuarios en el buscador de imágenes pocas veces le prestan atención al nombre del dominio dónde está alojada esa imagen. De esta manera al menos puedes meter una marca de agua, más o menos discreta.
  3. Incitar al usuario a entrar mediante un mensaje o datos relacionado a esa imagen.
    Por ejemplo si somos un ecommerce y sabemos que los usuarios potenciales usan el buscador de imágenes para buscar determinados productos, podríamos insertar "al vuelo" mensajes para incentivar el click y la compra, por ejemplo "Producto en oferta hasta el 21-02-2017" siendo esta la fecha del dia de actual que sea, ya que lo estamos generando en tiempo real. En este ejemplo el pprecio y el mensaje "Oferta valida hasta el 21-02-2018" serían los textos introducidos "al vuelo".

  4. Ejemplo de uso


Seguro que hay muchas maneras de mejorar este código y también otros casos de uso, así que si queréis, este es un sitio perfecto para compartirlo ;).

 




Posts anteriores en Google Analytics


Space Needle
Publicado el 24 de mayo del 2017, by Lino Uruñuela Muchas veces los SEOs usamos determinados protocolos y/o directivas para dar determinadas señales a los Bots de los buscadores y otros servicios. Así por ejemplo, podemos usar un meta para indicarles en qué fecha

Seguir leyendo
  • Lunes 13 de Abril del 2015
Space Needle
Publicado el 13 de abril del 2015 por Lino Uruñuela Hace tiempo ya comentamos que podemos saber cómo y cuándo acceden los robots de los buscadores a cada url de nuestro site por medio de los logs. Es muy importante tener visibilidad sobre qué y cómo crawlean

Seguir leyendo
Space Needle
Publicado el jueves 11 de septiembre por Lino Uruñuela Hoy voy a cambiar un poco de tema para variar, pero no me desviaré mucho. Si hay algo que me ha quedado claro en más de 10 años que llevo trabajando entorno a los negocios online , y que se viene cumpliendo co

Seguir leyendo
Space Needle
Publicado el 19 de agosto del, 2014 Hace ya "bastante" que salió a la luz Universal Analytics y ya nos ha dado tiempo a descubrir sus pros y sus contras con respecto a la anterior versión de Google Analytics. Y sí, también tiene contras, bastantes ademá

Seguir leyendo
Space Needle
Publicado por Lino Uruñuela (Errioxa) el 30 de junio del 2014 Hoy me he llevado una sorpresa cuando me he puesto a analizar el tráfico directo a raíz de que Rodrigo Hernandez me comentase su preocupación con el tráfico de un site , y es que normalmente suelo t

Seguir leyendo
Space Needle
Publicado por Lino Uruñuela (Errioxa) el 23 de abril del 2014 Como dijimos el otro día, vamos a crear una serie de post sobre cómo utilizar determinadas APIs que Google nos ofrece, ya que en ocasi

Seguir leyendo
  • Lunes 30 de Noviembre del -0001

Publicado el lunes  7 de octubre del 2013, by Lino Uruñuela Hoy me siento optimista, no sé si será porque ya estoy casi recuperado de la operación de rodilla a la que me sometí hace un mes, pero estoy optimista. Hace poco Google anunci&oacu

Seguir leyendo
Space Needle
Publicado el 4 de abril del 2013 by Lino Uruñuela Como todos sabemos desde hace más de un año el Not Provided cada vez aglutina más keywords en nuestras estadísticas y aunque aun podemos trabajar casi igual que hace dos años, no creo que podamos hacerlo d

Seguir leyendo
Space Needle
Publicado el 26 de enero del 2012 by Errioxa En el anterior post comenté cómo se podría sacar más provecho si cruzamos los datos que tenemos desde la distintas herramientas como Analytics, WMT, monotorización de posiciones. Así obtendríamos

Seguir leyendo
  • Martes 27 de Diciembre del 2011
Space Needle
Publicado el 27 de diciembre del 2011 El otro día desde el blog para webmasters de Google nos anunciaban que habían creado un script para poder descargar los datos de impresiones, clicks, CTR, etc desde WMT. La verdad lo acogí con gran ilusión pero de momento no le

Seguir leyendo
Space Needle
Publicado el miércoles 17 de agosto del 2011 , by Lino Uruñuela, Recordemos que con el nuevo método de Google Analytics de medir las visitas ahora para ver que impacto ha tenido la actualización de Google Panda, no puedes comparar visitas post-Panda con visitas pr

Seguir leyendo
Space Needle
Publicado el 8 ed agosto del 2001 El otro día ya comentamos que Google Analytics había cambiado la forma en que trataba el tráfico que llegaba desde Google Images y ya no lo tomaba como referencia sino como tráfico orgánico. Para mi es importante saber el

Seguir leyendo
Space Needle
Publicado el 27 de julio del 2011 Cualquier día la OMS va a declarar Google como posible factor de riesgo de infarto entre las personas que viven de internet. Y es que ahora desde el sábado Google no muestra las búsquedas desde Google Images como referencia y parece que lo ha

Seguir leyendo
  • Martes 10 de Mayo del 2011
Space Needle
Publicado el 10 de mayo del 2011, by Errioxa Parece que Google Analytics ha decidido aclarar a Joaquin Sabina quien le robó el mes de abril, Google Analytics. Prueba a hacer esto en Analytics, pon las fechas desde el 1 de marzo hasta la de hoy (por ejemplo...) y ve a fuentes de traf

Seguir leyendo
Space Needle
Publicado el jueves 5 de mayo del 2011, by Errioxa No sé si esto le ocurrirá a todo el mundo o si sólo me pasa a mi con la nueva interface de Google Analytics. Si vamos a Fuentes de Tráfico -> Fuentes de ingresos -> Organico    (por ejemplo) nos

Seguir leyendo

Últimos posts

Últimos comentarios


David Girona

Antes de Nada muchas gracias por la aportación. Estoy probando de poner en marcha este procedimiento y me surgen un par de dudas. En
Post: Cómo añadir el valor del meta Robots a Google Analytics via Google Tag Manager

Javier Espinoza

Gracias por la informacion!! Este tipo de blogs me parecen muy importantes, esto lo estudio en la universidad. gracias por la informacion. h
Post: Atacados por los .cn .cz .pl

juan

Hola Lino Uruñuela, una duda ¿aun funciona? porque no lo logro. Mira, en un index.php tengo este codigo: Camuflados
Post: Ofuscando enlaces para mejorar Link Juice

DUQUEredes

Google pasa del canonical bastante :-(
Post: Comprobando comportamiento de Google con meta canonical

Marinette

Gracias por la información!
Post: Nuevo Google Search Console ¿qué información nos ofrecerá?

Adolfo

Parece que a todo el mundo le ha gustado este artículo sexista y lleno de situaciones de agresión sexual y violencia de género, ya tendr
Post: Tipos de marketing

FDM

Hola, Lino: Genial el post, como siempre. Es genial contar con personas tan curiosas y que investigan al detalle el funcionamiento de Goo
Post: La segunda ola de indexación y cómo saber qué renderiza Google

Lino Uruñuela

@Cesar saltarse alguna orden del código es un falta de respeto!, que para algo lo hice :D No se les da muy bien esperar, su tiempo es or
Post: La segunda ola de indexación y cómo saber qué renderiza Google

César Aparicio

Hola Lino, Nos conocemos de películas como: Los de Google son muy frikis o Pasodobles y SEO. Mi cuestión es la siguiente: entiendo
Post: La segunda ola de indexación y cómo saber qué renderiza Google

Nostram

Porque será que no me extraña. No he visto un producto que funcione peor que "OK Google" lamentable.
Post: ¿Grave fallo de privacidad de Google Assistant?

Contacta

Lánzate y pregunta!


He leído y acepto la política de privacidad

Mecagoenlos.com te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Lino Uruñuela. como responsable de esta web.

La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para enviar un correo con los datos que introduzcas, sin guardarse en ninguna base de datos.

Legitimación: Al marcar la casilla de aceptación, estás dando tu legítimo consentimiento para que tus datos sean tratados conforme a las finalidades de este formulario descritas en la política de privacidad.

Como usuario e interesado te informamos que los datos que nos facilitas estarán ubicados en los servidores de Linode.com (proveedor de hosting de Mecagoenlos.com) cumpliendo la ley de protección de datos. Ver política de privacidad de Linode.com.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@mecagoenlos.com, así como el derecho a presentar una reclamación ante una autoridad de control. Más información aquí.