Track newsletter signups

Author: ukutaht

_includes/footer.html

@@ -1,3 +1,4 @@
+<script type="text/javascript" src="{{ "/assets/js/index.js" | relative_url }}"></script>
 <footer class="w-full text-center text-gray-500 p-8 bottom-0" style="background: #191e38;">
   <div class="container flex items-center justify-between flex-col md:flex-row py-4">
     <div class="text-center md:text-left">

_layouts/post.html

@@ -43,7 +43,7 @@ <h1 class="text-3xl mt-2 tracking-tight leading-10 font-extrabold text-gray-900
 </div>
 
 <div class="container max-w-screen-sm mt-12">
-  <form class="mt-8 sm:flex justify-center" action="https://plausible.us20.list-manage.com/subscribe/post?u=aa3638e2a24986bbda7c17506&id=a307649d1b" method="post">
+  <form class="mt-8 sm:flex justify-center" id="newsletter-signup" action="https://plausible.us20.list-manage.com/subscribe/post?u=aa3638e2a24986bbda7c17506&id=a307649d1b" method="post">
     <input type="email" name="EMAIL" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
     <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
       <button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">

assets/js/index.js

@@ -0,0 +1,18 @@
+var newsletterForm = document.getElementById('newsletter-signup')
+
+if (newsletterForm) {
+  newsletterForm.addEventListener('submit', function(e) {
+    e.preventDefault();
+    setTimeout(submitForm, 1000);
+    var formSubmitted = false;
+
+    function submitForm() {
+      if (!formSubmitted) {
+        formSubmitted = true;
+        newsletterForm.submit();
+      }
+    }
+
+    plausible('Newsletter signup', {callback: submitForm});
+  })
+}

blog.html

@@ -13,7 +13,7 @@ <h1 class="text-4xl font-black">The Plausible Blog</h1>
 </div>
 
 <div class="container max-w-screen-sm mt-12">
-  <form class="mt-8 sm:flex justify-center" action="https://plausible.us20.list-manage.com/subscribe/post?u=aa3638e2a24986bbda7c17506&id=a307649d1b" method="post">
+  <form class="mt-8 sm:flex justify-center" action="https://plausible.us20.list-manage.com/subscribe/post?u=aa3638e2a24986bbda7c17506&id=a307649d1b" method="post" id="newsletter-signup">
     <input type="email" name="EMAIL" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
     <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
       <button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">