Como Desencadear 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? Pode criar facilmente o seu formulário e fazer com que ele não só acione a campanha, mas também preencha previamente quaisquer campos, como nome e endereço de e-mail, do formulário para a campanha, para ajudar a poupar tempo. Neste tutorial, mostraremos como pode conseguir isto utilizando um trecho de código.

Criação do formulário

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

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

Configuração da campanha OptinMonster

Agora é hora de criar uma campanha OptinMonster. Para criar a sua campanha especificamente para este tutorial, siga estes passos.

1) Criação da campanha

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

2) Adicionar o MonsterLink

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

3) Publicação da campanha

Se estiver a usar o plugin WordPress OptinMonster para gerir as suas campanhas, certifique-se de que Publica a campanha em admin WordPress » OptinMonster » Campanhas.

(Opcional) Configuração das Definições de Saída

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

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

Adição do trecho de código

Agora é hora de adicionar o trecho de código ao seu site. Se precisar de ajuda sobre onde e como adicionar trechos de código 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 precisará de fazer para que este trecho de código funcione no seu site.

• $form_id = 519; – Este é o ID do formulário do WPForms que estamos a visar. Isto significa que este trecho de código 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 adicionámos ao nosso formulário. Isto significa que este trecho de código levará o que o utilizador 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 adicionámos ao nosso formulário. Isto significa que este trecho irá pegar o que o utilizador inseriu no formulário para o email e passá-lo automaticamente para a campanha OptinMonster. Para encontrar o ID do seu campo para este campo, consulte este tutorial.

Depois de ter atualizado as linhas necessárias no trecho e guardado no seu site, sempre que o formulário for preenchido, ele irá acionar automaticamente a campanha OptinMonster e preencher previamente os campos Nome e Email.

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

Relacionado

Referência de Ação: wp_footer