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

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:

Name Formats:

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

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

Security

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