Hacer que Contact Form 7 trabaje con el codigo de tracking de conversión de google (adwords conversion tracking)

Resulta complicado con tanto cambio en google, ya que hace que la mayoría de la documentación en blogs esté desactualizada. De hecho quien sabe si mientras lees esto ya no funciona!! 😉 Google ha actualizado recientemente el código de JavaScript que te brinda cuando creas un evento de conversión. El Formulario de contacto 7 también ha desaprobado la compatibilidad con la antigua forma en que solía manejarlo, con la pestaña de configuración avanzada añadiendo on_submit: “goog_report_conversion(window.location.href);”.

Los pasos a seguir actualmente para obtener métrica de conversiones en los formularios del plugin wordpress Contact Form 7 son:

CREAR UN CÓDIGO DE CONVERSION (TRACKING CODE) EN TU PLATAFORMA ADWORDS:

Esto es bastante simple, imagino que ya has hecho esto si estás leyendo esta página. No obstante, se verá algo como esto:

<!– Event snippet for <mi conversion>
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. –>
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != ‘undefined’) {
window.location = url;
}
};
gtag(‘event’, ‘conversion’, {
‘send_to’: ‘<your adwords code>’,
‘event_callback’: callback
});
return false;
}
</script>

Este codigo debe ser copiado en cada formulario de contacto (al final)

AÑADIR FUNCION A NUESTRO WORDPRESS

A continuación añadiremos una funcion a nuestro wordpress (en el archivo functions.php, al final de todo el código, por ejemplo):

add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );

function mycustom_wp_footer() {
?>
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
gtag_report_conversion();
}, false );
</script>
<?php
}

Y con esto tus conversiones ahora deberían rastrearse y no es necesario hacer nada en la sección avanzada del formulario. La función creada en functions.php solo enviará el formulario cargado en el DOM cuando se haga clic en el botón Enviar.

NOTA: Si hay más de un formulario cargado en la página (con una ID diferente y cosa no habitual por otra parte) deberas modificar la funcion que has añadido a WordPress en functions.php

 

Cambiar el boton de cerrar de los interstitial en Revive Adserver

El boton de cerrar, que en revive adserver suele venir por defecto es insignificantemente pequeño (supongo que para que el usuario no lo vea… y se coma todo el intersitial el tiempo establecido…)

Para modificar el tipo de boton, podemos encontrar aproximadamente sobre la linea 228 (linea arriba, linea abajo) del archivo:

‘plugins/invocationTags/oxInvocationTags/layerstyles/simple/layerstyle.inc.php’

La linea es un trozo de la tabla que muestra el banner:

<td’.($nobg == ‘t’ ? ” : ‘ bgcolor=”#’.$backcolor.'”‘).’ align=”right” style=”padding: 2px”><a href=”javascript:;” onClick=”MAX_simplepop_’.$uniqid.'(\’close\’); return false;” style=”color:#0000ff”><img src=”‘.$imagepath.’cerrar.pngwidth=”40″ height=”40″ alt=”Close” border=”0″></a></td>

Como se vé, podremos indicarle o bien la ruta o dejar el path donde se almacenan los banner (y copiar ahi nuestro botón..) el nombre del archivo y además , darle una altura y anchura deseada.

el imagepath se refiere  la carpeta que vosotros teneis definida o que defina revive adserver, y dentro de ella existirá unas subcarpetas layerstyles/simples, donde está el close.gif original. Ahi debeis copiar vuestro archivo.

Aquí os dejo el boton que estoy usando, a peticion de uno de mis clientes, para cerrar los intersitiales. 

Display Properties de Bootstrap 4. Equivalencias con el antiguo .hidden-* de la versión anterior

Esta es una tabla de equivalencias de Bootstrap 4 para las propiedades de visualización del framework (Bootstrap 4 Display Properties)

De acuerdo con la documentacion, desde la beta 1 se ha mandado a paseo (ya se avisaba…) las utilidades responsive de la Alpha (Responsive Utilities) (concretamente las clases .hidden-* entraban en conflicto con el método hidden() de jQuery.

Parece que esa documentación, además de escasa, da bastante a confusión, doy fe… ya que vengo de Bootstrap 3 y he decidido usar al fin  Bootstrap 4 en nuevos proyectos, por lo que incluso, el que haya usado ya las versiones Alpha se verán con el mismo problema.

El concepto ahora, no es que sea mas o menos simple, pero si antes con un .hidden-* solucionabas, ahora requerirás mas de una clase .d-* para obtener el mismo resultado.

A falta de una mejor explicacion en la documentación y a modo de chuleta, este cuadro te (me) ayudará a resolver esos casos en los que, viniendo de bootstrap 3 o de las versiones alpha de Bootstrap 4, te encontrarás que hidden-*, etc ya no existe:

 Clase BS3 XS

(<544px)

SM

(≥544px – <768px)

MD

(≥768px – <992px)

LG

(≥992px – <1200px)

XL

(≥1200px)

Clase BS4 equivalente
hidden-xs-down Oculto Visible Visible Visible Visible d-none d-sm-block
hidden-sm-down Oculto Oculto Visible Visible Visible d-none d-md-block
hidden-md-down Oculto Oculto Oculto Visible Visible d-none d-lg-block
hidden-lg-down Oculto Oculto Oculto Oculto Visible d-none d-xl-block
hidden-xl-down Oculto Oculto Oculto Oculto Oculto d-none
hidden-xs-up Oculto Oculto Oculto Oculto Oculto d-none
hidden-sm-up Visible Oculto Oculto Oculto Oculto d-sm-none
hidden-md-up Visible Visible Oculto Oculto Oculto d-md-none
hidden-lg-up Visible Visible Visible Oculto Oculto d-lg-none
hidden-xl-up Visible Visible Visible Visible Oculto d-xl-none
hidden-xs (solo) Oculto Visible Visible Visible Visible d-none d-sm-block
hidden-sm (solo) Visible Oculto Visible Visible Visible d-block d-sm-none d-md-block
hidden-md (solo) Visible Visible Oculto Visible Visible d-block d-md-none d-lg-block
hidden-lg (solo) Visible Visible Visible Oculto Visible d-block d-lg-none d-xl-block
hidden-xl (solo) Visible Visible Visible Visible Oculto d-block d-xl-none
visible-xs (solo) Visible Oculto Oculto Oculto Oculto d-block d-sm-none
visible-sm (solo) Oculto Visible Oculto Oculto Oculto d-none d-sm-block d-md-none
visible-md (solo) Oculto Oculto Visible Oculto Oculto d-none d-md-block d-lg-none
visible-lg (solo) Oculto Oculto Oculto Visible Oculto d-none d-lg-block d-xl-none
visible-xl (solo) Oculto Oculto Oculto Oculto Visible d-none d-xl-block

RESUMEN:

  • ‘hidden-xs-down’ = ‘d-none d-sm-block’
  • ‘hidden-sm-down’ = ‘d-none d-md-block’
  • ‘hidden-md-down’ = ‘d-none d-lg-block’
  • ‘hidden-lg-down’ = ‘d-none d-xl-block’
  • ‘hidden-xl-down’ = ‘d-none’ (siempre oculton)
  • ‘hidden-xs-up’ = ‘d-none’ (siempre oculto)
  • ‘hidden-sm-up’ = ‘d-sm-none’
  • ‘hidden-md-up’ = ‘d-md-none’
  • ‘hidden-lg-up’ = ‘d-lg-none’
  • ‘hidden-xl-up’ = ‘d-xl-none’
  • ‘hidden-xs’ (solo) = ‘d-none d-sm-block’ (igual que ‘hidden-xs-down’)
  • ‘hidden-sm’ (solo) = ‘d-block d-sm-none d-md-block’
  • ‘hidden-md’ (solo = ‘d-block d-md-none d-lg-block’
  • ‘hidden-lg’ (solo) = ‘d-block d-lg-none d-xl-block’
  • ‘hidden-xl’ (solo) = ‘d-block d-xl-none’
  • ‘visible-xs’ (solo) = ‘d-block d-sm-none’
  • ‘visible-sm’ (solo) = ‘d-none d-sm-block d-md-none’
  • ‘visible-md’ (solo) = ‘d-none d-md-block d-lg-none’
  • ‘visible-lg’ (solo) = ‘d-none d-lg-block d-xl-none’
  • ‘visible-xl’ (solo) = ‘d-none d-xl-block’

Cómo extraer todas las imagenes de un archivo de Microsoft Word

Muchas veces me han dado ganas de estrangular a alguien (no en el sentido literal) cuando he recibido un dossier en word, con muchas fotos, que luego tengo que usar en galerías de imágenes, y extraerlas una a una es un proceso tedioso y engorroso.

Cómo  extraer todas las imagenes de un archivo de Microsoft Word no puede ser mas sencillo. Tanto que ni me di cuenta de esa posiblidad.

Basta con guardar el archivo como página web y el propio Word se encargará de montarte un html, si, pero con una carpeta que contendrá todas y cada una de las imagenes, numeradas por orden de aparación (algo es algo…) y en su formato original insertado en el documento!

Los Mejores Themes WordPress Gratuitos del 2014

¿Sabías que WordPress ahora supone el 23% de todos los sitios web en Internet? No es de extrañar, este CMS de código abierto es muy extensible y tiene una gran comunidad de productores de temas y plugins. El resultado es que se puede construir casi cualquier sitio con WordPress.

Leer másLos Mejores Themes WordPress Gratuitos del 2014

Desactivar la concatenación de archivos javascript del core WordPress

Para hacer un área de administración mas rápida, WordPress concatena todos los archivos Javascript en una sola URL.

En ocasiones, bien sea por algún plugin que provoca incompatibilidades, o bien por llamadas a estos archivos desde themes child o funciones de nuestra plantilla, vemos como los efectos drag&drop y otros, como los usados en las zona de widgets o creación de menús, realmente necesarios para la gestión de los mismos, desaparecen.

Si Javascript empieza a fallar en el área de administración, puedes probar a deshabilitar dicha concatenación añadiendo esta linea en tu wp-config.php:

define( 'CONCATENATE_SCRIPTS', false );

 

Eliminar miniaturas generadas automáticamente por WordPress

thumbnailsperdidos

Al cambiar a lo largo del tiempo los temas (themes) de WordPress, los cuales utilizan, una variedad tamaños a la hora de generar sus miniaturas, las carpetas wp-content/uploads/año/mes/ puede versa repleta de cantidad de imágenes repetidas a diversos tamaños, que nunca mas serán usados por el último theme instalado o creado.  Una manera fácil de deshacerse de esas imágenes abandonadas es eliminarlos y luego regenerar los que realmente necesita el theme actual. 

MOSTRAR TODAS LAS MINIATURAS GENERADAS AUTOMATICAMENTE:

cd /home/example/public_html/wp-content/uploads
find . -regextype posix-extended -regex ".*-[:digit:]{3}x[:digit:]{3}.(jpg|png)" -type f
cd /home/example/public_html/wp-content/blogs.dir
find . -regextype posix-extended -regex ".*-[:digit:]{3}x[:digit:]{3}.(jpg|png)" -type f

BORRAR TODAS LAS MINIATURAS GENERADAS AUTOMATICAMENTE:

cd /home/example/public_html/wp-content/uploads
find . -regextype posix-extended -regex ".*-[:digit:]{3}x[:digit:]{3}.(jpg|png)" -type f -exec rm {}  \;
cd /home/example/public_html/wp-content/blogs.dir
find . -regextype posix-extended -regex ".*-[:digit:]{3}x[:digit:]{3}.(jpg|png)" -type f -exec rm {} \;

Una vez borradas todas las miniaturas necesitaremos usar un plugin como Regenerate Thumbnails, que sólo volverá a regenerar las miniaturas que el theme instalado haya especificado.

Trasladar una tienda Prestashop de un hosting/dominio a otro

Prestashop a partir de 1.4/1.5

Los pasos a seguir para conseguir esta tarea son los siguientes:

1. Realizar backup de la base de datos de la tienda que se desea migrar:
mysqldump -u [usuario] -p -a [nombre_de_la_bd] > /ruta/backup.sql

2. Copiar los ficheros de nuestra tienda a la nueva ubicación.

3. Abrir el fichero /nueva_ubicacion/config/settings.inc.php y editar las líneas correspondientes a la definición de las variables __PS_BASE_URI_, _DB_NAME_, _DB_SERVER_, _DB_USER_ y _DB_PASSWORD_ para que se ajusten a la nueva ubicación y a la nueva base de datos.

4. Crear una nueva base de datos vacía e importar en la misma el backup previamente realizado.
mysql -u [usuario] -p -D [bd_nueva] < /ruta/backup.sql

5. Dar permisos al usuario designado en el paso 3 para que tenga acceso total a la nueva base de datos
grant all on [bd_nueva].* to [usuario]@localhost identified by "[contraseña]";
donde [usuario] y [contraseña] deben coincidir con los datos introducidos en el fichero settings.inc.php del paso3.

6. Nota: Este punto sólo es válido para Prestashop 1.3. Para 1.4 y 1.5 lee más adelante, el apartado actualizado el 20/03/2013.
Editar el valor de la variable de configuración PS_BASE_URI en la base de datos, cambiándolo por el de la nueva ubicación, que debe coincidir con el valor dado a la variable __PS_BASE_URI_ en el fichero settings.inc.php del punto 3.
update ps_configuracion set value="[nueva_ubicación]" where name="PS_BASE_URI";

7. Eliminar los archivos de la tienda de la ubicación original, así como su base de datos asociada.

Y listo, ya tenemos nuestra tienda en la nueva ubicación. Por supuesto se presupone que en la nueva ubicación ya hay un servidor web con php y mysql levantados.

Estas instrucciones son válidas también para clonar una tienda. En este caso simplemente basta con omitir el paso 7, y si alojamos el clon en la misma máquina que la tienda original, no es necesario dar de alta un nuevo usuario/contraseña para gestionar la BD, por lo que en el punto 3 sólo habría que modificar los 2 primeros parámetros y el grant hacia la nueva BD debería darse al usuario antiguo.

Para migrar una BD de prestashop 1.5 es necesario realizar algunos cambios más:

  1. update ps_configuration set value="[nuevodominio.tld]" where name="PS_SHOP_DOMAIN" or name="PS_SHOP_DOMAIN_SSL";
  2. update ps_shop_url set domain="[nuevodominio.tld]",domain_ssl="[nuevodominio.tld]";
  3. Reemplazar en el .htaccess todas las referencias al antiguo dominio por el nuevo.

Si no se realizan estos cambios, la tienda nueva redireccionará a la URL de la tienda antigua.

Fuente: Existo

Separar archivos importados de WordPress

Generalmente me encuentro que cuando realizas una copia de seguridad de una base de datos WordPress de algun sitio con cierto recorrido, la base de datos ocupa generalmente más de lo que el propio servidor permite que importes de nuevo, en caso de problemas.

Para esos casos y siempre que no tengas acceso ssh a tu servidor puedes usar un software separador o splitter de archivos XML en las “megas” que tu consideres cada uno e importar uno a uno dichos archivos.

wxr-splitter

Solucion OSX: WXR File Splitter

wxr-file-splitter

Solución Windows: WordPress WXR File Splitter

Solucion Linux: comando  xml_split (+info)

 

Mudar un WordPress de hosting/dominio

Al desarrollar proyectos sobre WordPress suelo hacerlo en mi hosting personal, con acceso restringido y no indexando durante el desarrollo, para luego trasladarlo o migrarlo al hosting o alojamiento / dominio del cliente una vez finalizado dicho desarrollo. Voy a tratar de relatar paso a paso lo que debemos hacer para trasladar de manera correcta todo el proyecto.

En primer lugar copiamos todo el contenido de archivos de nuestro servidor a el nuevo dominio via FTP, todo el sistema wordpress con sus plugins y plantilla. Recomiendo No copiar o modificar el archivo wp-config.php de nuestro sistema antes de copiarlo. Para ello debes descargar todo el contenido en tu equipo local, para luego re-subirlo a el nuevo hosting.

Aparentemente si accedemos al nuevo dominio veremos que todo funciona a la perfección, hasta que te percatas que lo que esta haciendo es acceder a nuestra base de datos de pruebas, y por consiguiente a nuestro dominio. Yo personalmente recomiendo no copiar o modificar el archivo wp-config.php de nuestro sistema antes de copiarlo para que esto no suceda, para proteger así nuestras contraseñas personales si fuera el caso.

El problema es que WordPress guarda las direcciones de forma absoluta, en la base de datos. Con lo cual debemos también trasladarla y modificarla en el nuevo hosting/dominio.

En estos pasos se sobre-entiende que el dominio/hosting del cliente ya esta operativo y conocemos los accesos a phpmyadmin de ambos servidores (antiguo/nuevo).

phpmyadmin-wordpress-database

En el phpmyadmin de nuestro antiguo servidor, usaremos la pestaña EXPORTAR seleccionando TODAS LAS TABLAS  y en el apartado Estructura marcar la opcion “add DROP TABLE / VIEW / PROCEDURE / FUNCTION”

2

Después marcaremos la opción de grabar como archivo y elegimos la compresión que mas nos guste, con lo cual generara una copia en nuestro equipo local de toda la base de datos.

3

Importamos ahora desde el phpmyadmin del nuevo alojamiento usando la pestaña IMPORTAR y seleccionando el archivo de la base de datos exportada en nuestro equipo local. Este paso es mas sencillo y tampoco merece mas explicaciones…

4

Ya tenemos archivos y base de datos en el nuevo alojamiento, ahora debemos editar el archivo wp-config.php para modificar o añadir si  los hubieramos borrado los datos de acceso a la base de datos recien importada ya que puede no tener el mismo nombre, usuario y contraseña, incluso el host puede variar:

// ** Ajustes de MySQL. Solicita estos datos a tu proveedor de alojamiento web. ** //

/** El nombre de tu base de datos de WordPress */

define('DB_NAME', 'nombredelabasededatos');

/** Tu nombre de usuario de MySQL */

define('DB_USER', 'usuariodelabasededatos');

/** Tu contraseña de MySQL */

define('DB_PASSWORD', 'passworddelabasededatos');

/** Host de MySQL (es muy probable que no necesites cambiarlo) */

define('DB_HOST', 'localhost');

Antes de probar el nuevo sitio, debemos realizar unas modificaciones que permitiran a el nuevo hosting acceder correctamente a el nuevo dominio. Para ello usaremos la solapa SQL del nuevo phpmyadmin con las siguientes consultas de actualización:

nota: el nombre de la tabla puede variar y además es conveniente por motivos de seguridad (por ejemplo, en lugar de wp_options podria ser pepe_options…)

En primer lugar actualizamos la nueva URL del sitio al nuevo dominio:

UPDATE wp_options SET option_value = 
replace(option_value, 'http://www.miantiguodominio.com', 'http://www.nuevodominio.com') 
WHERE option_name = 'home' OR option_name = 'siteurl';

A continuacion buscamos coincidencias dentro de los post que hagan referencia al antiguo dominio para tambien actualizarlo.

UPDATE wp_posts SET guid = replace(guid, 'http://www.miantiguodominio.com',
 'http://www.nuevodominio.com');

Después remplazamos todos los enlaces que tenga el contenido, para no tener errores 404.

UPDATE wp_posts SET post_content = 
replace(post_content, 'http://www.miantiguodominio.com', 
'http://www.nuevodominio.com');

No nos olvidemos de las posibles referencias de los campos personalizados en caso de usarlos en nuestro proyecto:

UPDATE wp_postmeta SET meta_value = 
replace(meta_value, 'http://www.miantiguodominio.com', 
'http://www.nuevodominio.com')

Con estas “queries” debería ser suficiente, aunque en algunos casos me ha sucedido que algún plugin usa direcciones de forma absoluta con lo cual toca modificar la tabla en concreto, lo mejor es hacer una búsqueda en toda la base de datos con la cadena “www.miantiguodominio.com” desde la solapa BUSCAR y phpmyadmin nos indicará qué tablas de la base de datos y cuantas coincidencias existen en cada una de ellas, con lo cual te facilita mucho el modificarlas.

 

Cuando las tablas html no se adaptan a los span de bootstrap

En el ultimo proyecto web decidí usar bootstrap como base del theme wordpress a realizar y lo cierto es que tengo que agradecer a Pelayo Maojo su descubrimiento, creo que tras g960, este framework ademas de popular tiene una curva de aprendizaje similar a 960gs.

Trabajando con tablas me encontré con un problema, estas no se adaptan segun que media queries a el ancho “pactado” por los class=”spanX” de bootstrap, a lo que encontré una solución css rapida y que funciona en todos los navegadores.

Basta con añadir a la class o id de tu tabla:

.mitabla {
table-layout: fixed;
word-wrap: break-word;
}

y las tablas se ajustan al/los “span” sin problemas.