Verschwenden Sie Ihre Danke-Seite nicht: Nutzen Sie dynamische Daten, um nächste Schritte anzustossen

Wenn du mit Dynamics 365 Customer Insights - Journeys gearbeitet hast, ist dir wahrscheinlich aufgefallen, dass das standardmässige Erlebnis nach dem Absenden eines Formulars - ein einfaches Logo und die Nachricht „Vielen Dank“ - für Benutzer oft eher enttäuschend wirkt.

Sie sind damit nicht allein 😁 Viele Teams wünschen sich etwas ansprechenderes, markenkonformer und hilfreicher als die Standardversion. Zum Glück ermöglicht Dynamics 365, Benutzer auf eine benutzerdefinierte Danke-Seite weiterzuleiten, sodass Sie die volle Kontrolle über Design und Inhalt haben.

VORHER: NACHHER:

In diesem Artikel zeigen wir dir, wie du schnell eine personalisierte, dynamische Danke-Seite erstellen kannst – einschliesslich der Verwendung von sessionStorage, um Formulardaten zu uebergeben, damit du jeden Nutzer direkt nach dem Absenden mit relevanten Informationen begruessen kannst.

Diese Idee (die Nutzung von sessionStorage) stammt aus einem Artikel der grossartigen Megan V Walker - sehr lesenswert, wenn dich dieses Thema interessiert 👉 Format Session Registration Confirmation Page On Your Own Domain

Kurzfassung (TL;DR):
Dynamics 365 CI Journeys ermöglicht es dir, Formularuebermittlungen auf eine benutzerdefinierte Danke-Seite weiterzuleiten.
Indem du während des onsubmit die Formulardaten in sessionStorage speicherst, kannst du ein vollständig personalisiertes Danke-Erlebnis erstellen, das sich sofort aktualisiert – ganz ohne Serveraufrufe.

Schritt 1: Erstelle deine eigene Danke-Seite

Wir machen weiter mit der Beispielseite, die ich in Power Pages in meinem vorherigen Artikel erstellt habe. Und da wir Power Pages nutzen, machen wir es uns einfach und klicken im Website-Editor auf + Seite.

Das Ergebnis ist definitiv nicht schlecht 😎

Jetzt passen wir sie an.

Füge dynamische Platzhalter hinzu

Öffne Code bearbeiten, dann können wir unsere h1- und h3-Tags anpassen, um ein span-Tag hinzuzufuegen, das wir dynamisch ändern werden. Hier ist meine Seite:

<div data-component-theme="portalThemeColor8" class="row sectionBlockLayout" style='padding: 8px; margin: 0px; display: flex; flex-wrap: wrap; min-height: 60vh; background-image: url("/Event-2.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover;'>
  <div class="container">
    <div class="col-md-12 columnBlockLayout" style="min-width: 250px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 120px 0px;">
      <h1 style="text-align: center; color: #ffffff; text-shadow: 2px 2px 4px rgba(0,0,0,0.7);">Thank You, <span data-form-field="firstname">there!</span></h1>
      <h3 style="text-align: center; color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,0.6);">Your registration for the <span data-form-field="event">event</span> was successful.</h3>
    </div>
  </div>
</div>
<div data-component-theme="portalThemeColor" class="row sectionBlockLayout" style="margin: 0px; display: flex; flex-wrap: wrap; min-height: auto; padding: 40px 0px;">
  <div class="container">
    <div class="col-lg-12 columnBlockLayout" style="min-width: 250px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px;">
      <h2>What Happens Next?</h2>
      <p>We have sent a confirmation email with all the event details to your inbox. Please check your email and add the event to your calendar.</p>
      <button onclick="window.location.href='/'" type="button" value="/" class="button1" style="width: fit-content;">Return to Homepage</button>
    </div>
  </div>
</div>

Füge ein Script hinzu, um die Platzhalter zu aktualisieren

Öffne die *.customjs.js der neu erstellten Danke-Seite und füge das folgende JavaScript ein. Es wird die dynamischen Werte auf der Seite durch die Variablen ersetzen, die wir beim Absenden des Formulars im Session Storage speichern werden:

document.addEventListener('DOMContentLoaded', function () {
  populateThankYouPageFromSession();
  });

  function populateThankYouPageFromSession(options) {
    const config = Object.assign(
      {
        storageKey: 'ciFormData',
        clearAfterUse: true
      },
      options
    );

    const raw = sessionStorage.getItem(config.storageKey);

    if (!raw) {
      console.warn('No form data found in sessionStorage under key:', config.storageKey);
      return;
    }

    let formData;
    try {
      formData = JSON.parse(raw);
    } catch (error) {
      console.error('Could not parse form data from sessionStorage:', error);
      return;
    }

    const boundElements = document.querySelectorAll('[data-form-field]');
    boundElements.forEach(function (el) {
      const fieldName = el.getAttribute('data-form-field');
      if (!fieldName) return;

      const value = formData[fieldName];

      if (value === undefined || value === null || value === '') {
        return;
      }

      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
        el.value = value;
      } else {
        el.textContent = value;
      }
    });

    if (config.clearAfterUse) {
      sessionStorage.removeItem(config.storageKey);
    }
  }

Deine Seite sollte jetzt so aussehen:

Schritt 2: Konfiguriere das Formular in Customer Insights Journeys

Weiterleitung aktivieren

Öffne dein Event-Formular in CI Journeys und stelle folgendes ein:

• Aktion nach dem Absenden: Weiterleiten
• Weiterleitungs-URL: die vollständige URL deiner neuen Danke-Seite

⚠️ Wenn sich deine Danke-Seite auf einer anderen Domain als dein Formular befindet, bleibt sessionStorage nicht bestehen.
Verwende stattdessen localStorage, falls nötig.

Formularwerte im Session Storage speichern

Bearbeite das HTML deines Formulars und füge das Skript nach dem schliessenden </style>-Tag ein:

<script>
  document.addEventListener("d365mkt-afterformsubmit", function (event) {
    const detail = event.detail || {};
    const payload = detail.payload || {};

    const eventTitle =
      document.querySelector("h1 .msdynmkt_personalization")?.textContent?.trim() || "";

    const firstname =
      payload.firstname ||
      document.querySelector('input[name="firstname"]')?.value ||
      "";

    const formData = {
      firstname,
      event: eventTitle
    };

    sessionStorage.setItem("ciFormData", JSON.stringify(formData));
  });
</script>

Nachdem du dieses Script hinzugefügt hast, kommt der Moment der Wahrheit: Drück die Daumen, geh zu deiner Registrierungsseite, füll sie aus und …

CSP-Konfiguration (nur Power Pages)

Wenn die Seite korrekt weiterleitet, aber die dynamischen Daten nicht angezeigt werden, blockiert Power Pages möglicherweise Inline-Scripts.

Um das zu lösen, können wir unsere Power Pages entsprechend anpassen. Ich habe dazu einen perfekten Artikel gefunden 👉 Power Pages CSP: Starter Settings

Füge dies zu deinen CSP-Einstellungen hinzu:

script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.microsoft.com content.powerapps.com https://*.azureedge.net;

Fazit

Deine Danke-Seite von der einfachen Standardnachricht zu einer dynamischen, gebrandeten Erfahrung aufzuwerten, ist eine kleine Änderung mit grossem Effekt.

Indem du Werte während der Übermittlung im sessionStorage speicherst und sie in Power Pages einfügst, kannst du:

• die Bestätigung personalisieren
• deine Marke stärker hervorheben
• Nutzer zu sinnvollen nächsten Schritten leiten
• dieses Muster in allen CI-Journeys-Formularen wiederverwenden

Es ist eine leichtgewichtige Technik, die das Nutzererlebnis deutlich verbessert und deine Eventflows professioneller und durchdachter wirken lässt.

Wenn du es ausprobierst, würde ich gern hören, wie es für dich funktioniert hat - schreib mir eine E-Mail oder markiere mich auf LinkedIn!