AzizDhaouadi/ga4tracking.html Secret

## ga4tracking.html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google 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>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Analytics 4 Migration Checklist</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        body section div.row {
            margin-top: 2rem;
            margin-left: 2rem;
        }

        div.row:first-of-type {
            width: 15%;
        }

        body section div.row:nth-last-of-type(1) {
            width: 50%;
        }
    </style>
</head>
<body>
    <section id="events_sandbox">
        <div class="row">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary modal-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
                Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                    ...
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="row">
            <form id="myForm">
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                  <label for="exampleInputPassword1" class="form-label">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script>
            // Identifying the modal button
            const modalButton = document.querySelector("div.row button.modal-button");

        // Adding an event listener to fire the event every time the button is clicked
        modalButton.addEventListener("click", (e) => {
            gtag('event', 'modal_button_clicked', {
                'cta': e.target.innerText
            });
        });

        // Identifying the form to be submitted
        const myForm = document.querySelector('#myForm');

        // Adding an event listener to fire the event every time the form is submitted
        myForm.addEventListener("submit", (e) => {
            gtag('event', 'submitted_form', {
                'form_id': e.target.id
            });

            gtag('set', 'user_parameters', {
                'subscription': 'Free'
                }
            );
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Google 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>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Google Analytics 4 Migration Checklist</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<style>
	body section div.row {
	margin-top: 2rem;
	margin-left: 2rem;
	}

	div.row:first-of-type {
	width: 15%;
	}

	body section div.row:nth-last-of-type(1) {
	width: 50%;
	}
	</style>
	</head>
	<body>
	<section id="events_sandbox">
	<div class="row">
	<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary modal-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
	</button>

	<!-- Modal -->
	<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	</div>
	<div class="modal-body">
	...
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary">Save changes</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="row">
	<form id="myForm">
	<div class="mb-3">
	<label for="exampleInputEmail1" class="form-label">Email address</label>
	<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
	<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
	</div>
	<div class="mb-3">
	<label for="exampleInputPassword1" class="form-label">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword1">
	</div>
	<div class="mb-3 form-check">
	<input type="checkbox" class="form-check-input" id="exampleCheck1">
	<label class="form-check-label" for="exampleCheck1">Check me out</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</div>
	</section>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	<script>
	// Identifying the modal button
	const modalButton = document.querySelector("div.row button.modal-button");

	// Adding an event listener to fire the event every time the button is clicked
	modalButton.addEventListener("click", (e) => {
	gtag('event', 'modal_button_clicked', {
	'cta': e.target.innerText
	});
	});

	// Identifying the form to be submitted
	const myForm = document.querySelector('#myForm');

	// Adding an event listener to fire the event every time the form is submitted
	myForm.addEventListener("submit", (e) => {
	gtag('event', 'submitted_form', {
	'form_id': e.target.id
	});

	gtag('set', 'user_parameters', {
	'subscription': 'Free'
	}
	);
	});
	</script>
	</body>
	</html>