-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo1.html
82 lines (70 loc) · 3.16 KB
/
demo1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GA4 Demo1 - Booking Analytics</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=GTM-KJ5S2NQK'+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KJ5S2NQK');</script>
<!-- End Google Tag Manager -->
<style>
body { font-family: Arial, sans-serif; background-color: #eef2f3; text-align: center; padding: 20px; }
.container { background: white; padding: 20px; max-width: 400px; margin: auto; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
select, input, button { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 5px; }
button { cursor: pointer; color: white; }
.btn-submit { background: #007bff; }
.btn-export { background: #28a745; }
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KJ5S2NQK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<h2>GA4 Booking Analytics</h2>
<label>Select Service Type:</label>
<select id="serviceType">
<option>Hotel Reservation</option>
<option>Flight Booking</option>
<option>Car Rental</option>
<option>Tour Package</option>
<option>Event Tickets</option>
</select>
<label>Select Preferred Language:</label>
<select id="preferredLanguage">
<option>English</option>
<option>Spanish</option>
<option>French</option>
</select>
<label>Destination:</label>
<input type="text" id="destination" placeholder="Enter Destination">
<label>Booking Source:</label>
<input type="text" id="bookingSource" placeholder="Enter Booking Source">
<button class="btn-submit" onclick="trackEvent('Check Availability')">Check Availability</button>
<button class="btn-export" onclick="trackEvent('Confirm Booking')">Confirm Booking</button>
</div>
<script>
function trackEvent(buttonName) {
let eventData = {
event: "button_click",
app_name: "GA4_Booking",
service_type: document.getElementById("serviceType").value,
action: "button_click",
button_name: buttonName,
language: document.getElementById("preferredLanguage").value,
destination: document.getElementById("destination").value,
booking_source: document.getElementById("bookingSource").value,
};
console.log("Pushing to Data Layer:", eventData);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(eventData);
}
</script>
</body>
</html>