Come attivare una campagna OptinMonster da un invio di modulo

Introduzione

Desideri attivare automaticamente una campagna OptinMonster da un invio di modulo? Puoi creare facilmente il tuo modulo e fare in modo che non solo attivi la campagna, ma precompili anche eventuali campi come nome e indirizzo email dal modulo alla campagna per risparmiare tempo. In questo tutorial, ti mostreremo come ottenere questo risultato utilizzando uno snippet.

Creazione del modulo

Per iniziare, creeremo un nuovo modulo e vi aggiungeremo i nostri campi. Ai fini di questo tutorial, il nostro modulo conterrà solo i campi Nome e Indirizzo email.

Se hai bisogno di assistenza nella creazione del tuo modulo, dai un'occhiata a questa documentazione.

Configurazione della campagna OptinMonster

Ora è il momento di creare una campagna OptinMonster. Per creare la tua campagna specificamente per questo tutorial, segui questi passaggi.

1) Creazione della campagna

Se è la prima volta che crei una campagna, puoi iniziare seguendo questa guida.

2) Aggiunta del MonsterLink

Successivamente, nell'editor della campagna aggiungi MonsterLink come Regola di visualizzazione per mostrare la campagna solo al clic.

3) Pubblicazione della campagna

Se stai utilizzando il plugin WordPress OptinMonster per gestire le tue campagne, assicurati di Pubblicare la campagna da WordPress admin » OptinMonster » Campagne.

(Facoltativo) Configurazione delle Impostazioni di Output

Puoi configurare le Impostazioni di output nel plugin OptinMonster per incorporare questa campagna solo nelle pagine in cui apparirà il tuo modulo WPForms.

Ai fini di questo tutorial, non limiteremo alcuna pagina per la visualizzazione. Tuttavia, per ulteriori informazioni su questo argomento, consulta la loro documentazione.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al tuo sito. Se hai bisogno di aiuto su dove e come aggiungere snippet al tuo sito, ti preghiamo di consultare 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 che dovrai apportare affinché questo snippet funzioni sul tuo sito.

• $form_id = 519; – Questo è l'ID del modulo di WPForms che stiamo prendendo di mira. Ciò significa che questo snippet verrà eseguito solo sul modulo con ID 519. Per trovare l'ID del tuo modulo, consulta questo tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – Questo è lo 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 modulo per il nome e lo passerà automaticamente alla campagna OptinMonster. Per trovare l'ID del tuo campo per questo campo, consulta questo tutorial.
• $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'email e lo passerà automaticamente alla campagna OptinMonster. Per trovare l'ID del tuo campo per questo campo, consulta questo tutorial.

Una volta aggiornate le righe necessarie nello snippet e salvato sul tuo sito, ogni volta che il modulo viene completato, attiverà automaticamente la campagna OptinMonster e pre-compilerà i campi Nome ed Email.

E questo è tutto ciò che ti serve per attivare una campagna OptinMonster da un invio di modulo! Desideri aggiungere un link di stampa in modo che i tuoi visitatori possano stampare il modulo per completarlo manualmente? Dai un'occhiata al nostro tutorial su Come aggiungere un link di stampa ai tuoi moduli.

Correlati

Riferimento azione: wp_footer