Overview

Custom JavaScript code allows you to add tracking pixels, analytics events, or other custom behavior to your booking widgets beyond the standard integrations TripWorks provides. You write JavaScript code (not HTML) that executes at key points in the booking journey.

When to Use Custom Code vs. Integrations

For most tracking needs, use TripWorks' built-in integrations:

• Google Analytics - Automatic event tracking
• Google Ads - Conversion tracking
• Facebook/Meta Pixel - Facebook advertising events
• TikTok Pixel - TikTok advertising events

Custom JavaScript code is for advanced use cases not covered by standard integrations, such as:

• Custom analytics platforms
• Proprietary tracking systems
• Specialized conversion tracking
• Third-party marketing tools

When Custom Code Runs

Custom JavaScript code only runs for live customers on your published booking widget. It does not run:

• ❌ When logged-in team members use the widget
• ❌ In preview mode
• ✅ Only in production for actual customers

This ensures your analytics data remains clean and accurate.

Custom Code Events

You can add JavaScript code that executes at four key points in the booking journey:

1. On Widget Load

Executes when the booking widget first loads on the page.

Use cases: Page view tracking, initial session setup

2. On View Item

Executes when a customer views an experience detail page.

Use cases: Product view tracking, browse behavior analytics

3. On Add to Cart

Executes when a customer adds an experience to their cart.

Use cases: Add-to-cart events, funnel tracking

4. On Conversion

Executes when a booking is successfully completed.

Use cases: Purchase tracking, conversion pixels, revenue reporting

Available Variables

All custom code receives a data object with contextual information. Access variables using data.variableName.

Standard Variables (Available in All Events)

*Zero-Decimal Format: Monetary values are provided without decimal points to avoid floating-point precision issues. Multiply by 100 for cents/pence.

Examples:

• $125.00 USD → 12500
• €50.50 EUR → 5050
• £199.99 GBP → 19999

Event-Specific Variables

On View Item & On Add to Cart

On Add to Cart (Additional)

On Conversion (Additional)

Code Examples

Example 1: Log Data to Console (Debugging)

// On Conversion
console.log('Booking completed!', {
  confirmationCode: data.confirmationCode,
  total: data.total / 100, // Convert to dollars
  currency: data.currency
});

Example 2: Push Event to Google Tag Manager

// On Conversion
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'tripworks_custom_purchase',
  transactionId: data.confirmationCode,
  transactionTotal: (data.total / 100).toFixed(2),
  transactionCurrency: data.currency,
  utmSource: data.utm_source,
  utmMedium: data.utm_medium,
  utmCampaign: data.utm_campaign
});

Example 3: Track Experience View

// On View Item
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: data.experience_id,
      item_name: data.experience_name,
      item_category: 'Experience'
    }]
  }
});

Example 4: Track Add to Cart

// On Add to Cart
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    items: [{
      item_id: data.experience_id,
      item_name: data.experience_name
    }]
  }
});

Example 5: Custom Conversion Pixel

// On Conversion
var img = document.createElement('img');
img.src = 'https://tracking.example.com/pixel?transaction=' +
  encodeURIComponent(data.confirmationCode) +
  '&value=' + (data.total / 100) +
  '&currency=' + data.currency;
img.style.display = 'none';
document.body.appendChild(img);

Getting Help

To enable custom JavaScript code for your widgets:

• Contact your TripWorks account manager
• Describe your tracking requirements
• Your account manager will configure the custom code for you

For technical support:

• Email: support@tripworks.com
• Include your widget name and tracking requirements