Cómo activar una campaña de OptinMonster desde el envío de un formulario

Introducción

¿Te gustaría activar automáticamente una campaña de OptinMonster a partir del envío de un formulario? Puedes crear fácilmente tu formulario y hacer que no solo active la campaña, sino que también rellene previamente campos como el nombre y la dirección de correo electrónico del formulario a la campaña para ayudar a ahorrar tiempo. En este tutorial, te mostraremos cómo puedes lograr esto usando un fragmento de código.

Creación del formulario

Para empezar, crearemos un nuevo formulario y le añadiremos nuestros campos. Para el propósito de este tutorial, nuestro formulario solo contendrá los campos Nombre y Dirección de correo electrónico.

Si necesitas ayuda para crear tu formulario, consulta esta documentación.

Configuración de la campaña de OptinMonster

Ahora es el momento de crear una campaña de OptinMonster. Para crear tu campaña específicamente para este tutorial, sigue estos pasos.

1) Creación de la campaña

Si es la primera vez que creas una campaña, puedes empezar siguiendo esta guía.

2) Añadir el MonsterLink

A continuación, en el constructor de campañas, añade MonsterLink como una Regla de visualización para mostrar la campaña solo al hacer clic.

3) Publicación de la campaña

Si estás utilizando el plugin de WordPress OptinMonster para gestionar tus campañas, asegúrate de Publicar la campaña desde el admin de WordPress » OptinMonster » Campañas.

(Opcional) Configuración de los Ajustes de Salida

Puedes configurar los Ajustes de Salida en el plugin de OptinMonster para incrustar esta campaña solo en la(s) página(s) donde aparecerá tu formulario de WPForms.

Para el propósito de este tutorial, no limitaremos ninguna página para que se muestre. Sin embargo, para más información sobre este tema, por favor consulta su documentación.

Añadir el fragmento

Ahora es el momento de añadir el fragmento de código a tu sitio. Si necesitas ayuda sobre dónde y cómo añadir fragmentos de código a tu sitio, por favor revisa este tutorial.

/*
 * Trigger Optinmonster campaign from a WPForms submission
 * 
 * @link https://wpforms.com/developers/how-to-trigger-an-optinmonster-campaign-from-a-form-submission
 */

function trigger_om_campaign_from_wpf() {

	// The WP Form ID. 
	// Find the form ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$form_id = 519;

	// The OptinMonster campaign slug.
	$campaign_slug = 'kofeog6veaiogw1gefbb';

	// The field ID for the name field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$name_field = 0;

	// The field ID for the email field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$email_field = 1;

	if ( empty( $_POST[ 'wpforms' ][ 'complete' ] ) ) {
		// Bail if a WP Form was not submitted.
		return;
	}

	if ( $form_id !== (int) $_POST[ 'wpforms' ][ 'id' ] ) {
		// Bail if not correct WP Form.
		return;
	}

	$entry = $_POST[ 'wpforms' ][ 'complete' ];
	$email = '';
	$name  = '';

	// WPF name field submitted value.
	if ( ! empty( $entry[ $name_field ][ 'value' ] ) ) {
		$name = sanitize_text_field( wp_unslash( trim( $entry[ $name_field ][ 'value' ] ) ) );
	}

	// WPF email field submitted value.
	if ( ! empty( $entry[ $email_field ][ 'value' ] ) ) {
		$email = sanitize_text_field( wp_unslash( trim( $entry[ $email_field ][ 'value' ] ) ) );
	}
	?>
	<script type="text/javascript">
		// Wait until OM campaign is ready.
		document.addEventListener( 'om.Campaign.init', evt => {

			// Make sure we are on the right campaign.
			if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
				return;
			}

			// Setup an event listener for
			document.addEventListener( 'om.Form.init', evt => {
				if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
					return;
				}

				document.getElementById(evt.detail.Campaign.ns + '-field-name').value = <?php echo json_encode( $name ); ?>;
				document.getElementById(evt.detail.Campaign.ns + '-field-email').value = <?php echo json_encode( $email ); ?>;
			} );

			evt.detail.Campaign.startShow();
		} );
	</script>
	<?php
}
add_action( 'wp_footer', 'trigger_om_campaign_from_wpf' );

Hay cuatro ediciones que necesitarás hacer para que este fragmento de código funcione en tu sitio.

• $form_id = 519; – Este es el ID del formulario de WPForms al que nos dirigimos. Esto significa que este fragmento de código se ejecutará solo en el formulario con el ID 519. Para encontrar el ID de tu formulario, por favor consulta este tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – Este es el slug de la campaña de OptinMonster.
• $name_field = 0; – Este es el ID del campo para el campo Nombre que añadimos a nuestro formulario. Esto significa que este fragmento de código tomará lo que el usuario introdujo en el formulario para el nombre y lo pasará automáticamente a la campaña de OptinMonster. Para encontrar el ID de tu campo para este campo, por favor consulta este tutorial.
• $email_field = 1; – Este es el ID del campo para el campo Email que agregamos a nuestro formulario. Esto significa que este fragmento tomará lo que el usuario ingresó en el formulario para el correo electrónico y lo pasará automáticamente a la campaña de OptinMonster. Para encontrar el ID de su campo para este campo, consulte este tutorial.

Una vez que haya actualizado las líneas necesarias en el fragmento y lo haya guardado en su sitio, cada vez que se complete el formulario, se activará automáticamente la campaña de OptinMonster y se pre-rellenarán los campos Nombre y Email.

¡Y eso es todo lo que necesita para activar una campaña de OptinMonster desde el envío de un formulario! ¿Le gustaría agregar un enlace de impresión para que sus visitantes puedan imprimir el formulario para completarlo manualmente? Consulte nuestro tutorial sobre Cómo agregar un enlace de impresión a sus formularios.

Relacionado

Referencia de acción: wp_footer