Come attivare una campagna OptinMonster dall'invio di un modulo

Introduzione

Volete attivare automaticamente una campagna OptinMonster a partire dall'invio di un modulo? Potete creare facilmente il vostro modulo e fare in modo che non solo attivi la campagna, ma anche precompili i campi come il nome e l'indirizzo e-mail dal modulo alla campagna, per risparmiare tempo. In questo tutorial vi mostreremo come potete ottenere questo risultato utilizzando uno snippet.

Creazione del modulo

Per iniziare, creeremo un nuovo modulo e vi aggiungeremo i nostri campi. Ai fini di questa esercitazione, il nostro modulo conterrà solo i campi Nome e Indirizzo e-mail.

Se avete bisogno di assistenza per creare il vostro modulo, consultate questa documentazione.

Impostazione della campagna di OptinMonster

Ora è il momento di creare una campagna OptinMonster. Per creare una campagna specifica per questo tutorial, seguite i seguenti passaggi.

1) Creare la campagna

Se è la prima volta che create una campagna, potete iniziare seguendo questa guida.

2) Aggiungere il MonsterLink

Successivamente, nel costruttore di campagne, aggiungere MonsterLink come un Regola di visualizzazione per mostrare la campagna solo al clic.

3) Pubblicare la campagna

Se si utilizza il programma OptinMonster plugin di WordPress per gestire le campagne, assicurarsi di Pubblicare la campagna dal Amministrazione WordPress " OptinMonster " Campagne.

(Facoltativo) Configurazione delle impostazioni di uscita

È possibile configurare le impostazioni di output del plugin OptinMonster per incorporare questa campagna solo nelle pagine in cui apparirà il modulo WPForms.

Per lo scopo di questa esercitazione, non limiteremo alcuna pagina per la visualizzazione. Tuttavia, per ulteriori informazioni su questo argomento, si consiglia di consultare la loro documentazione.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al vostro sito. Se avete bisogno di aiuto su dove e come aggiungere gli snippet al vostro sito, consultate questo 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' );

Ci sono quattro modifiche da apportare per far funzionare questo snippet sul vostro sito.

• $form_id = 519; - Questo è l'ID del modulo di WPForms a cui ci rivolgiamo. Ciò significa che questo snippet solo eseguito sul modulo con l'ID di 519. Per trovare l'ID del modulo, vedere questa esercitazione.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; - Questo è il Slug della campagna OptinMonster.
• $name_field = 0; - Questo è l'ID del campo per il campo Nome che abbiamo aggiunto al nostro modulo. Ciò significa che questo snippet prenderà ciò che l'utente ha inserito nel form come nome e lo passerà automaticamente al campo OptinMonster campagna. Per trovare l'ID del campo per questo campo, vedere questa esercitazione.
• $email_field = 1; - Questo è l'ID del campo per il campo Email che abbiamo aggiunto al nostro modulo. Ciò significa che questo snippet prenderà ciò che l'utente ha inserito nel modulo per l'e-mail e lo passerà automaticamente al campo OptinMonster campagna. Per trovare l'ID del campo per questo campo, vedere questa esercitazione.

Una volta aggiornate le righe necessarie nello snippet e salvato sul sito, ogni volta che il modulo viene compilato si attiverà automaticamente la campagna di OptinMonster e verranno precompilati i campi Nome e Email.

E questo è tutto ciò che serve per attivare una campagna OptinMonster dall'invio di un modulo! Volete aggiungere un link di stampa in modo che i vostri visitatori possano stampare il modulo per completarlo manualmente? Consultate il nostro tutorial su Come aggiungere un link di stampa ai vostri moduli.

Correlato

Riferimento azione: wp_footer