Como Acionar uma Campanha OptinMonster a partir do Envio de um Formulário

Introdução

Gostaria de acionar automaticamente uma campanha OptinMonster a partir do envio de um formulário? Você pode facilmente criar seu formulário e fazer com que ele não apenas acione a campanha, mas também preencha quaisquer campos, como nome e endereço de e-mail, do formulário para a campanha, para ajudar a economizar tempo. Neste tutorial, mostraremos como você pode conseguir isso usando um snippet.

Criando o formulário

Para começar, criaremos um novo formulário e adicionaremos nossos campos a ele. Para fins deste tutorial, nosso formulário conterá apenas os campos Nome e Endereço de E-mail.

Se precisar de alguma ajuda na criação do seu formulário, consulte esta documentação.

Configurando a campanha OptinMonster

Agora é hora de criar uma campanha OptinMonster. Para criar sua campanha especificamente para este tutorial, siga estas etapas.

1) Criando a campanha

Se esta for a primeira vez que você cria uma campanha, pode começar seguindo este guia.

2) Adicionando o MonsterLink

Em seguida, no construtor de campanhas, adicione MonsterLink como uma Regra de Exibição para mostrar a campanha apenas ao clicar.

3) Publicando a campanha

Se você estiver usando o plugin WordPress OptinMonster para gerenciar suas campanhas, certifique-se de Publicar a campanha em admin do WordPress » OptinMonster » Campanhas.

(Opcional) Configurando as Configurações de Saída

Você pode configurar as Configurações de Saída no plugin OptinMonster para incorporar esta campanha apenas na(s) página(s) onde seu formulário WPForms aparecerá.

Para fins deste tutorial, não limitaremos nenhuma página para exibição. No entanto, para mais informações sobre este tópico, consulte a documentação deles.

Adicionando o snippet

Agora é hora de adicionar o snippet ao seu site. Se precisar de ajuda sobre onde e como adicionar snippets ao seu site, revise 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' );

Existem quatro edições que você precisará fazer para que este snippet funcione em seu site.

• $form_id = 519; – Este é o ID do formulário do WPForms que estamos visando. Isso significa que este snippet será executado apenas no formulário com o ID 519. Para encontrar o ID do seu formulário, consulte este tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – Este é o slug da campanha OptinMonster.
• $name_field = 0; – Este é o ID do campo para o campo Nome que adicionamos ao nosso formulário. Isso significa que este snippet pegará o que o usuário inseriu no formulário para o nome e o passará automaticamente para a campanha OptinMonster. Para encontrar o ID do seu campo para este campo, consulte este tutorial.
• $email_field = 1; – Este é o ID do campo para o campo Email que adicionamos ao nosso formulário. Isso significa que este trecho pegará o que o usuário inseriu no formulário para o email e o passará automaticamente para a campanha OptinMonster. Para encontrar o ID do seu campo para este campo, consulte este tutorial.

Depois de atualizar as linhas necessárias no trecho e salvá-lo em seu site, sempre que o formulário for preenchido, ele acionará automaticamente a campanha OptinMonster e preencherá previamente os campos Nome e Email.

E é tudo o que você precisa para acionar uma campanha OptinMonster a partir do envio de um formulário! Gostaria de adicionar um link de impressão para que seus visitantes possam imprimir o formulário para preenchê-lo manualmente? Confira nosso tutorial sobre Como Adicionar um Link de Impressão aos Seus Formulários.

Relacionado

Referência de Ação: wp_footer