- Mensajes
- 1,537
- Puntuación de reacción
- 0
Buenas,
en este tutorial voy a enseñarte a geolocalizar de manera simple y muy acertada (con esto quiero decir que no siempre va a acertar la ubicación del usuario, por ejemplo si navega a través de un proxy) los visitantes de tu web para mostrar los banners que correspondan así como hacer una redirección móvil.
Qué necesitas:
Notas:
Procedemos:
Lo primero vamos a hacer uso de la api GeoIP de Maxmind (https://www.maxmind.com), para ello necesitas cargar un archivo Javascript en tu web:
Así que ve a tu landing y preferiblemente antes de la etiqueta de cierre </body> pega el código de arriba.
Ahora cada vez que un usuario visite la página se cargará el script y ya sabrás de qué país proviene, éste archivo también proporciona otros datos como latitud, longitud, nombre del país, ciudad y alguno más, pero sólo interesa el código ISO-3166-2 (https://wikipedia.org/wiki/ISO_3166-2) del país, al que puedes acceder mediante la función de Javascript geoip_country_code().
Bien, una vez sabido esto nos queda construír una matriz `país -> anuncio a mostrar`, haremos una para móviles y otra para ordenadores. Si por ejemplo vas a trabajar con Adtual, Adjal u otra Ad Network que utilice HasOffers, el código ISO que necesitamos del país ya nos lo da.
La estructura de la matriz será la siguiente:
Es decir, una para móviles y otra para ordenadores, dentro de ellas puedes poner tantos países como quieras y también poner un 'default' como fallback, en caso de que el país desde el que nos visita no esté en la matriz.
Lo que continua es más dependiente de la web de cada uno, así que voy a suponer para este tutorial que tenemos una imagen en nuestra página tipo `Descargar` y que se identifica con `tutForo20`. Ej:
La imagen será para todos igual, pero al hacer click llevará a cada uno al anuncio que corresponda. Ahora toca un poco más de código:
Resumen, primero asegúrate de tener la imagen en tu web, después carga el script de Maxmind que indico arriba, y después del script pega lo que he explicado entre etiquetas <script>, que quedaría más o menos así:
Cualquier duda, que seguro habrá para aquel que no haya tocado código, me la preguntaís y la responderé en cuanto pueda.
Por otro lado si recibo muchos me agrada me esforzaré un poco más y haré un plugin para que sólo tengas que poner el/los id de cada bloque HTML en el que quieras que aparezca un link o anuncio.
Saludos!
en este tutorial voy a enseñarte a geolocalizar de manera simple y muy acertada (con esto quiero decir que no siempre va a acertar la ubicación del usuario, por ejemplo si navega a través de un proxy) los visitantes de tu web para mostrar los banners que correspondan así como hacer una redirección móvil.
Qué necesitas:
- Una web en la que puedas editar el HTML
- Una mínima fluidez para editar HTML y Javascript
Notas:
- El código que se marca como PHP no es PHP, es Javascript, lo pongo así para que se coloree.
- La detección de móviles no es 100% fiable, ya que se basa en detectar si el dispositivo tiene la capacidad de rotar la pantalla, por lo que también entran como móviles las tablets etc, cualquier dispositivo que pueda rotar la pantalla, hay otras técnicas para detectar si es un móvil pero ninguna más rápida que ésta.
- El código completo lo adjunto al final del tutorial, no vayas copiando cacho a cacho.
Procedemos:
Lo primero vamos a hacer uso de la api GeoIP de Maxmind (https://www.maxmind.com), para ello necesitas cargar un archivo Javascript en tu web:
HTML:
<script src="//j.maxmind.com/app/geoip.js" type="text/javascript"></script>Así que ve a tu landing y preferiblemente antes de la etiqueta de cierre </body> pega el código de arriba.
Ahora cada vez que un usuario visite la página se cargará el script y ya sabrás de qué país proviene, éste archivo también proporciona otros datos como latitud, longitud, nombre del país, ciudad y alguno más, pero sólo interesa el código ISO-3166-2 (https://wikipedia.org/wiki/ISO_3166-2) del país, al que puedes acceder mediante la función de Javascript geoip_country_code().
Bien, una vez sabido esto nos queda construír una matriz `país -> anuncio a mostrar`, haremos una para móviles y otra para ordenadores. Si por ejemplo vas a trabajar con Adtual, Adjal u otra Ad Network que utilice HasOffers, el código ISO que necesitamos del país ya nos lo da.
La estructura de la matriz será la siguiente:
PHP:
Mobile = {
'ES' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'DE' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'MX' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'AR' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'default' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}'
};
Desktop = {
'ES' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'DE' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'MX' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'AR' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'default' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}'
};Es decir, una para móviles y otra para ordenadores, dentro de ellas puedes poner tantos países como quieras y también poner un 'default' como fallback, en caso de que el país desde el que nos visita no esté en la matriz.
Lo que continua es más dependiente de la web de cada uno, así que voy a suponer para este tutorial que tenemos una imagen en nuestra página tipo `Descargar` y que se identifica con `tutForo20`. Ej:
HTML:
<img id="tutForo20" src="//:laurl.com/demiimagen.jpg">La imagen será para todos igual, pero al hacer click llevará a cada uno al anuncio que corresponda. Ahora toca un poco más de código:
- Vamos a detectar el país y si por alguna razón GeoIP no nos dice el país usaremos como fallback el lenguaje que el usuario tiene en su navegador.
- Detectaremos si el dispositivo es móvil u ordenador.
- Y por último provocaremos que al hacer click en la imagen el usuario vaya a la campaña correspondiente, o que si es un móvil, si lo queremos haga una redirección.
PHP:
var adImg = document.getElementById('tutForo20') // Cacheamos un 'puntero' hacia la imagen
, isMobile = (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1) // Detectamos si es un móvil
, mobileRedirection = true // True si queremos redirección móvil, del contrario cambiar por false
, country
;
try {
country = window.geoip_country_code(); //Comprobamos si GeoIP nos da un país
}
catch (error) { // Y en caso contrario sacamos el lenguaje del navegador como fallback
var lang = navigator.language || navigator.userLanguage;
for (var c in (isMobile ? Mobile : Desktop)) {
if ((new RegExp('-' + c + '$', 'i')).test(lang)) {
country = c;
break;
}
}
if (typeof country === undefined) {
country = 'default';
}
}
var ad = isMobile ? (Mobile[country] || Mobile['default']) : (Desktop[country] || Desktop['default']); // Cacheamos la url del anuncio
if (isMobile && mobileRedirection) { // Si es un móvil y queremos redirección redireccionamos
window.location = ad;
return void(0);
}
else
adImg.setAttribute('data-go', ad); // De lo contrario hacemos que al hacer click en la imagen se vaya a la url
adImg.onclick = function () {
window.location = adImg.getAttribute('data-go');
};Resumen, primero asegúrate de tener la imagen en tu web, después carga el script de Maxmind que indico arriba, y después del script pega lo que he explicado entre etiquetas <script>, que quedaría más o menos así:
PHP:
<script>
;(function (w, d, undefined) {
var adImg = d.getElementById('tutForo20') // Cacheamos un 'puntero' hacia la imagen
, isMobile = (typeof w.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1) // Detectamos si es un móvil
, mobileRedirection = true // True si queremos redirección móvil, del contrario cambiar por false
, country
;
Mobile = {
'ES' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'DE' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'MX' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'AR' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'default' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}'
};
Desktop = {
'ES' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'DE' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'MX' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'AR' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}',
'default' : 'http://track.adtual.com/aff_c?offer_id={xxx}&aff_id={xxx}'
};
try {
country = w.geoip_country_code(); //Comprobamos si GeoIP nos da un país
}
catch (error) { // Y en caso contrario sacamos el lenguaje del navegador como fallback
var lang = navigator.language || navigator.userLanguage;
for (var c in (isMobile ? Mobile : Desktop)) {
if ((new RegExp('-' + c + '$', 'i')).test(lang)) {
country = c;
break;
}
}
if (typeof country === undefined) {
country = 'default';
}
}
var ad = isMobile ? (Mobile[country] || Mobile['default']) : (Desktop[country] || Desktop['default']); // Cacheamos la url del anuncio
if (isMobile && mobileRedirection) { // Si es un móvil y queremos redirección redireccionamos
w.location = ad;
return void(0);
}
else
adImg.setAttribute('data-go', ad); // De lo contrario hacemos que al hacer click en la imagen se vaya a la url
adImg.onclick = function () {
w.location = adImg.getAttribute('data-go');
};
})(this, document, undefined);
</script>Cualquier duda, que seguro habrá para aquel que no haya tocado código, me la preguntaís y la responderé en cuanto pueda.
Por otro lado si recibo muchos me agrada me esforzaré un poco más y haré un plugin para que sólo tengas que poner el/los id de cada bloque HTML en el que quieras que aparezca un link o anuncio.
Así que si te ha gustado o servido de ayuda...
