FORO SPAMLOCO


Script JavaScript y PHP. Rota banners según país (GeoIP)


HTML, CSS, PHP, JavaScript, Java... tus dudas por aquí...
   

Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor Alejandro » Ene 2015, 15:52

El siguiente código permite rotar banners según la IP del visitante, puede ser útil para optimizar campañas publicitarias o simplemente mostrar contenidos diferentes según el país.

Es 100% JavaScript por lo cual se puede utilizar en blogs como los de Blogger o cualquier página HTML. Más abajo también dejo el código para el rotador en PHP.

Se basa en una API desarrollada por Frederic Cambus (www.telize.com), es open source y se puede descargar para instalar en un servidor propio y así tener mayor control o mantenerlo en funcionamiento por si el sitio anterior es dado de baja.

Código JavaScript para rotar banners según el país:

Código: Seleccionar todo
<script type="application/javascript">
 $(document).ready(function() {
 $.getJSON("http://www.telize.com/geoip?callback=?",
 function(json) {
// si la IP es de España
 if (json.country_code === 'ES') {
// muestra banner para España
document.getElementById("banner").innerHTML='<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>';
 }
// si la IP es de Brasil
else if (json.country_code === 'BR') {
document.getElementById("banner").innerHTML='<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>';
}
// para el resto del mundo
else {
document.getElementById("banner").innerHTML='<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>';
   }
 }
 );
});
// ]]>
</script>
<div id="banner"></div>


En el ejemplo se mostraría en el mismo espacio un contenido para España (ES), otro para Brasil (BR) y un tercero para el resto de los países. Los códigos de dos letras para todos los países se encuentran aquí

Este script simplemente hay que pegarlo en el lugar donde se desean mostrar los banners, para que funcione es necesario cargar jquery, si no se utiliza entonces hay que agregar la siguiente línea dentro del head:

Código: Seleccionar todo
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>


Es todo JavaScript por lo cual se ejecuta directamente en el navegador del usuario, en el lugar donde se quieran rotar los banners se puede colocar el script completo del rotador o sólo el DIV con id=banner, el JavaScript también se puede cargar en el head, en el footer o de forma asíncrona para optimizar la carga del sitio.

Código PHP para rotar banners según país:

Con la misma api se puede hacer el rotador con PHP, el código quedaría así.

Código: Seleccionar todo
<?php

$var = file_get_contents('http://www.telize.com/geoip/'.$_SERVER['REMOTE_ADDR']);
$api = json_decode($var);

if($api->country_code == 'ES'){
?>
<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>
<?
}else if($api->country_code == 'BR'){
?>
<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>
<?
}else {
?>
<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>
<?
}

?>


8-)
Avatar de Usuario
Alejandro
Administrador
 
Mensajes: 4066
Registrado: May 2009, 18:28
Ubicación: Uruguay
Twitter: @spamloco



Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor elQuique » Feb 2015, 14:49

Muy bueno, gracias por compartirlo :)


(I'm back !)
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2227
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor jorgel » Feb 2015, 20:19

Hola alejandro, estoy hecho un lio, como hago para implementarlo en wordpress? Tengo que agregar el codigo php a functios.php? y si es asi como lo haria
jorgel
Nivel 1
 
Mensajes: 2
Registrado: Feb 2015, 20:15
Twitter: @

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor Alejandro » Feb 2015, 21:44

Hola jorgel, el código PHP puedes colocarlo por ejemplo en un widget de la barra lateral o al final de los post, en el lugar donde lo coloques se va a mostrar el banner según la IP.

Para ejecutar código PHP adentro de un Widget te recomiendo este plugin: https://wordpress.org/plugins/php-code-widget/ sin el plugin, en los widget sólo podrías ejecitar HTML/JavaScript.
Avatar de Usuario
Alejandro
Administrador
 
Mensajes: 4066
Registrado: May 2009, 18:28
Ubicación: Uruguay
Twitter: @spamloco

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor jorgel » Feb 2015, 23:57

Hola alejandro, todo muy bien entendido muchas gracias. Tengo otra pregunta: como hago para mostrar el mismo banner para varios paises seria algo asi? ($api->country_code == 'ES', 'AR' 'CO') o como seria
jorgel
Nivel 1
 
Mensajes: 2
Registrado: Feb 2015, 20:15
Twitter: @

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor Alejandro » Feb 2015, 23:45

Mmmm no, no sé, no lo he probado de esa forma.

Lo más sencillo es agregar más else if, uno nuevo para nuevo país y ahí colocar el código del banner aunque sea el mismo de otros países.

Por ejemplo:


Código: Seleccionar todo
<?php

$var = file_get_contents('http://www.telize.com/geoip/'.$_SERVER['REMOTE_ADDR']);
$api = json_decode($var);

if($api->country_code == 'ES'){
?>
<a href="http://www.spamloco.net"><img src="imagen1.jpg" /></a>
<?
}else if($api->country_code == 'AR){
?>
<a href="http://www.spamloco.net"><img src="imagen1.jpg" /></a>
<?
}else if($api->country_code == 'BR'){
?>
<a href="http://www.spamloco.net"><img src="imagen2.jpg" /></a>
<?
}else {
?>
<a href="http://www.spamloco.net"><img src="imagen.jpg" /></a>
<?
}

?>


En este ejemplo para España y Argentina se muestra lo mismo; para Brasil otro y para el resto del mundo otro diferente.

Con este otro código también puedes rotar varios banners al azar en una ubicación.
Avatar de Usuario
Alejandro
Administrador
 
Mensajes: 4066
Registrado: May 2009, 18:28
Ubicación: Uruguay
Twitter: @spamloco

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor juanvazquez » Abr 2015, 12:12

hola amigo gran aporte,
yo uso blogger solo que tengo ciertas dudas,
donde debo de poner mi codigo de banner? en que parte del script ya que no lo logro detectar soy algo nuevo y creo que esta duda la debemos tener varios.
ojala me puedas ayudar con el siguiente ejemplo de mis banners como debería quedar ya completo.

Código: Seleccionar todo
(mi banner para españa)
<a href="http://track.adtual.com/aff_c?offer_id=2810&aff_id=13618&file_id=99774" target="_blank"><img src="https://media.go2speed.org/brand/files/adtual1/2810/836_Amoory_ES_250x250.gif" width="250" height="250" border="0" /></a><img src="http://track.adtual.com/aff_i?offer_id=2810&aff_id=13618&file_id=99774" width="1" height="1" />

(mi banner para brasil)
<a href="http://track.adtual.com/aff_c?offer_id=2804&aff_id=13618&file_id=99902" target="_blank"><img src="https://media.go2speed.org/brand/files/adtual1/2804/836_Namorico_BR_250x250.gif" width="250" height="250" border="0" /></a><img src="http://track.adtual.com/aff_i?offer_id=2804&aff_id=13618&file_id=99902" width="1" height="1" />

(mi banner para el resto del mundo)
<a href="http://tc.tradetracker.net/?c=8236&amp;m=607757&amp;a=213904&amp;r=&amp;u=" target="_blank" rel="nofollow"><img src="http://ti.tradetracker.net/?c=8236&amp;m=607757&amp;a=213904&amp;r=&amp;t=html" width="250" height="250" border="0" alt="Mailrelay, email marketing" /></a>



otra cosa como arreglo eso del jquery o como y en donde y en que parte debo colocar la linea del head que pones ahi?
esta para ser muy claro:

Código: Seleccionar todo
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>



esto es lo único que le hace falta ami blog espero tu ayuda gran aporte y muchas gracias
juanvazquez
Nivel 1
 
Mensajes: 1
Registrado: Abr 2015, 11:33

Re: Script JavaScript y PHP. Rota banners según país (GeoIP)

Notapor Alejandro » Abr 2015, 22:48

En las líneas de código document.getElementById("banner").innerHTML debes colocar el tuyo cambiando únicamente lo que aparece entre las comillas simples.

Así: document.getElementById("banner").innerHTML=' AQUI TU CODIGO ';

Todo el resto debe quedar igual y lo vas cambiando según el país, si necesitas agregar más países sólo debes agregar más elementos "else if".

El script de jquery sólo lo debes agregar en la cabecera del blog, es decir justo antes del </head>
Avatar de Usuario
Alejandro
Administrador
 
Mensajes: 4066
Registrado: May 2009, 18:28
Ubicación: Uruguay
Twitter: @spamloco