HubSpot: publicar datos en los formularios de HubSpot

Recolectar datos a través de tu ion experience puede ser presentado en un formulario HubSpot al aprovechar la integración de ion “Post to Web Form”. Este documento brinda un paso a paso de las instrucciones para crear una integración que publique datos hacia un formulario HubSpot.

Asegúrate de darle un vistazo a la sección Configuraciones avanzadas de este artículo para que aprendas cómo publicar múltiples formularios HubSpot, incluido valiosos datos de diálogo y la cookie de seguimiento de HubSpot.

Antes de empezar

Existen algunos breves elementos que necesitarás desde HubSpot antes de configurar la integración. El documento de ayuda de HubSpot guindado en este enlace te dará información más especializada sobre los ítems a continuación:

• Formulario de campos de nombres de HubSpot
• Formulario GUID de HubSpot
• URL final de HubSpot.

Asimismo, hay unos pasos a seguir en la plataforma ion antes de configurar la integración. Este documento te dará más información sobre estos elementos:

• Crear campos de recolección de datos.
• Crear formulario(s) ion.
• Configurar publicaciones de prueba.

¡Empecemos!

1. Crear un campo de mapeo

Seguir los pasos descritos a continuación, hará que puedas mapear los campos de recolección de datos en ion en sus correspondientes campos de nombres en HubSpot. Para arrancar, añade tu nuevo mapeo de campo:

1. Haz clic en la pestaña Integrations dentro de tu barra de navegación en ion console.

2. Haz clic en el botón verde “New field mapping”.

3. Etiqueta el campo de mapeo HubSpot y si lo deseas agrega una descripción.

4. Desde el menú de Integration, selecciona “Post to Web Form”.

5. Guarda.

2. Agrega campos Outbound a tus campos de mapeo

Los campos Outbound definen los datos que se extenderán desde ion hacia tu formulario HubSpot.

1. Haz clic en el botón verde “New Outbound field” para añadir un nuevo campo a tu campo de mapeo.

2. Cuando hayas añadido el nuevo campo, puedes tanto seleccionar desde el menú desplegable Data Collection, el menú desplegable Core Field, la plantilla de implementación Mashup o agregar un campo a través de JavaScript.

• Para añadir un campo de formulario, usa el menú desplegable Data Collection para seleccionar la categoría del campo de datos y luego, el campo de recolección de datos.
• O, para agregar un Core Field de ion, selecciona desde el menú desplegable Core Field.
• O, para exportar múltiples campos de ion hacia un campo externo, usa el Mashup Field al conectar {{DataName}} {{DataName2}} , entre otros, dentro del editor.
• O, para formatear el valor antes de exportar, usa el campo de JavaScript y añade la lógica alrededor del valor recolectado en ion. Para acceder a los campos de recolección de datos con JavaScript, usa respondent.dataname.

3. Opcionalmente haz que tu campo requiera correr la integración.

4. Opcionalmente añade un valor por defecto.

5. Ingresa el nombre externo del campo.

6. Guarda.

7. Repite estos pasos para cada campo que deberá ser incluido en el Field Mapping.

8. Omite los campos Inbound.

3. Crea la integración

1. Navega hacia atrás a la pantalla Integrations.

2. Haz clic en la pestaña Integrations.

3. Haz clic en el botón verde “New integration”.

4. Ingresa “Post to HubSpot” como la etiqueta.

5. Opcionalmente añade una descripción.

6. Selecciona el Field Mapping que acabas de crear.

7. Copia los Form URL dentro del editor.

8. Establece los intentos máximos.

• Si ocurre una interrupción del servicio dentro de la plataforma externa, ion intentará publicar en esa hora cuantos intentos hayas establecido aquí.

9. Revisa Empty Fields para excluir campos externos que no tengan valores desde la POST data.

10. Selecciona como método "POST".

11. Opcionalmente añade un email de depuración.

• Las direcciones de email especificadas aquí recibirán un mensaje cada vez que la integración muestre los datos publicados y reciban una respuesta. Esto es usado normalmente para pruebas y encontrar errores.

12. Omite "Skip Save Reponse As", "Authentication" y los encabezados personalizados.

13. Guarda.

4. Añadir una integración a las páginas ion

La plataforma ion corre la integración basada en las reglas que creaste. Estas reglas pueden ser agregadas en cualquier elemento accionable dentro de tu publicación ion. Las reglas de integración son usadas generalmente en el formulario al enviarlo, o en un paso de asignación. Sigue los pasos descritos debajo para añadir una integración a tus páginas ion.

1. Navega dentro de tu publicación.

2. Haz clic en el formulario, botón o enlace que busques establecer como el disparador de tu integración.

3. En Creative Studio, haz clic en +Rules.

4. Selecciona la condición que necesita encontrar para correr la integración.

               1. “No conditions required” es lo generalmente usuado.

5. Selecciona “Run integration in Background” como la acción.

6. Guarda.

5. Prueba la integración

Usa la publicación para configurar antes del inicio de los pasos de la integración para probarla. Por favor ten en cuenta que las integraciones no correrán en el "Preview Mode", entonces, lo que querrás hacer es abrir un URL para hacer la prueba. la integración se ejecutará una vez que enviés el formulario ion, o completes la acción que dispara la regla de integración.

Si estás en la lista de distribución de email de depuración, recibirás un mensaje que muestra los datos publicados y la respuesta desde el servidor externo. Asimismo, querrás revisar que los datos que enviaste fueron recibidos por la plataforma externa.

Configuraciones Avanzadas

Publicar múltiples formularios HubSpot

Si buscas publicar leads de ion en formularios HubSpot específicos para campañas, existen dos rutas que puedes seleccionar para cumplir este objetivo:

1. Hacer que el URL final dinámico de HubSpot sea apoyado por una regla de formulario que guarde el Form GUID 

En la integración ion, reemplaza el GUID en el final con un marcador de posición dinámico, así:

https://forms.hubspot.com/uploads/form/v2/:portal_id/{{HubFormGUID}}

Encima de la regla de acción del formulario que corre la integración, guarda el valor GUID:

Condition: No conditions required.

Action: Save data - HubFormGUID = pegue el valor GUID aquí.

2. Crea una nueva integración para cada formulario HubSpot

En lugar de aprovechar un final dinámico, puedes crear una nueva integración para cada formulario HubSpot que quieras publicar. Dado que los campos de nombres de HubSpot son consistentes, puedes utilizar esto a tu favor al darle el mismo mapeo de campo para cada integración, y solo pega un nuevo final dentro de +Integration.

Incluye en las publicaciones un "Dialogue Data"

Los datos recolectados fuera de tus formularios ion pueden ser incluidos en la publicación hacia HubSpot. Los resultados generados a través de cálculos de reglas, "ion Core Fields" y los parámetros de cadenas de consulta son ejemplos de puntos de datos suplementarios que pueden ser añadidos en la publicación que va a HubSpot.

Mientras estén disponibles esos puntos de datos cuando la integración corra, ¡ellos pueden ser incluidos para mejorar el registro de contactos! Para lograr esto, crea campos para recibir los puntos de datos deseados en tu(s) formulario(s) de HubSpot e incluye en ellos un mapeo de campo de ion.

Añadir actividad de rastreo de lead en HubSpot

Para asociar métricas analíticas con el registro de contactos en HubSpot, necesitarás añadir tu código de seguimiento de HubSpot en tus páginas de formularios ion e incluir un campo especial llamado HS Context en la publicación. El HS Context es un bloque formaterado JSON que contiene información contextual para el envío del formulario, incluyendo el token de valor del token de la cookie de seguimiento de HubSpot, el IP Address de la conversión del lead, el URL del formulario enviado y el nombre de la página del formulario enviado.

1. Añade tu código de seguimiento HubSpot a tu librería de script ion

• Ve hacia tu librería de script (Libraries > Scripts).
• Haz clic en el botón verde “New script category” y crea un nombre de categoría llamado HubSpot (o navega dentro de la categoría de script existente).
• Haz clic en el botón verde “New script”, etiqueta tu nuevo script "Visitor Tracking", pégalo en el código de seguimiento de HubSpot y guarda.

2. Añade el servidor scriptlet que guarde el valor de HS Context

• Navega dentro de la librería del servidor scriptlet (Libraries > Server Scriptlets).
• Haz clic en el botón verde “New scriptlet category” y crea una categoría llamada HubSpot.
• Haz clic en el botón verde “New scriptlet”, etiqueta tu nuevo scriptlet Save HS Context y pega lo siguiente dentro del editor de scriptlet:

 

var hutk = actionReadCookie("hubspotutk");

actionSaveData("hutk",hutk);

var ip = respondent.ipaddress;

var tsurl = respondent.deeplinkurl;

var pname = respondent.pagelabel;

var hscontext = {"hutk":hutk,"ipAddress":ip,"pageUrl":tsurl, "pageName":pname};

var hub = JSON.stringify(hscontext);

actionSaveData("hscontext",hub); 

3. Actualiza tu mapeo de campos de integración para incluir el valor de HS Context como un campo Outbound

• Navega dentro de tu mapeo de campos de integración (Integrations > Field Mappings > [Your Field Mapping]).
• Haz clic en el botón verde “New outbound field” y crea un nuevo campo que use {{hscontext}} en la opción de campo de plantilla Mashup y como "External Field", hs_context.
• Guarda.

4. Agregar tu script HubSport Visitor Tracking dentro de tus pruebas de publicaciones

• Navega dentro de la pantalla Creative Management para tu publicación.
• Haz clic en el botón “Edit creative properties” en el lado derecho de tu pantalla de Creative Management.
• Desde el editor de scripts de la librería de publicaciones </body>, selecciona HubSpot como la categoría y el "Visitor Tracking" como el script desde el menú desplegable.
• Guarda.

5. Añade el scriptlet HubSpot Save HS Context dentro de tus pruebas de publicaciones

• Navega hacia la página de formularios en tu Creative Studio.
• Encuentra las reglas de formularui y añade una acción en tus reglas de integración que corra el servidor scriptlet Save HS Context antes que la integración HubSpot.
  • Conditions: No conditions required
  • Action: Run server scriptlet - HubSpot/Save HS Context
  • Action: Run integration in background - Post to HubSpot

Nota: puedes correr la integración desde el scriptlet, si lo que buscas es reducir el monto de reglas de acción. Cuando estés usando este método, selecciona “Run server scriptlet” como tu regla de acción y remueve la acción “Run integration in Background”. Se requieren modificaciones a los scriptlets.

¡Buen trabajo!

Una vez que hayas completado estos pasos, tu integración estará lista para usarse. Puedes añadir reglas para correr la integración en todas las publicaciones aplicables. Si necesitas resolver cualquier duda, por favor no dudes en escribirnos a help@rockcontent.com.