Cómo integrar formularios Salesforce con Google Analytics 4
Escrito por Luis Ruiz Actualizado el
Si buscas una forma eficiente de integrar tus formularios Salesforce con Analytics 4, aquí te enseñamos cómo hacerlo de manera rápida y fácil
Sumario
Los formularios de Salesforce suelen utilizarse en un «iframe» y no ofrecen una manera fácil de acceder a los datos de envío a través de su API, de la misma manera que lo hacen HubSpot y Marketo, con lo cual, Google Tag Manager no funcionará. Tampoco podremos acceder a los elementos a través de los selectores del DOM.
En la siguiente guía te muestro cómo realizar un seguimiento del evento de submit en un «iframe» de un formulario de Marketing Cloud Account Engagement ( MCAE) y Google Analytics 4. Si bien hay muchas variaciones posibles de esta solución, está garantizado que funcionará.
¿Por qué realizar un seguimiento de los formularios de Pardot en Google Analytics?
En Salesforce tenemos acceso al número de vistas que recibe un formulario, los clientes potenciales que envían el formulario, la tasa de conversión del formulario y la fuente inicial de clientes potenciales para nuestros prospectos.
Para algunos especialistas en marketing, estas métricas, pueden ser suficientes porque nos brindan los conocimientos necesarios para demostrar el rendimiento de la generación de prospectos.
Pero hay una razón por la que usamos Google Analytics 4 junto con Salesforce.
Google Analytics nos muestra más información sobre el rendimiento, la audiencia y la tasa de conversión general de nuestro sitio web, tanto en general, como de actividades o canales de marketing particulares.
Incluso, con una excelente configuración de Salesforce, Google Analytics GA4 es una herramienta vital para mejorar la experiencia del usuario de nuestro sitio, y los formularios son parte de esta experiencia.
La verdadera magia está en usar GA4 y Marketing Cloud Account Engagement ( MCAE) en conjunto para rastrear el tráfico y el comportamiento del sitio web, y el rendimiento de la forma y generación de clientes potenciales de Salesforce.
Tener el seguimiento de formularios de Pardot configurado correctamente en Google Analytics 4 significa que podemos realizar un seguimiento de las conversiones más fácilmente desde campañas publicitarias como Google Ads o LinkedIn, y de hecho, optimizar nuestra actividad utilizando los datos de conversión.
¿Entonces cómo hacemos esto?
Cómo configurar Salesforce para capturar el evento Submit
En estos pasos veremos como saber el email del cliente, y enviarlo después de hacer clic sobre el botón submit del formulario.
- Iniciamos sesión en nuestra cuenta de Salesforce y navegamos hasta «Marketing > Forms > Forms»
- Elegimos el formulario que vamos a utilizar, y hacemos clic en «Edit form» que está situado en la parte superior derecha de la pantalla.
- Hacemos clic en el tercer paso del generador de formularios, «Look and Feel»
- Hacemos clic sobre la pestaña «Below Form» y luego sobre el icono “<>” dentro del editor.
- Esta opción nos permite inyectar código Javascript dentro del iFrame del formulario de Pardot en la página. Añadiremos el siguiente código:
var form = document.getElementById('pardot-form');
form.addEventListener('submit', function (event) {
var form = event.target;
var email = '';
for (var i = 0, len = form.elements.length; i < len; i++) {
var element = form.elements[i];
if (element.value.includes('@')) {
email = element.value;
var message = {'PARDOT_DATA_EMAIL': email}
window.top.postMessage(message, 'https://www.dominio-de-tu-web.com');
}
}
});Lo que hacemos con este código es escuchar el evento submit del formulario y buscar en todos los campos si existe una dirección de correo electrónico. Una vez lo encuentra, lo envía a la página que contiene el iFrame del formulario.
- Confirmamos y guardamos.
Enviar un evento sencillo a Google Analytics 4 cuando hagamos submit en un formulario de Pardot
Posiblemente, lo de enviar el email del registrado sea bastante específico, y lo más normal sea enviar un evento sencillo, algo como “solicitud-demo”. Si es así, utilizaríamos el siguiente código.
var form = document.getElementById('pardot-form');
form.addEventListener('submit', function (event) {
var form = event.target;
var event_ga = 'solicitud-demo';
var message = {'PARDOT_SUBMIT_EVENT': event_ga}
window.top.postMessage(message, 'https://www.dominio-de-tu-web.com');
});El código busca un elemento HTML con el ID «pardot-form» y lo almacena en una variable llamada «form».
Luego, se agrega un «event listener» al formulario que se activa cuando se envía el formulario. El «event listener» es una función anónima que toma el evento como argumento.
Dentro de la función tendremos una nueva variable llamada «form» y definimos una variable llamada «event_ga» que contiene una cadena de texto que representa un evento de Google Analytics.
Finalmente, se crea un objeto de mensaje que contiene la clave «PARDOT_SUBMIT_EVENT» y el valor de la variable «event_ga». Este objeto se envía a través de la función «postMessage» de JavaScript, que permite enviar mensajes entre ventanas de diferentes dominios. En este caso, el mensaje se envía a través de la ventana principal del navegador «window.top» al dominio «https://www.dominio-de-tu-web.com».
Cómo enviar un evento desde el mensaje de Gracias a Google Analytics 4
Anteriormente, hemos visto como enviar el email de un cliente o un determinado evento una vez se haga submit.
Pero quizás no necesitemos hacerlo en ese momento y preferimos hacerlo cuando se muestre el mensaje de «gracias».
Vamos a ver como hacerlo en los siguientes pasos.
- Una vez más, hacemos clic en «Edit form», que está situado en la parte superior derecha de la pantalla.
- Hacemos clic en el cuarto paso del constructor de formularios, «Completion Actions»
- Hacemos clic en la pestaña «Thank You Code» y marcamos la casilla «Always display form after submission»
- Pegamos el siguiente fragmento de código, y hacemos clic en «Confirm & Save»
var event_ga = 'thank-demo';
var message = {'PARDOT_THK_EVENT': event_ga}
window.top.postMessage(message, 'https://www.dominio-de-tu-web.com');Primero, definimos una variable llamada «event_ga» y se le asigna el valor de «thank-demo». Luego se crea un objeto llamado «message» que tiene una propiedad llamada «PARDOT_THK_EVENT» cuyo valor es el de la variable «event_ga».
Finalmente, se utiliza la función «postMessage» del objeto «window.top» para enviar el mensaje a la URL del sitio web de destino (‘https://www.dominio-de-tu-web.com‘).
En resumen, este código está enviando un mensaje que contiene información sobre un evento específico (en este caso, «thank-demo») a un sitio web determinado.
Cómo hacer que nuestra web reciba datos del iFrame del formulario de Marketing Cloud Account Engagement ( MCAE).
Ahora vamos a ver como recibir datos del iFrame del formulario una vez que el formulario envía el mensaje a través de la función «postMessage»
var iframe = document.querySelector("#formPardot");
window.addEventListener('message', function(e) {
var message = e.data;
var origen = e.origin;
if (origen === 'https://www2.dominio-form-pardot.net'){
// Código personalizado que necesitemos.
console.log({message});
}
} , false);Este código en JavaScript se encarga de escuchar los mensajes que se envían desde un iframe con ID «formPardot» de nuestra página.
Cuando recibe un mensaje, comprueba la URL de origen del mensaje. Si el mensaje se envía desde la URL específica «https://www2.dominio-form-pardot.net», se ejecuta el código personalizado que necesitemos, en este caso, simplemente se imprime el mensaje en la consola del navegador mediante la función «console.log()».
Enviar el evento a Google Analytics 4
Una vez que ya tenemos la comunicación con el formulario del iFrame, lo que hacemos es enviar el evento a Google Analytics 4 con el siguiente código.
// Código personalizado que necesitemos.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': message.PARDOT_SUBMIT_EVENT
});En el código, lo que hacemos en agregar un nuevo objeto dentro de del array «dataLayer». Dicho objeto tiene la propiedad «event» ,y el valor «message.PARDOT_SUBMIT_EVENT» , que es el que recibimos del iFrame del formulario de Marketing Cloud Account Engagement ( MCAE).
Este objeto puede ser utilizado posteriormente para enviar información a herramientas de análisis, o seguimiento de datos como Google Analytics o Google Tag Manager.
Conclusión
Siguiendo estos pasos podemos solucionar el problema de comunicación entre un formulario dentro de un iFrame y nuestra web. De esta forma sacar el conversion rate de cada una de las páginas de nuestra web, y ver cuánto convierte.
