Merge pull request #196 from dump-hr/Andrea/analitika

GTM submission tracking
dump-hr · Oct 2, 2024 · 82cbf7a · 82cbf7a
2 parents ac53870 + f452ba6
commit 82cbf7a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git a/apps/web/analytics.ts b/apps/web/analytics.ts
@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    dataLayer: any[];
+  }
+}
+
+export const initDataLayer = () => {
+  window.dataLayer = window.dataLayer || [];
+};
+
+export const pushToDataLayer = (event: string) => {
+  window.dataLayer.push({
+    event,
+  });
+};
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -12,8 +12,34 @@
     />
     <link rel="icon" href="./src/assets/favicon.ico" />
     <title>DUMP Udruga mladih programera</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=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-WRPZN2L');
+    </script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-WRPZN2L"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/apps/web/src/pages/ApplicationFormPage/ApplicationFormPage.tsx b/apps/web/src/pages/ApplicationFormPage/ApplicationFormPage.tsx
@@ -6,9 +6,10 @@ import {
 import { Checkbox } from '@mui/joy';
 import { Button, Input } from '@mui/material';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
+import { initDataLayer, pushToDataLayer } from '../../../analytics.ts';
 import { usePostIntern } from '../../api/usePostIntern';
 import formWelcomeImage from '../../assets/form-welcome-image.png';
 import { ApplicationFormInputHandler } from '../../components/ApplicationFormInputHandler/ApplicationFormInputHandler';
@@ -60,7 +61,11 @@ export const ApplicationFormPage = () => {
 
   const { errors } = formState;
 
-  const onSubmit = (data: FormValues) => {
+  useEffect(() => {
+    initDataLayer();
+  }, []);
+
+  const onSubmit = async (data: FormValues) => {
     const internToSend = {
       firstName: data.firstName,
       lastName: data.lastName,
@@ -78,9 +83,10 @@ export const ApplicationFormPage = () => {
     };
 
     try {
-      createIntern.mutate(internToSend);
+      await createIntern.mutateAsync(internToSend);
+      pushToDataLayer('internship_prijava');
     } catch (err) {
-      console.log(err);
+      console.log('Error', err);
     }
   };