No desperdicies tu página de agradecimiento: utiliza datos dinámicos para impulsar las siguientes acciones

Si has trabajado con Dynamics 365 Customer Insights - Journeys, probablemente te hayas dado cuenta de que la experiencia predeterminada tras enviar un formulario -un simple logotipo y un mensaje de “Gracias”- suele resultar poco llamativa para los usuarios.

No eres el único 😁 Muchos equipos desean algo más atractivo, más alineado con la marca y más útil que la versión predefinida. Por suerte, Dynamics 365 te permite redirigir a los usuarios a una página de agradecimiento personalizada, dándote control total sobre el diseño y el contenido.

ANTES: DESPUÉS:

En este artículo veremos cómo crear rápidamente una página de agradecimiento personalizada y dinámica, incluyendo cómo pasar los datos enviados en el formulario usando sessionStorage para poder saludar a cada usuario con información relevante justo después de que pulse enviar.

Esta idea (usar sessionStorage) proviene de un artículo de la fantástica Megan V Walker - muy recomendable si te interesa este tema 👉 Format Session Registration Confirmation Page On Your Own Domain

TL;DR:
Dynamics 365 CI Journeys te permite redirigir los envíos de formularios a una página de agradecimiento personalizada.
Guardando los datos del formulario en sessionStorage durante el onsubmit, puedes crear una experiencia de agradecimiento totalmente personalizada que se actualiza al instante, sin necesidad de llamadas al servidor.

Paso 1: Crea tu página de agradecimiento personalizada

Continuaremos con la página de ejemplo que creé en Power Pages en mi artículo anterior. Y como estamos usando Power Pages, lo mantendremos sencillo y haremos clic en + Página en el editor del sitio web.

El resultado no está nada mal 😎

Ahora vamos a personalizarla.

Añade marcadores de posición dinámicos

Abre Editar código, y luego podremos modificar nuestras etiquetas h1 y h3 para añadir una etiqueta span que cambiaremos dinámicamente. Aquí está mi página:

<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>

Añade un script para actualizar los marcadores de posición

Abre el archivo *.customjs.js de la nueva página de agradecimiento y pega el siguiente JavaScript, que sustituirá los valores dinámicos de la página por las variables que guardaremos en el session storage cuando se envíe el formulario:

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);
    }
  }

Tu página debería verse así:

Paso 2: Configura el formulario en Customer Insights Journeys

Habilita la redirección

Abre tu formulario del evento en CI Journeys y configura:

• Acción tras el envío: Redirigir
• URL de redirección: la URL completa de tu nueva página de agradecimiento

⚠️ Si tu página de agradecimiento está en un dominio diferente al del formulario, sessionStorage no se conservará.
Usa localStorage en su lugar si es necesario.

Guarda los valores del formulario en el session storage

Edita el HTML de tu formulario y pega el script después de la etiqueta de cierre </style>:

<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>

Después de añadir este script llega el momento de la verdad: cruza los dedos, ve a tu página de registro, rellénala y…

Configuración de CSP (solo Power Pages)

Si la página redirige correctamente pero no muestra los datos dinámicos, es posible que Power Pages esté bloqueando scripts inline.

Para solucionarlo, podemos ajustar nuestros Power Pages para permitirlo. Encontré un artículo perfecto sobre esto 👉 Power Pages CSP: Starter Settings

Añade esto a tu configuración de CSP:

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

Conclusión

Mejorar tu página de agradecimiento pasando del mensaje predeterminado a una experiencia dinámica y alineada con tu marca es un pequeño cambio con un gran impacto.

Al capturar los valores en sessionStorage durante el envío e inyectarlos en Power Pages, puedes:

• personalizar la confirmación
• reforzar tu marca
• guiar a los usuarios hacia los siguientes pasos relevantes
• reutilizar este patrón en todos los formularios de CI Journeys

Es una técnica ligera que mejora notablemente la experiencia del usuario y hace que tus flujos de eventos se sientan más pulidos e intencionales.

Si lo pruebas, me encantaría saber cómo te ha funcionado - envíame un email o etiquétame en LinkedIn.