フォーム送信からOptinMonsterキャンペーンをトリガーする方法

はじめに

フォーム送信時にOptinMonsterキャンペーンを自動的にトリガーしますか？フォームを簡単に作成でき、キャンペーンをトリガーするだけでなく、名前やメールアドレスなどのフィールドをフォームからキャンペーンに事前入力して時間を節約できます。このチュートリアルでは、スニペットを使用してこれを達成する方法を説明します。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。このチュートリアルの目的上、フォームには名前とメールアドレスフィールドのみを含めます。

フォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

OptinMonsterキャンペーンの設定

次に、OptinMonsterキャンペーンを作成します。このチュートリアルのためにキャンペーンを作成するには、次の手順に従ってください。

1) キャンペーンの作成

キャンペーンの作成が初めての場合は、このガイドに従って開始できます。

2) MonsterLinkの追加

次に、キャンペーンビルダーで、キャンペーンをクリックスルーのみで表示するように、表示ルールとしてMonsterLinkを追加します。

3) キャンペーンの公開

キャンペーンを管理するためにOptinMonster WordPressプラグインを使用している場合は、WordPress管理画面 » OptinMonster » キャンペーンからキャンペーンを公開してください。

(オプション) 出力設定の設定

WPFormsフォームが表示されるページにのみこのキャンペーンを埋め込むように、OptinMonsterプラグインの出力設定を構成できます。

このチュートリアルの目的上、表示するページを制限しません。ただし、このトピックの詳細については、ドキュメントを確認してください。

スニペットの追加

これで、スニペットをサイトに追加する時間です。スニペットをサイトに追加する場所と方法についてサポートが必要な場合は、このチュートリアルを確認してください。

/*
 * 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' );

このスニペットをサイトで機能させるには、4つの編集が必要です。

• $form_id = 519; – これは、ターゲットとしているWPFormsのフォームIDです。これは、このスニペットがIDが519のフォームでのみ実行されることを意味します。フォームIDを見つけるには、このチュートリアルを参照してください。
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – これはOptinMonsterキャンペーンのスラッグです。
• $name_field = 0; – これは、フォームに追加した名前フィールドのフィールドIDです。これは、このスニペットがユーザーがフォームに入力した名前を取得し、それをOptinMonsterキャンペーンに自動的に渡すことを意味します。このフィールドのフィールドIDを見つけるには、このチュートリアルを参照してください。
• $email_field = 1; – これは、フォームに追加したEmailフィールドのフィールドIDです。このスニペットは、ユーザーがフォームに入力したメールアドレスを自動的にOptinMonsterキャンペーンに渡します。このフィールドのフィールドIDを見つけるには、こちらのチュートリアルを参照してください。

スニペットに必要な行を更新してサイトに保存すると、フォームが完了するたびにOptinMonsterキャンペーンが自動的にトリガーされ、NameとEmailフィールドが事前入力されます。

これで、フォーム送信からOptinMonsterキャンペーンをトリガーするために必要なすべてが揃いました！訪問者がフォームを手動で入力できるように、印刷リンクを追加しますか？フォームに印刷リンクを追加する方法のチュートリアルをご覧ください。

関連

アクション参照: wp_footer