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

はじめに

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

フォームの作成

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

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

OptinMonsterキャンペーンの設定

それでは、OptinMonsterキャンペーンを作成しましょう。このチュートリアル専用のキャンペーンを作成するには、以下の手順に従ってください。

1) キャンペーンの作成

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

2) モンスターリンクの追加

次に、キャンペーンビルダーに モンスターリンク として 表示ルール をクリックしてキャンペーンを表示します。

3) キャンペーンの発表

を使用している場合 オプチンモンスター WordPressプラグインでキャンペーンを管理する場合は、以下の点に注意してください。 出版 からのキャンペーン WordPress admin " 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である。 名称 フィールドを追加しました。つまり、このスニペットはユーザーがフォームに入力したnameを受け取り、それを自動的に オプチンモンスター キャンペーンに参加する。このフィールドのフィールドIDを見つけるには こちらのチュートリアルをご覧ください。.
• $email_field = 1; - のフィールドIDである。 電子メール フィールドを追加しました。つまり、このスニペットはユーザーがフォームに入力したEメールを受け取り、それを自動的に オプチンモンスター キャンペーンに参加する。このフィールドのフィールドIDを見つけるには こちらのチュートリアルをご覧ください。.

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

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

関連

アクション・リファレンス：wp_footer