gusto nako nga ug naay mo book ani nga code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Oslob Whale Shark Booking</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f0f8ff; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; padding: 20px; } header { background: #0077be; color: #ffffff; padding-top: 30px; min-height: 70px; border-bottom: #e8491d 3px solid; } header h1 { margin: 0; text-align: center; padding-bottom: 20px; } .booking-form { background: #ffffff; border-radius: 5px; padding: 20px; margin-top: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .btn { display: inline-block; background: #0077be; color: #ffffff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } .btn:hover { background: #005f9e; } @media(max-width: 768px) { .container { width: 95%; } } </style> </head> <body> <header> <div class="container"> <h1>Oslob Whale Shark Booking</h1> </div> </header><div class="container">
<form class="booking-form">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="date">Date of Visit:</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required>
</div>
<div class="form-group">
<label for="package">Package:</label>
<select id="package" name="package" required>
<option value="">Select a package</option>
<option value="basic">Basic Experience - ₱1,000</option>
<option value="premium">Premium Experience - ₱1,500</option>
<option value="vip">VIP Experience - ₱2,500</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn">Book Now</button>
</div>
</form>
</div>
kay ma punta ang data dre sa analytic , maoy gamiton para sa analytiv ang mga mo book
Alright, I understand you want to send the booking data to an analytics system when someone books using this form. To achieve this, we'll need to add some JavaScript to the page to handle the form submission and send the data to an analytics service. For this example, I'll use Google Analytics 4 (GA4) as it's a common and free analytics platform.
Here's the modified HTML with added JavaScript to send the booking data to Google Analytics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oslob Whale Shark Booking</title>
<!-- Google Analytics 4 tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<style>
/* Your existing CSS styles here */
</style>
</head>
<body>
<header>
<div class="container">
<h1>Oslob Whale Shark Booking</h1>
</div>
</header>
<div class="container">
<form id="bookingForm" class="booking-form">
<!-- Your existing form fields here -->
</form>
</div>
<script>
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent the form from submitting normally
// Get form data
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var date = document.getElementById('date').value;
var guests = document.getElementById('guests').value;
var package = document.getElementById('package').value;
// Send event to Google Analytics
gtag('event', 'book_whale_shark_tour', {
'event_category': 'Booking',
'event_label': package,
'value': calculateBookingValue(package, guests),
'name': name,
'email': email,
'date': date,
'guests': guests
});
// You can add code here to submit the form data to your server if needed
alert('Booking submitted successfully!');
});
function calculateBookingValue(package, guests) {
var pricePerGuest = 0;
switch(package) {
case 'basic':
pricePerGuest = 1000;
break;
case 'premium':
pricePerGuest = 1500;
break;
case 'vip':
pricePerGuest = 2500;
break;
}
return pricePerGuest * guests;
}
</script>
</body>
</html>Here's what's been added:
<head> section. Replace G-XXXXXXXXXX with your actual GA4 measurement ID.JavaScript code at the bottom of the <body> that:
To use this:
G-XXXXXXXXXX with your actual Google Analytics 4 measurement ID.Now, when someone fills out the form and clicks "Book Now", the booking data will be sent to Google Analytics as an event. You can then view and analyze this data in your GA4 dashboard.
Remember:
<div class="container">
<form class="booking-form">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="date">Date of Visit:</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required>
</div>
<div class="form-group">
<label for="package">Package:</label>
<select id="package" name="package" required>
<option value="">Select a package</option>
<option value="basic">Basic Experience - ₱1,000</option>
<option value="premium">Premium Experience - ₱1,500</option>
<option value="vip">VIP Experience - ₱2,500</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn">Book Now</button>
</div>
</form>
</div>
To make the Oslob Whale Shark Booking system functional and send data to an analytics system, we'll need to modify the HTML and add some JavaScript. We'll use the fetch API to send the booking data to a server, and we'll simulate sending data to an analytics system. Here's how we can modify the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oslob Whale Shark Booking</title>
<style>
/* Your existing CSS styles here */
</style>
</head>
<body>
<header>
<div class="container">
<h1>Oslob Whale Shark Booking</h1>
</div>
</header>
<div class="container">
<form id="bookingForm" class="booking-form">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="date">Date of Visit:</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required>
</div>
<div class="form-group">
<label for="package">Package:</label>
<select id="package" name="package" required>
<option value="">Select a package</option>
<option value="basic">Basic Experience - ₱1,000</option>
<option value="premium">Premium Experience - ₱1,500</option>
<option value="vip">VIP Experience - ₱2,500</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn">Book Now</button>
</div>
</form>
</div>
<script>
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const bookingData = Object.fromEntries(formData.entries());
// Simulate sending data to a server
fetch('https://api.example.com/bookings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(bookingData),
})
.then(response => response.json())
.then(data => {
console.log('Booking successful:', data);
// Simulate sending data to analytics
sendToAnalytics(bookingData);
alert('Booking successful! Thank you for your reservation.');
this.reset();
})
.catch(error => {
console.error('Error:', error);
alert('There was an error processing your booking. Please try again.');
});
});
function sendToAnalytics(data) {
// Simulate sending data to analytics
console.log('Sending to analytics:', data);
// In a real scenario, you would send this data to your analytics service
// For example, using Google Analytics:
// gtag('event', 'booking', {
// 'event_category': 'Reservations',
// 'event_label': data.package,
// 'value': calculateBookingValue(data.package, data.guests)
// });
}
function calculateBookingValue(package, guests) {
const prices = {
'basic': 1000,
'premium': 1500,
'vip': 2500
};
return prices[package] * guests;
}
</script>
</body>
</html>This modified version:
fetch API.calculateBookingValue function that could be used for analytics purposes.Note that this is a client-side simulation. In a real-world scenario:
To fully integrate this with the analytics dashboard you provided, you would need to set up a backend that stores the booking data and provides endpoints for the dashboard to retrieve and display the data.
Adds an event listener to the form submission.
Prevents the default form submission and instead collects the form data.
Simulates sending the booking data to a server using the fetch API.
On successful booking, it simulates sending data to an analytics system.
Provides user feedback with alerts for successful booking or errors.
Includes a calculateBookingValue function that could be used for analytics purposes.
wala lagi ni nakita tanan