El blog de LiveCommerce

Un blog de comercio electrónico y tiendas online

Tutorial: Añadir código de Conversiones de Google adwords en un formulario que envía los datos por AJAX

Tener un control sobre las conversiones es fundamental para saber si el gasto que hacemos en Google Adwords es rentable. Ir a ciegas no es recomendable. Supongo que a todo el mundo le gusta saber que resultados ha dado su campaña de publicidad. Google Adwords nos permite tener un control total sobre las conversiones que se producen en la web. Hay multitud de formas de decirle a Google que la acción que el usuario ha hecho sobre la web significa una conversión para nosotros. La forma más sencilla es la de añadir un pequeño código javascript en aquellas páginas que significan que el usuario ha generado una acción que nos interesa. Ejemplos:
  • Rellenar un formulario
  • Acabar el proceso de compra en el ecommerce.
  • Hacer clic en un teléfono
  • etc...
Si la respuesta a la acción es una página física que se carga después no hay problema. Si por el contrario la respuesta que recibimos (por ejemplo de un formulario) es por Ajax, no es tan sencillo. ¿Cómo cargamos el script de conversiones de Google Adwords si no hay una página dedicada de destino?

Vamos a verlo

Una vez recibimos la respuesta Ajax del servidor debemos crear un nodo iframe que contenga un atributo src que apunte a una URL que cargará el código javascript de conversión. Vamos a poner el ejemplo que utilizamos en nuestro formulario de pide presupuesto de ecommerce: Una vez tenemos la respuesta de la petición ajax conforme el formulario ha sido enviado correctamente debemos injectar un iframe en el HTML de la página. Existen varias formas de hacerlo, seguidamente os mostramos una de ellas. Con este simple código javascript lo conseguimos:
var ppcconversion = function() { var iframe = document.createElement('iframe'); iframe.style.width = '0px'; iframe.style.height = '0px'; document.body.appendChild(iframe); iframe.src = 'URL_QUE_CONTIENE_EL_CODIGO_DE_SEGUIMIENTO';};ppcconversion();
Reemplazar la variable URL_QUE_CONTIENE_EL_CODIGO_DE_SEGUIMIENTO por la url que contiene el código javascript de Google Adwords. Pongamos un ejemplo completo para un formulario que se envía por javascript:
$('#form').submit(function(){ e.preventDefault(); var $form = $(this); $.ajax({ url: $form.attr('action'), dataType:'json', type:'post', data:$form.serialize(), success:function(JSON){ $('body').append(JSON.codeIframeInjection) } });});
Donde la variable JSON.codeIframeInjection contiene el código javascript a la llamada ppcconversion(). Si tenéis alguna consulta no dudéis en preguntar.
Compártelo:

¿Tienes alguna consulta?

Si tienes alguna pregunta o sabes la respuesta sobre algún comentario, no dudes en contribuir.
Responderemos rápidamente.
Puedes utilizar etiquetas BBCode para escribir negrita, enlaces, imágenes, etc...
Más información en la página oficial de BBCOde http://www.bbcode.org/ Ejemplo:
[url=http://google.com]links[/url], [color=red]colores[/color] [b]negrita[/b]...

¿Has visto los videos en nuestro canal de Youtube?

En nuestro canal de Youtube publicamos periódicamente mejoras y funcionalidades del software de ecommerce.