# GTM Integration Guide

URL: https://all-ancillaries-9z82vkas5-britoncos-projects.vercel.app/docs/gtm
Updated: 2025-09-03

Google Tag Manager setup for low-touch DepartCart rollout.

# 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**: surfaces relevant extras to passengers who have already booked

## Quick Setup (5 minutes)

### 1. Add GTM Code

Copy this code into a new GTM tag:

```javascript
<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:

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

### Debug Mode

Enable debug mode to see console logs during development:

```javascript
debugMode: true  // Shows detailed console logs
```

### Custom Styling

Add custom CSS to match your brand:

```html
<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:

```html
<div class="booking-summary" data-pnr="ABC123" data-last-name="SMITH">
```

2. **Custom Extraction**: Contact [support@departcart.com](mailto:support@departcart.com) for custom data extraction rules

### Styling Issues

1. **Z-Index Conflicts**: Add CSS to ensure panels appear above other content:

```css
.aa-seat-selection-panel { z-index: 1000; position: relative; }
```

2. **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:

```html
<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:

```javascript
// 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:

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

### Support Contacts

- **GTM Integration**: [gtm-support@departcart.com](mailto:gtm-support@departcart.com)
- **Technical Issues**: [support@departcart.com](mailto:support@departcart.com)  

---

## Next Steps

1. **Get Brand Credentials**: Contact [integration@departcart.com](mailto: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](mailto:gtm-support@departcart.com)*