Hace unos días para el laburo tuve que insertar un adword conversión tag para poder registrar las conversiones de una campaña de adword.
Más alla de que no tenia idea como funcionaba porque ni sabia que existia tal cosa, me puse a investigar mas o menos que era ésto del adword conversión tag y ver como poder insertarlo en un formulario de contacto en un wordpress usando Contact 7 (ya estaba hecho en eso, y no se podía cambiar).
La cosa es que el tag de adword se debe poner cuando uno quiere registrar una conversion exitosa de la campaña, en éste caso, cuando uno llega a la pagina y hace una reserva. Contact 7, como casi todos los forms, son complicados para hacer ése paso, generalmente muestran un mensaje de “gracias por enviar su consulta” cuando ya mandaron el mail, que no siempre podes modificar y que probablemente no pueda tener cosas raras. Por suerte Contact 7 si. Contact 7 tiene una aditional option llamada “on_sent_ok” que bypasea todo lo que tenga que hacer una vez mandado el mail, y simplemente hace lo que vos le digas después de ese tag. Éso significa casi cualquier cosa, en éste caso vamos a escribir javascript.
Siguiendo con Adword, Google recomienda usar el tag de conversión en una pagina separada, en donde pones el mensaje que quieras poner, junto con el <script> que ellos te dan, eso hacía que no se pueda embeber directamente en el “on_sent_ok” de contactform, porque simplemente no iba a hacer nada. Entonces se nos (estaba intentando resolverlo con un amigo) ocurrió usar un lightbox. Un lightbox es esa ventana re-cheta que aparece en el centro de la ventana del navegador para, por ejemplo, mostrarte una imagen. Pero nosotros queríamos mostrar un archivo html, que contenga el <script> de conversión. Para eso encontré shadowbox, es un muy buen sistemita javascript que logra lightboxes muy configurables para embeber cualquier cosa que se te ocurra. Nosotros usamos la opcion de meter un iframe, con el html que contiene el mensaje de “gracias por enviar el formulario” y el script de conversión.
Para eso, primero descargué shadowbox y lo copié en algún lado de mi wordpress. Luego incluí el .css shadowbox, en el header del wordpress.
<link rel="stylesheet" type="text/css" href="[a donde sea tengas el directorio shadobox]/shadowbox.css">
Luego, generé el html que muestra el mensaje y tiene el <script> de adword (Quizás quieran que ésta pagina valide)
<html><body><h1>gracias!</h1>[Script que te da google]</body></html>
Y al final, agrego un par de lineas al formulario de contact 7. en la ventana del formulario al que queremos agregarle el html
[Formulario original]
<script type="text/javascript" src="[a donde sea tengas el directorio shadobox]/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({ players: ["iframe"] });
function doOkSent(){Shadowbox.open({player: 'iframe',content:'[link al html que generamos antes]', height: 300, width: 500});}
</script>
De mas está decir que ésto se puede modificar a ajustar a sus necesidades leyendo las docs de shadowbox, pero ese paso se los dejo a Uds.
Finalmente, para hacer que el formulario ejecute el lightbox cuando apretan el boton SEND, se agrega casi al final de la ventana de contact7 en el campo “Aditional Settings”
on_sent_ok:"doOkSent();"
Y listo, cuando apretenden SEND van a ver el lightbox con el html embebido
Me costó *mucho* encontrar una solución a éste problema, y de hecho no la encontré, asi que tuve que inventar. Dejo para que la usen Uds, y si tienen otra solución avisen.