So aktivieren Sie eine OptinMonster-Kampagne über eine Formularübermittlung

Einleitung

Möchten Sie eine OptinMonster-Kampagne automatisch über eine Formularübermittlung auslösen? Sie können Ihr Formular einfach erstellen und es nicht nur die Kampagne auslösen lassen, sondern auch Felder wie Name und E-Mail-Adresse aus dem Formular in die Kampagne vorab ausfüllen, um Zeit zu sparen. In diesem Tutorial zeigen wir Ihnen, wie Sie dies mit einem Snippet erreichen können.

Erstellung des Formulars

Zunächst erstellen wir ein neues Formular und fügen unsere Felder hinzu. Für dieses Tutorial enthält unser Formular nur die Felder Name und E-Mail-Adresse.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Einrichtung der OptinMonster-Kampagne

Nun ist es an der Zeit, eine OptinMonster-Kampagne zu erstellen. Um Ihre Kampagne speziell für dieses Tutorial zu erstellen, gehen Sie bitte wie folgt vor.

1) Erstellung der Kampagne

Wenn Sie zum ersten Mal eine Kampagne erstellen, können Sie dieser Anleitung folgen.

2) Hinzufügen des MonsterLinks

Fügen Sie als Nächstes im Kampagnen-Builder MonsterLink als Anzegeregel hinzu, um die Kampagne nur beim Klicken anzuzeigen.

3) Veröffentlichung der Kampagne

Wenn Sie das OptinMonster WordPress-Plugin zur Verwaltung Ihrer Kampagnen verwenden, stellen Sie sicher, dass Sie die Kampagne im WordPress-Admin » OptinMonster » Kampagnen veröffentlichen.

(Optional) Konfiguration der Ausgabe-Einstellungen

Sie können die Ausgabe-Einstellungen im OptinMonster-Plugin konfigurieren, um diese Kampagne nur auf den Seiten einzubetten, auf denen Ihr WPForms-Formular angezeigt wird.

Für dieses Tutorial werden wir keine Seite für die Anzeige einschränken. Weitere Informationen zu diesem Thema finden Sie jedoch in deren Dokumentation.

Hinzufügen des Snippets

Nun ist es an der Zeit, das Snippet zu Ihrer Website hinzuzufügen. Wenn Sie Hilfe benötigen, wo und wie Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses 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' );

Es gibt vier Änderungen, die Sie an diesem Snippet vornehmen müssen, damit es auf Ihrer Website funktioniert.

• $form_id = 519; – Dies ist die Formular-ID von WPForms, die wir ansprechen. Das bedeutet, dass dieses Snippet nur für das Formular mit der ID 519 ausgeführt wird. Um Ihre Formular-ID zu finden, sehen Sie bitte dieses Tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – Dies ist der OptinMonster Kampagnen-Slug.
• $name_field = 0; – Dies ist die Feld-ID für das Feld Name, das wir zu unserem Formular hinzugefügt haben. Das bedeutet, dass dieser Ausschnitt die Eingabe des Benutzers für den Namen aus dem Formular nimmt und automatisch an die OptinMonster-Kampagne weiterleitet. Um die Feld-ID für dieses Feld zu finden, sehen Sie sich dieses Tutorial an.
• $email_field = 1; – Dies ist die Feld-ID für das Feld E-Mail, das wir zu unserem Formular hinzugefügt haben. Das bedeutet, dass dieser Ausschnitt die Eingabe des Benutzers für die E-Mail aus dem Formular nimmt und automatisch an die OptinMonster-Kampagne weiterleitet. Um die Feld-ID für dieses Feld zu finden, sehen Sie sich dieses Tutorial an.

Sobald Sie die notwendigen Zeilen im Ausschnitt aktualisiert und auf Ihrer Website gespeichert haben, wird jedes Mal, wenn das Formular ausgefüllt wird, automatisch die OptinMonster-Kampagne ausgelöst und die Felder Name und E-Mail vorausgefüllt.

Und das ist alles, was Sie brauchen, um eine OptinMonster-Kampagne durch eine Formularübermittlung auszulösen! Möchten Sie einen Drucklink hinzufügen, damit Ihre Besucher das Formular manuell ausfüllen können? Sehen Sie sich unser Tutorial So fügen Sie Ihren Formularen einen Drucklink hinzu an.

Verwandt

Aktionsreferenz: wp_footer