The below training guide is intended as a reference for those wishing to implement google tag manager on the HART booking engine. 

The GTM code is installed on the booking engines by going to Cloud Reservations, Hotel > Configuration and then you will see the tag manager cell.

Note, if you are using tag manager, then you should not have anything in the GA4 or UA fields as this can cause duplication. 

The below data layer implementations are then configured on your tag manager account. We do not provide support for the implementation of these layers.

Room Engine Datalayer Implementation 

Index Page 

dataLayer.push({ 

   'event': 'VirtualPageView', 

   'HotelID': '%Variable%'  

   'VirtualPage': '/booking-engine/check-availability' 

}); 

Room/Rate Selection Page 

dataLayer.push({ 

   'event': 'VirtualPageView', 

   'HotelID': '%Variable%'  

   'VirtualPage': '/booking-engine/availability-results', 

   'check_in_date': '%Variable%', 

   'check_out_date': '%Variable%', 

   'days_to_check_in': '%Variable%', 

   'rooms': '%Variable%', 

   'stay_length': '%Variable%', 

   'adults': '%Variable%', 

   'children': '%Variable%' 

}); 

Extras Page 

dataLayer.push({ 

   'event': 'VirtualPageView', 

   'HotelID': '%Variable%'  

   'VirtualPage': '/booking-engine/packages' 

}); 

Checkout Page 

dataLayer.push({ 

   'event': 'VirtualPageView', 

   'HotelID': '%Variable%'  

   'VirtualPage': '/booking-engine/checkout' 

   'check_in_date': '%Variable%', 

   'check_out_date': '%Variable%', 

   'rooms': '%Variable%', 

   'stay_length': '%Variable%', 

   'adults': '%Variable%', 

   'children': '%Variable%', 

   'price_total': '%Variable%', 

   'average_daily_rate': '%Variable% 

}); 

Summary Page (transacttion) 

products.push({ 

  'sku': %Variable%, 

  'name': '%Variable%' 

  'category': '%Variable%', 

  'price': '%Variable%', 

  'quantity': '%Variable%' 

}); 

dataLayer.push({ 

    'event' : 'VirtualPageView', 

    'HotelID': '%Variable%', 

    'VirtualPage': '/booking-engine/booking-confirmation', 

    'transactionId': '%Variable%', 

    'transactionTotal': '%Variable%', 

    'transactionCurrency': '%Variable%', 

    'transactionProducts': products 

}); 

Restaurant Engine Datalayer Implementation

Index Page

dataLayer.push({

               'event' : 'VirtualPageView',

               'VirtualPage': '/restaurant-booking/check-availability'

}); 

Checkout Page

dataLayer.push({

               'event' : 'VirtualPageView',

               'VirtualPage': '/restaurant-booking/checkout'

});

Booking Submission

dataLayer.push({

'event': 'VirtualPageView',

'VirtualPage': '/restaurant-booking/booking-confirmation',

'peopleQty': '%Variable%',

'restaurantName': '%Variable%',

'bookedService': '%Variable%',

'arrival': '%Variable%'

});

Spa Engine Datalayer Implementation

Index Page

dataLayer.push({

    'event': 'VirtualPageView',

    'VirtualPage': '/spa-booking/choose-service'

});

Service Select Page
 
 dataLayer.push({

    'event': 'VirtualPageView',

    'VirtualPage': '/spa-booking/check-availability',

    'serviceName': dataItem.service_name

});

Checkout Page

dataLayer.push({

    'event': 'VirtualPageView',

    'VirtualPage': '/spa-booking/checkout'

});

Booking Submission

dataLayer.push({

    'event': 'VirtualPageView',

    'VirtualPage': '/spa-booking/booking-confirmation',

    '`arrival': '%Variable%',

    'bookedService': '%Variable%',

    'price': '%Variable%'

});

Golf Engine Datalayer Implementation

Index Page

dataLayer.push({
'event': 'VirtualPageView',
'VirtualPage': '/golf-booking/check-availability'
 });

Checkout Page

dataLayer.push({

     'event' : 'VirtualPageView',

     'VirtualPage': '/golf-booking/checkout'

});

Booking Submission
 dataLayer.push({

   'event': 'VirtualPageView',

   'VirtualPage': '/golf-booking/booking-confirmation',

   'peopleQty': '%Variable%',

   'hotelName': '%Variable%',

   'totalCost': '%Variable%'

});

Cookery Engine Datalayer Implementation

Index Page

dataLayer.push({
'event' : 'VirtualPageView',
'HotelID': '%Variable%',
'VirtualPage': '/event-booking/check-availability'
  });

Selection Page

dataLayer.push({
'event' : 'VirtualPageView',
'HotelID': %Variable%',
'VirtualPage': '/event-booking/event-selection'
  });

Checkout Page

dataLayer.push({
'event' : 'VirtualPageView',
'HotelID': %Variable%
'VirtualPage': '/event-booking/checkout'
  });

Ecommerce

dataLayer = [];

                     dataLayer.push({

                         'event': 'VirtualPageView',

                         'HotelID': %Variable%,

                         'VirtualPage': '/event-booking/booking-confirmation',

                         'ecommerce': {

                             'currency': 'GBP',

                             'value': %Variable%,

                             'affiliation': %Variable%,

                             'transaction_id': %Variable%,

                             'items': [{

                                 'item_name': %Variable%,

                                 'item_id': %Variable%,

                                 'price': %Variable%,

                                 'quantity': '1'

                             }]

                        }

                    });  

Voucher Engine Datalayer Implementation

Index Page (Category Select)

dataLayer.push({
'event' : 'VirtualPageView',
'HotelID': '%hotel_ID%',
'VirtualPage': /voucher-engine/voucher-categories
  });

Voucher List Page

dataLayer.push({
'event': 'VirtualPageView',
'HotelID': %Variable%,
'VirtualPage': '/voucher-engine/voucher-list',
'category': %Variable%
 });

Voucher Select

dataLayer.push({
'event': 'VirtualPageView',
'HotelID': %Variable%
'VirtualPage': '/voucher-engine/voucher-select',
'voucher_name': %Variable%,
'value': %Variable%
 });

Checkout Page

dataLayer.push({
'event' : 'VirtualPageView',
'HotelID': %Variable%,
'VirtualPage': '/voucher-engine/checkout'
  });

Summary Page (transaction)

transactionProducts.push({
'name': %Variable%,
'sku': %Variable%,
'category': 'On Line Voucher',
'price': %Variable%,
'quantity': '1',
     'expiry': %Variable%

});

dataLayer.push({

    'event': 'VirtualPageView',

    'HotelID': %Variable%,

    'VirtualPage': '/voucher-engine/voucher-confirmation',

    'transactionId': %Variable%,

    'transactionTotal': %Variable%,

    'transactionCurrency': %Variable%,

    'transactionProducts': %Variable%

});

Spa Day Engine Datalayer Implementation

Index Page
 dataLayer.push({

  'event': 'VirtualPageView',

  'HotelID': %Variable%,

  'VirtualPage': '/spa-day-booking/check-availability'

});

Spa Day List Page
 dataLayer.push({

  'event': 'VirtualPageView',

  'HotelID': %Variable%

  'VirtualPage': '/spa-day-booking/availability-results'

});

Package Select
 dataLayer.push({

   'event': 'VirtualPageView',

   'HotelID': %Variable%

   'PackageName': %Variable%,

   'Adults': %Variable%,

   'Price': %Variable%,

   'Date': %Variable%

   'VirtualPage': '/spa-day-booking/package-select'

});

Future Availability
 dataLayer.push({

   'event': 'VirtualPageView',

   'HotelID': %Variable%

   'PackageName': %Variable%,

   'VirtualPage': '/spa-day-booking/future-availability'

});

Guest Information

dataLayer.push({

  'event': 'VirtualPageView',

  'HotelID': %Variable%

  'VirtualPage': '/spa-day-booking/guest-information'

});

Adding Guest

dataLayer.push({

  'event': 'VirtualPageView',

  'HotelID': %Variable%

  'VirtualPage': '/spa-day-booking/adding-guest'

});

Checkout Page

dataLayer.push({

  'event': 'VirtualPageView',

  'HotelID': %Variable%,

  'VirtualPage': '/spa-day-booking/checkout'

  'booking_date': %Variable%,

  'adults': %Variable%,

  'price_total': %Variable%

});

Checkout Ecommerce

transactionProducts.push({

  'sku': %Variable%,

  'name': %Variable%,

  'category': %Variable%,

  'price': %Variable%,

  'quantity': 1,

  'booking_date': %Variable%,

  'days_to_booking': %Variable%,

  'adults': %Variable%

});

dataLayer.push({

   'event': 'VirtualPageView',

   'HotelID': %Variable%,

   'SpaID': %Variable%

   'VirtualPage': '/spa-day-booking/booking-confirmation',

   'transactionId': %Variable%,

   'transactionTotal': %Variable%,

   'transactionCurrency': %Variable%,

   'transactionProducts': transactionProducts

});

GA 4 Datalayers

Room Engine

Room/Rate Selection

  window.dataLayer.push({
event: 'ga4_begin_checkout',
ecommerce: {
items: [{
item_name: '%room_name%',
item_id: '%room_id% - %rate_name%',
price: '%room_price%',
quantity: '%room_quantity%'
},{
item_name: '%add_on_name%',
item_id: '%add_on_id%',
price: '%add_on_unit_price%',
quantity: '%add_on_quantity%'
}]
}
   });

Checkout

window.dataLayer.push({
event: 'ga4_begin_checkout',
ecommerce: {
items: [{
item_name: '%room_name%',
item_id: '%room_id% - %rate_name%',
price: '%room_price%',
quantity: '%room_quantity%'
},{
item_name: '%add_on_name%',
item_id: '%add_on_id%',
price: '%add_on_unit_price%',
quantity: '%add_on_quantity%'
}]
}
   });

Summary Page

window.dataLayer.push({
event: 'ga4_purchase',
ecommerce: {
currency: '%currency_code%',
value: %transaction_total%,
tax: %tax%,
affiliation: '%hotel_name%',
transaction_id: '%transaction_id%',
items: [{
item_name: '%room_name%',
item_id: '%room_id% - %rate_name%',
price: '%room_unit_price%',
quantity: '%room_quantity%'
},{
item_name: '%add_on_name%',
item_id: '%add_on_id%',
price: '%add_on_unit_price%',
quantity: '%add_on_quantity%'
}]
}
   });

Spa Day Engine

Summary Page

window.dataLayer.push({
event: 'ga4_purchase',
arrival: %date%,
days_to_check_in: %days%,
adults: %adults%,
ecommerce: {
currency: '%currency_code%',
value: %transaction_total%,
affiliation: '%hotel_name%',
transaction_id: '%transaction_id%',
items: [{
item_name: '%package_name%',
item_id: '%package_name%',
price: '%rpackage_price%',
quantity: '1'
}]
});

 Note: the Items array will contain all packages in for the booking.