Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Integrations

Events dynamic thank you page system

System Overview

This system creates a single, dynamic thank you page that displays event-specific content pulled from a Webflow CMS collection based on URL parameters. It integrates with HubSpot forms and Google Tag Manager for comprehensive event registration tracking.

Architecture

HubSpot Form → Redirect with ?event=slug → Thank You Page → JavaScript → Show Matching Content
                                                    ↓
                                              GTM DataLayer → GA4 Conversion

Technical Implementation

Core Components

  1. Webflow CMS Collection: "CAS Events" with thank you content fields
  2. Static Thank You Page: /registration/thank-you with Collection List
  3. JavaScript: Client-side content filtering and GTM integration
  4. GTM Integration: DataLayer events for conversion tracking

Data Flow

  1. User submits HubSpot form
  2. Form redirects to /registration/thank-you?event={slug}
  3. JavaScript reads URL parameter and finds matching content
  4. Script shows/hides Collection List items based on data-event-slug attribute
  5. Matching content displays, others are hidden
  6. DataLayer event fires for GTM tracking
  7. Fallback content shows if no match or content is empty

Webflow Setup

Collection Schema

Collection Name: CAS Events

Required Fields:

  • name (Plain Text) - Event name
  • slug (Plain Text) - URL-friendly identifier
  • thank-you-title (Plain Text) - Custom thank you page title
  • thank-you-message (Rich Text) - Main thank you content
  • thank-you-image (Image) - Optional event image
  • additional-instructions (Rich Text) - Next steps/details

Page Structure

URL: /registration/thank-you

<section class="section">
 <div class="u-container">
   <div class="thank_you_message_wrap">
     <!-- Collection List: CAS Events -->
     <div class="thank_you_list_wrapper w-dyn-list" style="display: none;">
       <div role="list" class="thank_you_list _w-dyn-list w-dyn-items">
         <div data-event-slug="[Event Slug]" role="listitem" class="thank_you_list_item w-dyn-item">
           <div class="thank_you_message_contain">
             <h1>[Thank You Title]</h1>
             <div class="w-richtext">[Thank You Message]</div>
             <div class="w-richtext">[Additional Instructions]</div>
             <a href="/cas-events" class="button is-medium w-button">View all events</a>
           </div>
         </div>
       </div>
     </div>
     
     <!-- Fallback Content -->
     <div id="fallback-content" class="thank_you_message_default" style="display:none;">
       <h1>Thank you for registering!</h1>
       <p>We'll send you event details via email soon.</p>
       <a href="/cas-events" class="button is-medium w-button">View all events</a>
     </div>
   </div>
 </div>
</section>

Critical Setup Requirements

Collection Item Data Attribute:

  • Add custom attribute: data-event-slug="[Event Slug]" to collection item wrapper

Collection List Initial State:

  • Set display: none on .thank_you_list_wrapper in Webflow Designer

CSS Structure:

.thank_you_message_wrap {
 flex-flow: column;
 justify-content: flex-start;
 align-items: center;
 display: flex;
 min-height: 300px;
 padding: 40px 20px;
}

JavaScript Implementation

Core Script

Location: Page Settings → Custom Code → Before </body> tag

document.addEventListener('DOMContentLoaded', function() {
 const urlParams = new URLSearchParams(window.location.search);
 const targetEventSlug = urlParams.get('event');
 
 if (!targetEventSlug) {
   showFallbackContent();
   return;
 }
 
 const collectionItems = document.querySelectorAll('[data-event-slug]');
 let foundMatch = false;
 
 collectionItems.forEach(item => {
   const itemSlug = item.getAttribute('data-event-slug');
   
   if (itemSlug === targetEventSlug) {
     const hasContent = checkIfItemHasContent(item);
     
     if (hasContent) {
       // Show collection list and specific item
       const collectionList = document.querySelector('.thank_you_list_wrapper');
       if (collectionList) collectionList.style.display = 'block';
       item.style.display = 'block';
       
       // Hide fallback content
       const fallbackContent = document.getElementById('fallback-content');
       if (fallbackContent) fallbackContent.style.display = 'none';
       
       foundMatch = true;
     } else {
       showEnhancedFallback(targetEventSlug);
       foundMatch = true;
     }
     
     pushToDataLayer(targetEventSlug);
   } else {
     item.style.display = 'none';
   }
 });
 
 if (!foundMatch) {
   showFallbackContent();
 }
});

Content Detection Logic

The system intelligently detects whether an event has custom thank you content:

function checkIfItemHasContent(item) {
 const titleElement = item.querySelector('h1');
 const messageElements = item.querySelectorAll('.w-richtext');
 
 // Check for non-empty title
 const hasTitle = titleElement &&
                 !titleElement.classList.contains('w-dyn-bind-empty') &&
                 titleElement.textContent.trim() !== '';
 
 // Check for rich text content
 let hasMessage = false;
 messageElements.forEach(element => {
   if (!element.classList.contains('w-dyn-bind-empty') &&
       element.textContent.trim() !== '') {
     hasMessage = true;
   }
 });
 
 return hasTitle || hasMessage;
}

Fallback Handling

Enhanced Fallback (when event exists but no content):

  • Shows personalized message with event name derived from slug
  • Includes generic next steps and instructions

Standard Fallback (when no event found):

  • Shows generic thank you message
  • Directs users to events listing

Error Handling

  • No URL parameter: Shows standard fallback
  • Invalid event slug: Shows standard fallback
  • Missing content: Shows enhanced fallback with event name
  • Missing DOM elements: Graceful degradation with null checks
  • GTM unavailable: Script continues without tracking

GTM Integration

DataLayer Schema

{
 'event': 'cas_event_thank_you',           // Event name for GTM trigger
 'event_type': 'thank_you_page_view',      // Success indicator
 'event_slug': 'stn-user-meeting-2025',   // Specific event identifier
 'page_type': 'thank_you',                 // Page categorization
 'source': 'cas_events',                   // Traffic source identifier
 'page_url': 'https://site.com/registration/thank-you?event=stn-user-meeting-2025'
}

Required GTM Setup

Variables (Data Layer Variables):

  • DLV - Event Slug → event_slug
  • DLV - Event Type → event_type
  • DLV - Source → source
  • DLV - Page Type → page_type

Trigger:

  • Type: Custom Event
  • Event Name: cas_event_thank_you
  • Condition: {{DLV - Event Type}} equals thank_you_page_view

Conversion Tag:

  • Type: Google Analytics: GA4 Event
  • Event Name: conversion
  • Parameters: Event slug, source, and conversion tracking IDs

HubSpot Integration

Form Configuration

Redirect URL Format:

https://yoursite.com/registration/thank-you?event={EVENT_SLUG}

Examples:

https://cas.org/registration/thank-you?event=stn-user-meeting-2025-munich
https://cas.org/registration/thank-you?event=ai-webinar-2024
https://cas.org/registration/thank-you?event=cas-conference-nyc

Requirements

  • Event slug in URL must exactly match Webflow CMS slug field
  • Use lowercase, hyphens, numbers only (URL-safe characters)
  • No spaces or special characters
  • Consistent naming convention across all events

Performance & Optimization

Performance Characteristics

  • Client-Side Rendering: No API calls required, content pre-loaded
  • Minimal JavaScript: Lightweight script with essential functionality
  • CSS Display Control: Simple show/hide rather than DOM manipulation
  • Graceful Degradation: Fallback content ensures users always see something

Scalability Considerations

  • Current system efficiently handles hundreds of events
  • All events loaded on page (acceptable for most use cases)
  • For thousands of events, consider API-based approach
  • Monitor page load times with large collections

Browser Compatibility

  • Modern browsers (ES6+ support required for URLSearchParams)
  • Graceful degradation for older browsers (shows fallback)
  • No external dependencies

Maintenance & Updates

Adding New Events

Marketer Workflow:

  1. Create event in Webflow CMS with thank you content
  2. Configure HubSpot form with correct redirect URL
  3. Test the complete flow

No Developer Changes Required for new events.

Content Updates

  • Thank You Content: Updated directly in Webflow CMS
  • Styling Changes: Standard Webflow Designer updates
  • Fallback Content: HTML update in fallback div
  • Tracking Changes: GTM container modifications

System Modifications

Common Changes:

  • Additional DataLayer Fields: Modify pushToDataLayer() function
  • New Tracking Events: Add additional dataLayer.push() calls
  • Enhanced Fallback Logic: Update showEnhancedFallback() function
  • Content Detection Rules: Modify checkIfItemHasContent() function

Troubleshooting

Debug Console Messages

console.log('Looking for event:', targetEventSlug);
console.log('Found collection items:', collectionItems.length);
console.log('Checking item slug:', itemSlug);
console.log('Event found with content, showing collection item');
console.log('DataLayer event pushed:', eventSlug, eventType);

Common Issues

Slug Mismatch:

  • Verify exact match between Webflow CMS slug and HubSpot URL
  • Check for typos, extra characters, or case differences

Missing Data Attribute:

  • Ensure data-event-slug attribute is properly set on collection items
  • Verify attribute connects to correct CMS field

Content Not Displaying:

  • Check Collection List initial display setting (should be display: none)
  • Verify .thank_you_message_wrap CSS for proper flex layout
  • Confirm fallback content is properly hidden when dynamic content shows

GTM Tracking Issues:

  • Verify dataLayer events fire in GTM Preview
  • Check GTM variables and triggers configuration
  • Confirm GA4 conversion setup

Page Layout Problems:

  • Inspect flex container CSS properties
  • Verify minimum height and padding settings
  • Check for conflicting CSS rules

Testing Checklist

Functional Testing:

  • [ ] Valid event slug shows correct content
  • [ ] Invalid event slug shows fallback
  • [ ] No event parameter shows fallback
  • [ ] Enhanced fallback displays for events without content
  • [ ] DataLayer events fire correctly
  • [ ] GTM triggers activate
  • [ ] GA4 conversions record
  • [ ] Mobile display works correctly
  • [ ] Page loads without JavaScript errors

Content Testing:

  • [ ] Event-specific title displays
  • [ ] Rich text content renders properly
  • [ ] Images load correctly
  • [ ] Buttons link to correct destinations
  • [ ] Fallback content shows appropriate messaging

Security Considerations

Input Validation

  • URL parameters are read-only, no user input processing
  • No direct DOM innerHTML injection with user data
  • Attribute matching uses strict equality comparison
  • All dynamic content sourced from trusted Webflow CMS

XSS Prevention

  • No eval() or similar dynamic code execution
  • DataLayer values sanitized by structure
  • Rich text content filtered by Webflow CMS

Future Enhancements

Potential Improvements

  1. API Integration: Real-time content fetching for very large collections
  2. A/B Testing: Multiple thank you variations per event
  3. Personalization: User-specific content based on form data
  4. Server-Side Rendering: Better SEO for thank you content
  5. Analytics Enhancement: More detailed user journey tracking
  6. Internationalization: Multi-language thank you content
  7. Progressive Enhancement: Improved performance optimization

Migration Considerations

  • Current system provides solid foundation for future enhancements
  • Modular JavaScript structure allows for incremental improvements
  • GTM integration supports advanced tracking scenarios
  • Webflow CMS structure accommodates additional fields and functionality

Version History

  • v1.0: Initial implementation with basic event matching
  • v1.1: Added content detection and enhanced fallback logic
  • v1.2: GTM integration and conversion tracking
  • Current (v1.3): Improved fallback handling and content validation

Support Information

Key Files and Components

  • Thank You Page: /registration/thank-you
  • Webflow Collection: CAS Events
  • GTM Container: Event conversion tracking setup
  • JavaScript: Page-level custom code implementation

Contact Points

  • Webflow Updates: CMS content, page styling, collection management
  • GTM Changes: Tracking modifications, conversion goals, variable setup
  • HubSpot Configuration: Form setup, redirect URLs, lead management
  • JavaScript Issues: Core functionality, logic improvements, debugging

Documentation Updates

This documentation should be updated whenever:

  • Core functionality changes
  • New GTM tracking requirements are added
  • HubSpot integration process changes
  • Webflow collection schema is modified
  • Troubleshooting procedures are refined

‍

On this page

Text Link