Add GA4

Author: kzeedev

public/js/script.js

@@ -25,10 +25,11 @@ $(() => {
         loadingSpinner.classList.add('d-flex');
 
         let data = new FormData(event.target);
+        let jsonData = formDataToJSON(data);
         let succeed = false;
         fetch(event.target.action, {
             method: inputForm.method,
-            body: formDataToJSON(data),
+            body: jsonData,
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json'
@@ -59,7 +60,9 @@ $(() => {
             backButton.classList.remove("d-none");
             copyButton.classList.remove("d-none");
             downloadButton.classList.remove("d-none");
-        })
+        });
+        // GA4
+        gtag('event', 'submit_form', validateDataToGA4(jsonData));
     };
 
     backButton.onclick = () => {
@@ -132,6 +135,12 @@ function formDataToJSON(formData) {
     return JSON.stringify(data);
 }
 
+function validateDataToGA4(formData) {
+    let data = JSON.parse(formData);
+    delete data['cf-turnstile-response'];
+    return JSON.stringify(data);
+}
+
 function showAlert(message) {
     const alertBox = document.getElementById('data');
     alertBox.classList.remove("d-none");

views/main.html

@@ -29,6 +29,15 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
     <link rel="stylesheet" href="css/styles.css">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0QW5RS22VP"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-0QW5RS22VP');
+    </script>
     <script src="js/script.js" defer></script>
 </head>