Documentation

Google Tag Manager Integration Guide

Overview

DepartCart's GTM integration provides the fastest way to add seat selection and ancillary services to your website. Simply add our GTM code to your confirmation pages, and seat selection panels will automatically appear for eligible bookings.

Benefits

  • Zero Development Time: Just add GTM code - no server changes required
  • Auto-Detection: Finds PNR and passenger data from your existing pages
  • Modal Interface: Clean overlay - no page navigation needed
  • Fully Responsive: Works on desktop, tablet, and mobile
  • Secure: All passenger data encrypted before transmission
  • Revenue: 15-25% conversion rate with $45-85 average order value

Quick Setup (5 minutes)

1. Add GTM Code

Copy this code into a new GTM tag:

<script>
(function() {
    // Ultra-minimal GTM injectable - just loads the script, no logic
    var script = document.createElement('script');
    script.src = 'https://departcart.com/static/loaders-dist/seat_selection_loader.js';
    script.setAttribute('data-gtm-source', 'true');
    document.head.appendChild(script);
})();
</script>

2. Configure Brand Name

Replace YOUR_BRAND_NAME in the code above with your actual brand name (provided during onboarding).

3. Set Up Trigger

Create a GTM trigger that fires on pages containing booking confirmations:

Trigger Type: Page View
Trigger Conditions: - Page URL contains: confirmation OR booking OR pnr - Page Path matches: /booking-confirmation OR /manage-booking OR similar

4. Test & Publish

  1. Use GTM Preview mode to test on a booking confirmation page
  2. Verify the seat selection panel appears
  3. Test a sample seat selection flow
  4. Publish the GTM container

Advanced Configuration

Custom Element Selectors

If your booking confirmation pages use different CSS classes, update the targetSelectors array:

targetSelectors: [
    '.your-custom-booking-class',
    '#booking-confirmation-section',
    '[data-booking-type="confirmation"]'
]

Debug Mode

Enable debug mode to see console logs during development:

debugMode: true  // Shows detailed console logs

Custom Styling

Add custom CSS to match your brand:

<style>
.aa-seat-selection-panel {
    margin: 25px 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
}

.aa-seat-selection-panel h3 {
    color: #your-brand-color;
    font-family: your-brand-font;
}
</style>

Data Detection

Automatic PNR Detection

Our script automatically searches for PNR data using these methods:

  1. Text Pattern Matching: Looks for airline PNR formats (6 characters, mix of letters/numbers)
  2. Element Attributes: Checks data-pnr, data-booking-reference, etc.
  3. URL Parameters: Extracts from ?pnr= or ?confirmation= parameters
  4. Page Title/Meta: Searches page title and meta tags

Passenger Name Detection

Passenger names are extracted from:

  1. Form Fields: Input fields with names like lastName, surname, passenger_name
  2. Display Text: Text near PNR that matches name patterns
  3. Structured Data: JSON-LD or microdata passenger information
  4. Table Data: Passenger tables in booking summaries

Supported Data Formats

PNR Formats:

  • ABC123 (6 characters)
  • A1B2C3 (alphanumeric)
  • ABCDEF (all letters)
  • 123456 (all numbers)

Name Formats:

  • SMITH (last name only)
  • John SMITH (first + last)
  • SMITH, John (last, first)
  • SMITH/JOHN (last/first)

Troubleshooting

Panel Not Appearing

  1. Check Page Elements: Verify your confirmation pages have elements matching the targetSelectors
  2. Enable Debug Mode: Set debugMode: true and check browser console
  3. Check GTM Trigger: Ensure trigger fires on confirmation pages
  4. Verify Network: Check browser Network tab for script loading

PNR Not Detected

  1. Manual Detection: Add PNR data attributes to your HTML:
<div class="booking-summary" data-pnr="ABC123" data-last-name="SMITH">
  1. Custom Extraction: Contact support@departcart.com for custom data extraction rules

Styling Issues

  1. Z-Index Conflicts: Add CSS to ensure panels appear above other content:
.aa-seat-selection-panel { z-index: 1000; position: relative; }
  1. Responsive Issues: Ensure parent containers don't constrain panel width

Testing Checklist

  • [ ] GTM tag fires on confirmation pages
  • [ ] Seat selection panel appears in correct location
  • [ ] PNR and passenger name detected correctly
  • [ ] Seatmap modal opens when "Select Seats" is clicked
  • [ ] Payment flow completes successfully
  • [ ] Confirmation email received
  • [ ] Works on mobile devices
  • [ ] No JavaScript errors in console

Sample Page HTML

For optimal detection, structure your confirmation pages like this:

<div class="booking-confirmation">
    <h2>Booking Confirmed</h2>

    <div class="flight-details" data-pnr="ABC123">
        <h3>Flight Information</h3>
        <p><strong>Confirmation Code:</strong> ABC123</p>
        <p><strong>Passenger:</strong> John SMITH</p>
        <p><strong>Flight:</strong> AA1234 JFK → LAX</p>
        <p><strong>Date:</strong> June 20, 2025</p>
    </div>

    <!-- DepartCart seat selection panel will appear here -->

    <div class="booking-actions">
        <button>View Itinerary</button>
        <button>Manage Booking</button>
    </div>
</div>

Performance Impact

  • Script Size: 45KB compressed
  • Load Time: ~200ms on average
  • Lazy Loading: Only loads when booking detected
  • Caching: CDN cached with 24-hour expiry
  • No Dependencies: Pure JavaScript, no external libraries

Security

  • HTTPS Only: All communication encrypted
  • Data Encryption: PNR/passenger data encrypted before transmission
  • No Storage: No local storage or cookies used
  • GDPR Compliant: No personal data stored on client

Support & Monitoring

Real-time Monitoring

Monitor GTM integration performance:

// Add to your analytics
gtag('event', 'departcart_panel_shown', {
    'event_category': 'ancillaries',
    'event_label': 'seat_selection'
});

Error Reporting

Automatic error reporting helps us improve the integration:

window.addEventListener('error', function(e) {
    if (e.filename && e.filename.includes('departcart')) {
        // Error in DepartCart code - automatically reported
    }
});

Support Contacts

Next Steps

  1. Get Brand Credentials: Contact integration@departcart.com
  2. Implement GTM Code: Copy code above and configure brand name
  3. Test Integration: Use preview mode to validate
  4. Go Live: Publish GTM container
  5. Monitor Performance: Track conversion rates and revenue

For technical support during implementation, email gtm-support@departcart.com